# 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="/files/Br4FierUKQyvJuVDOqVd" alt=""><figcaption><p>Simple Steps</p></figcaption></figure>

<figure><img src="/files/mhaSCQuP3d5X2cmaDIZa" 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="/files/avNa3AhdVjTXF88Y5ntM" 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="/files/yrLb1jA8hn4UIcTll3N4" 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="/files/POpk1C1MawZJ8OIkV5ro" alt=""><figcaption></figcaption></figure>

### 2.3 My sample Flow:

<figure><img src="/files/LgkmZklvF6a68Nt6dSYI" 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="/files/h4XBij2STKOkZ8vHG334" 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="/files/XfrewGZS82hOz9dk8OBe" 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:


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://dyns.ntd.asia/power-dynamics/power-platform/dataverse/using-adaptive-card.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.