Adaptive Cards with Power Automate

Greetings to all Tech enthusiasts and Tech specialists!!!

In this blog, I am demonstrating how to send Survey Adaptive cards to Microsoft Teams.

Adaptive cards: Adaptive Cards are openly exchangeable, platform-neutral JSON-written UI snippets that may be used by apps and services. The JSON is converted into native UI when it is supplied to a specific app, and it then automatically adjusts to its surroundings. It aids in the creation and integration of lightweight user interfaces for all important platforms and frameworks. Many Microsoft products, including Teams, utilize the Adaptive Card foundation. Users can receive cards inside of messages via bots or message extensions. On cards that are present, users can also perform actions.

Following are the objectives of this blog:

• Prerequisites
• Create an action
• Test your Adaptive card
• Troubleshooting tips for Adaptive card

Prerequistes

• Power platform subscription
• Microsoft Teams configured
• Create a Microsoft Teams Channel as Testing.

Create an action

You will add an action in this step that will use information from earlier actions in the flow to post information to a Microsoft Teams channel.

• Sign in to Power Automate.
• Select My flows from the side bar options.
• Select New flow > Instant cloud flow.

please use below picture as reference:

It will open a window named Build an instant cloud flow.

• Add a name as Surveyflow of your flow on the Flow name box.
• Select Manually trigger a flow as the trigger.
• Select Create.

please use below picture as reference:

• In the designer, select New Step.
• Search for Microsoft Teams, and then select Post an adaptive card and wait for a response as the action. please use below picture as reference:

• On the Post an adaptive card and wait for a response box enter in the Post as section select Flow bot and in the Post in section select Channel.

• In the Message section enter the following JSON script.

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Poll Request",
            "id": "Title",
            "spacing": "Medium",
            "horizontalAlignment": "Center",
            "size": "ExtraLarge",
            "weight": "Bolder",
            "color": "Accent"
        },
        {
            "type": "TextBlock",
            "text": "Power Automate Poll",
            "id": "acHeaderTagLine",
            "separator": true
        },
        {
            "type": "TextBlock",
            "text": "Preferred Job types",
            "weight": "Bolder",
            "size": "ExtraLarge",
            "spacing": "None",
            "id": "acHeader"
        },
        {
            "type": "TextBlock",
            "text": "We are polling our employees in order to determine which type of job they prefer Completely Online/Completely Offline/Hybrid. ",
            "id": "acInstructions",
            "wrap": true
        },
        {
            "type": "TextBlock",
            "text": "Please vote on your preferred job types from the choices listed here.",
            "id": "acPollQuestion"
        },
        {
            "type": "Input.ChoiceSet",
            "placeholder": "Select from these choices",
            "choices": [
                {
                    "title": "Completely Online",
                    "value": "Completely Online"
                },
                {
                    "title": "Completely Offline",
                    "value": "Completely Offline"
                },
                {
                    "title": "Hybrid",
                    "value": "Hybrid"
                }
            ],
            "id": "acPollChoices",
            "style": "expanded"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit",
            "id": "btnSubmit"
        }
    ]
}

• On the Update message section enter Thanks for your repsonse.
• On the Teams section select Testing and for the Channel section select General.
• Select Save.

Test your adaptive card

1. After saving the flow, please select Test from the top menu.
2. Your teams channel receives an Adaptive flow bot with three choices.
3. You can select any of the choices and select submit. Instantly you will receive a response in the same channel.

Please see the below reference:

Troubleshooting tips for Adaptive card

The most common problems that you will encounter when creating adaptive cards are:

• Flow run errors are often caused by one of the following factors:

• The Flow App is not installed in Microsoft Teams – Please install the Flow App into Teams.

• JSON that is incorrectly formatted - This is more common than one might think. Generally, these are simple instances of:

• Values in the JSON have curly or missing quotes around them. Always double-check the JSON to make sure that all text values are in quotation marks and that all numbers are in quotation marks. Straight, not curly, quotation marks must be used throughout.

• By putting the JSON into the Card Payload Editor, you may check the format of your JSON

• Missing Image URLs: Adaptive Cards must use image values that point to real URLs. An Adaptive Card does not directly provide full image content. By pasting the URL into the browser, you may check your image links to see if an image is displayed.

Hope You Enjoyed the Post!!!

Keep Learning | Spread Knowledge | Stay blessed |