Forum Discussion

MrZakaz's avatar
MrZakaz
Copper Contributor
May 23, 2024

Calling adaptive card from the channel message level using the button (Message created from Tab).

Hello,

I am struggling with one problem, I am adding a message to a channel using a Tab I created, I would like the message to contain a button that would trigger an adaptive card popup. This popup would need to dynamically fetch data from an external API.
For any answers, thank you

  • MrZakaz -

    To call an Adaptive Card from the channel message level using a button created from a Tab, you can follow these steps:

    1. Create an Adaptive Card with a Button:
      • You can create an Adaptive Card with a button that, when clicked, will invoke the card. Here is an example of an Adaptive Card with a button:
    {
        "type": "AdaptiveCard",
        "body": [
            {
                "type": "TextBlock",
                "text": "Click the button to invoke the Adaptive Card"
            }
        ],
        "actions": [
            {
                "type": "Action.Submit",
                "title": "Invoke Adaptive Card",
                "data": {
                    "cardType": "adaptiveCard"
                }
            }
        ],
        "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
        "version": "1.0"
    }
    
    1. Handle the Button Click Event in the Tab:
      • In your Tab code, you need to handle the button click event and send a message to the channel with the Adaptive Card. Here is an example of handling the button click event in a Tab using Javascript:
    // Handle the button click event
    document.getElementById('invokeButton').addEventListener('click', function() {
        microsoftTeams.tasks.submitTask({
            cardType: 'adaptiveCard'
        });
    });
    
    1. Send a Message with the Adaptive Card from the Tab:
      • When the button is clicked, you can use the microsoftTeams.tasks.submitTask method to send a message with the Adaptive Card to the channel. Here is an example of sending a message with the Adaptive Card:
    // Send a message with the Adaptive Card
    microsoftTeams.tasks.submitTask({
        type: 'message',
        value: {
            text: 'Here is the Adaptive Card:',
            attachments: [
                {
                    contentType: 'application/vnd.microsoft.card.adaptive',
                    content: {
                        type: 'AdaptiveCard',
                        body: [
                            {
                                type: 'TextBlock',
                                text: 'Here is a ninja cat:'
                            },
                            {
                                type: 'Image',
                                url: 'http://adaptivecards.io/content/cats/1.png',
                                size: 'Medium'
                            }
                        ],
                        version: '1.0'
                    }
                }
            ]
        }
    });
    

    By following these steps, you can call an Adaptive Card from the channel message level using a button created from a Tab in Microsoft Teams. 
    Ref Doc: Build Adaptive Card Tabs - 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. 



    • MrZakaz's avatar
      MrZakaz
      Copper Contributor

      Dear Nivedipa-MSFT,

      Maybe I misspelled before, I would like to first send a message to the channel and then run adaptive card from the button. Is it possible to debug a message already placed on the channel? For sending messages I use Graph. Another solution would be to present the message in a different way depending on the user Id as shown here: https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/universal-actions-for-adaptive-cards/user-specific-views?tabs=desktop%2CC
      However, it is not available for Tab.
      In addition, the microsoftTeams.tasks.submitTask you mentioned
      taskas and submitTask are depracted.

       

      Perhaps I will present a scenario:
      I have a form as Tab, because clicking the submit button a message is sent to the channel with the data. This message should either display differently depending on the user, or that there is a button in the message as an adaptive card which when pressed displays a popup as an adaptive card.
      Thanks a lot for your reply.
      Best regards

       

      • Nivedipa-MSFT's avatar
        Nivedipa-MSFT
        Icon for Microsoft rankMicrosoft

        MrZakaz -

        To implement the scenario you described, where a form submission in a Microsoft Teams tab sends a message to a channel, and the message is displayed differently based on the user or contains a button to display a popup Adaptive Card, you can follow these steps:

        1. Create the Form Tab: Develop a Microsoft Teams tab that contains the form where users can input data. This tab should include the necessary form fields and a submit button.

        2. Handle Form Submission: When the user submits the form, capture the form data and send a message to the channel using Microsoft Teams messaging APIs. Include the form data in the message payload.

        3. Customize Message Display: Customize the message content based on the user or certain conditions. You can include logic to dynamically generate the message content before sending it to the channel. For example, you might display different messages or layouts for different users based on their roles or permissions.

        4. Use Adaptive Cards for Message: Construct the message using Adaptive Cards to provide a rich and interactive user experience. You can design the Adaptive Card layout to display the form data in a visually appealing format. Include a button in the Adaptive Card for further interaction.

        5. Handle Button Action: Implement functionality to handle the button action within the Adaptive Card message. When the user clicks the button, trigger the display of a popup Adaptive Card. You can use Microsoft Teams messaging APIs to send the popup Adaptive Card as a reply to the original message or as a separate message in the channel.

        6. Design Popup Adaptive Card: Design the popup Adaptive Card to include additional information or options related to the form submission. Customize the layout and content of the popup Adaptive Card based on the context of the form data.

        7. Handle Popup Interaction: Implement functionality to handle user interactions within the popup Adaptive Card. This may include capturing user input, performing actions based on user selections, or closing the popup after the user completes the interaction.

          Please let us know if you have any further issues here.

          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