Forum Discussion

druuby's avatar
druuby
Copper Contributor
Nov 02, 2023

Microsoft Teams Adpative card on clicking button how to open browser window as popup

On clicking the button in Microsoft Teams Adaptive card how to open the browser window as a popup.

Eg: In the Teams Jira cloud app clicking the sign-in button under the adaptive card opens the browser window as a popup.

 

I am using the below code in my adaptive card which opens the new browser tab and not as a browser window popup.

{
  "type": "Action.OpenUrl",
  "id": "loginId",
  "title": "Sign in",
  "url": "${url}"
},

How do I open the browser window as a popup? 

Thank you

BOT
developer
microsoft teams
  • Meghana-MSFT's avatar
    Meghana-MSFT
    Icon for Microsoft rankMicrosoft
    Nov 02, 2023

    druuby - 

    In general, Adaptive Cards in Teams do not directly support opening a browser window as a popup. They can, however, trigger a Task Module which can then open a webpage in a popup-like experience within Teams.

    Here's a sample code snippet that shows how to open a Task Module from an Adaptive Card:

    {
    "type": "Action.Submit",
    "title": "Open Popup",
    "data": {
        "msteams": {
            "type": "task/fetch"
        }
    }
}

    When this button is clicked, your app will receive an Invoke activity with name task/fetch. Your app should respond to this Invoke activity with a Task Module response that includes the URL of the webpage to open:

    {
    "task": {
        "type": "continue",
        "value": {
            "title": "My Popup",
            "url": "https://www.example.com",
            "height": "medium",
            "width": "medium"
        }
    }
}

    This will open the webpage in a Task Module, which is a popup-like experience within Teams. However, it will not open a new browser window or tab.

    • druuby's avatar
      druuby
      Copper Contributor
      Nov 02, 2023

      Meghana-MSFT 

      Thank you for replying. I am using the solution provided by you for a different use case.

      I am looking to get some info on how the Teams Jira cloud app opens the browser window as a popup when clicking the sign-in button under the adaptive card.


      • Meghana-MSFT's avatar
        Meghana-MSFT
        Icon for Microsoft rankMicrosoft
        Nov 03, 2023

        druuby - 

        To open a browser window as a popup when clicking the sign-in button under the Adaptive Card, you can use the TeamsJS library's authentication.authenticate() function. This function is designed to open a popup window and start the authentication flow.

        Here is a sample code snippet using TeamsJS v2: 

        import { authentication } from "@microsoft/teams-js";
authentication.authenticate({
url: window.location.origin + "/tab/simple-start-v2",
width: 600,
height: 535})
.then((result) => {
console.log("Login succeeded: " + result);
let data = localStorage.getItem(result);
localStorage.removeItem(result);
let tokenResult = JSON.parse(data);
showIdTokenAndClaims(tokenResult.idToken);
getUserProfile(tokenResult.accessToken);
})
.catch((reason) => {
console.log("Login failed: " + reason);
handleAuthError(reason);
});

        And here is a sample code snippet using TeamsJS v1:

        microsoftTeams.authentication.authenticate({
url: window.location.origin + "/tab-auth/simple-start",
width: 600,
height: 535,
successCallback: function (result) {
getUserProfile(result.accessToken);
},
failureCallback: function (reason) {
handleAuthError(reason);
}
});

         

        In both examples, the url parameter is the start page of the authentication flow. The width and height parameters define the size of the popup window. The successCallback function is called when the authentication process is successful, and the failureCallback function is called when the authentication process fails.

        Please note that the authentication flow must start on a page that's on your domain. This domain should also be listed in the validDomains section of the manifest. Failure to do so will result in an empty pop-up.

        For more information, you can refer to the Teams platform documentation on Authentication in Teams.

Resources