Adaptive Cards with Power Automate
Tags: powerplatform, adaptivecard, powerautomate, powerapps
Published: 2023-06-03 19:17:29

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1rvgdezoh2bwrhp5dm6f.png)

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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7qa53plm2551x04n1fua.png)
* 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d549e8ohaco2aq7wf1fu.png)

* 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
14. After saving the flow, please select **Test** from the top menu.
15. Your teams channel receives an Adaptive flow bot with three choices.
16. 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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lb75cztfoow430pymn1.png)

## 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 |