Using Adaptive card

#AdaptiveCard, #MDA, #PowerAutomate, #Teams, #Notification

Greetings everyone,

Following a conversation with my client regarding Approval Notifications, it has been determined that they would like to receive notifications in their MS Teams chat whenever a record is approved.

In my case, the client has a Deal entity and it has been configured as the Approval Flow. The user requested that: When their Deal has been approved, they will receive a notification about this event in the Team chat.

... and I propose to use Power Automate to send an Adaptive Card to the record owner once it is approved in MS Teams.

My propose

Simple Steps

Adaptive Card supporting framework

1. Building an Adaptive Card

For building an Adaptive card that shows messages in MS Teams, I used the tool - Adaptive Cards designer. And my sample:

My adaptive card design

I will not talk in detail about the components of this tool today, but I believe you can grasp and comprehend it swiftly... 😇 That is my promise. 😍

Okay ... I have attached the JSON code for this card below. You can try it out.

My sample card - JSON

Sample code

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.3",
    "body": [
        {
            "type": "TextBlock",
            "text": "Your Deal has been Approved",
            "size": "Large",
            "weight": "Bolder"
        },
        {
            "type": "TextBlock",
            "text": "Deal: [Name]"
        },
        {
            "type": "TextBlock",
            "text": "Customer: [Customer Name]}"
        },
        {
            "type": "TextBlock",
            "text": "Est. Amount: [EstAmount]"
        },
        {
            "type": "TextBlock",
            "text": "Approver: [ApproverName]",
            "wrap": true,
            "weight": "Bolder"
        },
        {
            "type": "TextBlock",
            "text": "Approval Date:[ApprovalDate]",
            "wrap": true,
            "weight": "Bolder"
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.OpenUrl",
                    "title": "Open Record",
                    "url": "[Link]"
                }
            ]
        }
    ]
}

For more details, you can find the Designing Adaptive Cards for your Microsoft Teams app

2. Creating the Power Automate

After finishing the Adaptive Card, I jumped to my solution and created a Cloud flow to send the Adaptive card to Deal Owner once it is approved in MS Teams.

2.1 Create Power Automate with the action "Post card in a chat..."

The action name: Post card in a chat or channel. Following the configure:

• Post as: Flow bot

• Post in: Chat with Flow chat

• Recipient: Owner of record who receive the notification

• Adaptive Card: input the JSON code of the card which was built from the Adaptive Carder designer tool.

Create flow and action

2.2 Edit the Adaptive Card's JSON code

After entering the JSON code into the Flow, I will modify the JSON's Placeholder with the Dynamics value from the record in the Flow.

2.3 My sample Flow:

Edit Adaptive Card's JSON code

3. Check-now

I will change the Status Reason of the Deal record to "Approved". Then, the Adaptive Card is sent to the Owner of the Deal in MS Teams.

Testing Adaptive Card posted in MS Teams chat

---

Tips: Use ChatGPT to gen the JSON code for the Adaptive Card

Besides using the Adaptive Card Designer, I requested help from the ChatGPT to generate the JSON code for a sample Adaptive card.

Let's try it yourself...

Use ChatGPT to generate Adaptive Card - Json code

Thank you and hoping well... 🎉 [NTD]yns.asia ...invite me a cup. ☕ Thank you. ❤️