# Using Adaptive card

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 <mark style="background-color:green;">**Adaptive Card**</mark> to the record owner once it is approved in MS Teams.

## My propose

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FMSmKxIem2AT97SD0NrbL%2F_step_adaptive_card.gif?alt=media&#x26;token=f4a65639-1071-4ffd-8948-43f5acc94f86" alt=""><figcaption><p>Simple Steps</p></figcaption></figure>

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FXzHOJIfcAUy78KcUfRL3%2F_cover_adaptivecard.png?alt=media&#x26;token=b2478acd-58d9-4354-96e2-7d5dcd967dbd" alt=""><figcaption><p>Adaptive Card supporting framework</p></figcaption></figure>

## 1. Building an Adaptive Card

For building an Adaptive card that shows messages in MS Teams, I used the tool - [**Adaptive Cards designer**](https://adaptivecards.io/designer/)**.**  And my sample:

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FBEE4Ut4eOCzL7MyWlPEb%2Fimage.png?alt=media&#x26;token=652d86c4-cf85-4d0a-9b00-8ed50df11375" alt=""><figcaption><p>My adaptive card design</p></figcaption></figure>

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

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

<details>

<summary><mark style="color:orange;">My sample card - JSON</mark></summary>

{% code title="Sample code" overflow="wrap" lineNumbers="true" fullWidth="false" %}

```json
{
    "$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]"
                }
            ]
        }
    ]
}
```

{% endcode %}

</details>

{% hint style="info" %}
For more details, you can find the [Designing Adaptive Cards for your Microsoft Teams app](https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/design-effective-cards?tabs=design#adaptive-cards-designer)
{% endhint %}

## 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..."&#x20;

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.*

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2F8S9Eduzz1F9Vvz5qZePp%2F_create_action_copy_json_card.gif?alt=media&#x26;token=9428545b-e5c3-4b3f-8fd5-3be7381c692e" alt=""><figcaption><p>Create flow and action</p></figcaption></figure>

### 2.2 Edit the Adaptive Card's JSON code&#x20;

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.

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FFjUxuPlTk8mTtofI6eWR%2F_edit_placeholder_for_flow.gif?alt=media&#x26;token=976d5e70-7841-4d6c-b5a7-e8a9f8d0b9bf" alt=""><figcaption></figcaption></figure>

### 2.3 My sample Flow:

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2F7uto2PiZncbe6mY4pVwG%2Fimage.png?alt=media&#x26;token=b6fa8852-84cc-412c-acb7-de9eb457c054" alt=""><figcaption><p>Edit Adaptive Card's JSON code</p></figcaption></figure>

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

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2FGv7uPGL9ovae1EruJ3Dv%2F_Testing_Adatptive_Card.gif?alt=media&#x26;token=2be01cfe-8e1a-47fd-9c24-03e43e71b341" alt=""><figcaption><p>Testing Adaptive Card posted in MS Teams chat</p></figcaption></figure>

***

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

<figure><img src="https://4233060750-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjhtQupP7ACZVtv3cCNCr%2Fuploads%2Fhdt8OrWqWGG8qiJFqxXJ%2F_Using3_ChatGPT_to_gen_Json_AdaptiveCard_simple.gif?alt=media&#x26;token=52868a1e-b046-47b9-b041-78655e7aa0ba" alt=""><figcaption><p>Use ChatGPT to generate Adaptive Card - Json code</p></figcaption></figure>

Thank you and hoping well... :tada:\
\&#xNAN;**\[NTD]yns.asia**\ <mark style="color:red;">...</mark>[<mark style="color:red;">invite me a cup.</mark>](https://ko-fi.com/ntdyns/?ref=qr\&amp;v=2) :coffee: Thank you. :heart: