How to create Adaptive Cards in MS Teams using Power Automate?

In this blog, we are going to see “how to create Adaptive Cards in MS Teams using Power Automate”

We must know what is Adaptive Cards? and How it is useful in real world?

Adaptive Cards
Adaptive Cards are a platform-agnostic method of sharing and displaying blocks of information without the complexity of customizing CSS or HTML to render theme.
It is JSON format, and integrates with cloud apps and services. When it is hosted in specific domain like MS Teams and JSON format is transformed into their Native UI styles automatically.

It helps the user to exchange the data between cloud apps and services.

Pre-requisities

1. MS Teams
2. Power Automate
3. SharePoint Online site

In this demo, take some simple use case here.

HR team provides employee details to IT department for creation of Login Credentials.

a. HR team submits the basic employee details and save into SharePoint Online.

b. IT team will update the Login Credentials for new employee from Teams Channel after message has posted in form of adaptive card form.

Follow the below steps:

a . Create custom List in SharePoint.

b. Create one teams and channels. (to post the adaptive cards in this channel)

Assume that we have SharePoint list and MS Teams with ready.

In this demo I have taken manual trigger in Power Automate.

Steps to create Adaptive cards using Power Automate

1. Create manual trigger flow.

Taking three input parameters FirstName, LastName and PhoneNumber

2. Add action “Create Item” in SharePoint

As mentioned earlier, I have created SharePoint Site as “TrainingPortal” and SP list as “Employee Details” with columns Title, LastName, Email, Phone and User Account.

As per use case, HR team saves Employee details in SharePoint list with basic information.

Note : Email and UserAccount columns are left blank. These fields will be updated by IT team using Adaptive Cards in MS Teams

3. After item is created in SharePoint, now create Adaptive Card in MS Teams and Channel.

Add Action “Post an Adaptive Card to a Teams channel and wait for a response”
There are few mandatory parameter need to provide

1. Team — provide MS Team’s Name (I have created “Demo 1” as MS Team)
2. Channel — provide Channel name
3. Message — this parameter value as JSON format which it creates the Adaptive Card.

In body key (JSON) — will create UI elements like Text block, Input Text box, Dropdown, Buttons etc.

To design adaptive card, please visit this site https://adaptivecards.io/designer/

These are important things which highlighted.

a. In JSON body, “id” key hold the input values
b. Update message — is an optional parameter. This parameter will post the reply in team’s channel after submission. Here, we can give any custom message.
c. Should update card — it updates the adaptive card after submission

3. After submit the details, we have to update in SP list from adaptive card

Add an action “Update Item” in Sharepoint

The below fields are captured from adaptive cards.
i) ac_email and ii) ac_login — which holds the dynamic values from adaptive card inputs

All set, now lets run the flow and see the results.

1. Provide the required fields inputs and click the “Run flow” button.

2. After flow starts, item created in SharePoint list.

3. It waits for the response from adaptive card submission since we have chosen this actions “Post an Adaptive Card to a Teams channel and wait for a response”

4. Lets go to Teams and check how adaptive card looks like.

As discussed, adaptive cards are taken the UI styles automatically based on hosted app.

5. Enter the details in form and click “submit”

6. Check the flow now

This is how response will be received from teams

7. After Successfully received, updating the SharePoint list

8. In SharePoint list, data will be saved.

That’s all.

I hope we know how to create the adaptive cards using Power Automate.

Happy Learning!!!