Forum Discussion

oskarkuus's avatar
oskarkuus
Brass Contributor
Aug 18, 2023

Adaptive card popup

Hi

 

I want to buld an adaptive card with a button in a teams channel.

When user press the butto

A popup window should open with an embed powerapp. 

 

I think this is more userfriendly than pointing the button to a tab in the channel. 

 

Is this possible? 

  • oskarkuus -

    Yes, it is possible to build an Adaptive Card with a button in a Teams channel that opens a popup window with an embedded Power App. This can provide a more user-friendly experience compared to pointing the button to a tab in the channel.

    To achieve this, you can use Task Modules in Microsoft Teams. Task modules allow you to create modal pop-up experiences in your Teams application. In the pop-up window, you can run your own custom HTML or JavaScript code or display an Adaptive Card.

    Here's an example of how you can implement this:

    1. Create an Adaptive Card with a button:
    {
      "type": "AdaptiveCard",
      "body": [
        {
          "type": "TextBlock",
          "text": "Click the button to open the Power App"
        }
      ],
      "actions": [
        {
          "type": "Action.Submit",
          "title": "Open Power App",
          "data": {
            "action": "openPowerApp"
          }
        }
      ]
    }
    
    1. In your bot or message extension, handle the openPowerApp action:
    protected override async Task<TaskModuleResponse> OnTeamsMessagingExtensionSubmitActionAsync(ITurnContext<IInvokeActivity> turnContext, MessagingExtensionAction action, CancellationToken cancellationToken)
    {
        if (action.CommandId == "openPowerApp")
        {
            var taskModule = new TaskModuleContinueResponse
            {
                Type = "continue",
                Value = new TaskModuleTaskInfo
                {
                    Title = "Power App",
                    Height = "medium",
                    Width = "medium",
                    Url = "https://your-power-app-url"
                }
            };
    
            return taskModule.ToTaskModuleResponse();
        }
    
        return null;
    }
    
    1. When the user clicks the "Open Power App" button, the openPowerApp action is triggered. In the bot or message extension code, you can handle this action and return a TaskModuleContinueResponse with the URL of your Power App. This will open the Power App in a popup window.

    By using Task Modules and Adaptive Cards, you can create a button in a Teams channel that opens a popup window with an embedded Power App. This provides a more user-friendly experience for your users.


    Ref Doc: Task modules - Teams | Microsoft Learn
    Thanks,
    Nivedipa
    -------------------------------------------------------------------------
    If the response is helpful, please click Mark as Best Response and like it. You can share your feedback via Microsoft Teams Developer Feedback link. Click here to escalate.

Resources