Microsoft Teams Development
Microsoft Teams: A Microsoft customizable chat-based workspace.Development: The process of researching, productizing, and refining new or existing technologies.
3,250 questions
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(160, 48%, 25%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ESM%3C/text%3E%3C/svg%3E)
To ensure that your web page opens directly within the MS Teams environment instead of a new browser window, you need to configure your tab to use the microsoftTeams JavaScript library. Here are the steps you can follow:
- Initialize the Microsoft Teams library: Ensure that you have included the Microsoft Teams JavaScript SDK in your web page and initialized it properly. This can be done by calling
microsoftTeams.initialize(). - Use the
microsoftTeamslibrary to open URLs: Instead of using standard HTML links, use themicrosoftTeamslibrary to open URLs within the Teams environment. You can use the methodmicrosoftTeams.app.openLinkto achieve this.
Here is an example of how you can do this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="/styles/msteams-16.css"/>
<link rel="stylesheet" type="text/css" href="/styles/custom.css"/>
<script
src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js"
integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4"
crossorigin="anonymous">
</script>
<script>
microsoftTeams.app.initialize().then(() => {
});
function createLink() {
var appId = "<%-microsoftAppId%>";
var baseUrl = "<%-baseUrl%>";
// Passing the values and encoding the url while implementing the deeplink from tab
let url = "https://teams.microsoft.com/l/stage/"+appId+"/0?context={\"contentUrl\":\""+baseUrl+"/content\",\"websiteUrl\":\""+baseUrl+"/content\",\"name\":\"DemoStageView\"}";
alert("URL - " + url);
microsoftTeams.app.openLink(url);
};
</script>
</head>
<body class="theme-light">
<div class="surface">
<div class="panel">
<div>
<label for="tabChoice"></label>Click on the button to view the stage view from deeplink:
<button onClick="createLink()">Execute deeplink</button>
</div>
</div>
</div>
</body>
</html>
In this example, when the button is clicked, the createLink() function is called, which uses the microsoftTeams.app.openLink method to open the specified URL within the Teams environment.
Make sure to replace "url" with the actual URL you want to open.
Reference document:-
1.https://video2.skills-academy.com/en-us/javascript/api/%40microsoft/teams-js/app?view=msteams-client-js-latest#@microsoft-teams-js-app-openlink