How to implement approval in Teams using Adaptive Cards

[Rahman1005]

Adaptive Cards are self-contained user interface components that transcend platform boundaries. Crafted in JSON format, these snippets of UI can be seamlessly exchanged between applications.

Upon reaching a particular application, the JSON content is dynamically rendered into native UI elements, seamlessly blending with the app's aesthetic. This approach facilitates the creation and seamless integration of lightweight UI elements across diverse platforms and frameworks.

User Story:

We're preparing to implement a leave approval workflow in Teams utilizing adaptive cards. Employees will submit their leave requests, and line managers will receive notifications within Teams.

Step 1 – Design the Adaptive Card

Prior to establishing the flow, let's initiate the card design process using the designer tool to ensure readiness. Visit https://adaptivecards.io/designer/  to access the designer interface and adjust the 'host app' setting to Microsoft Teams – Light / Dark. Once the card example is updated, we can proceed with development.

Navigate to https://adaptivecards.io/designer and in Card Payload Editor upload below JSON.

{

    "type": "AdaptiveCard",

    "body": [

        {

            "type": "Container",

            "style": "emphasis",

            "items": [

                {

                    "type": "ColumnSet",

                    "columns": [

                        {

                            "type": "Column",

                            "items": [

                                {

                                    "type": "TextBlock",

                                    "size": "Large",

                                    "weight": "Bolder",

                                    "text": "**New Leave Request**"

                                }

                            ],

                            "width": "stretch"

                        },

                        {

                            "type": "Column",

                            "items": [

                                {

                                    "type": "Image",

                                    "url": "https://adaptivecards.io/content/pending.png",

                                    "altText": "Pending",

                                    "height": "30px"

                                }

                            ],

                            "width": "auto"

                        }

                    ]

                }

            ],

            "bleed": true

        },

        {

            "type": "Container",

            "items": [

                {

                    "type": "ColumnSet",

                    "columns": [

                        {

                            "type": "Column",

                            "items": [

                                {

                                    "type": "TextBlock",

                                    "size": "ExtraLarge",

                                    "text": "@{triggerOutputs()?['body/Title']}",

                                    "wrap": true

                                }

                            ],

                            "width": "stretch"

                        },

                        {

                            "type": "Column",

                            "items": [

                                {

                                    "type": "ActionSet",

                                    "actions": [

                                        {

                                            "type": "Action.OpenUrl",

                                            "title": "View Item",

                                            "url": "@{triggerOutputs()?['body/{Link}']}"

                                        }

                                    ]

                                }

                            ],

                            "width": "auto"

                        }

                    ]

                },

                {

                    "type": "FactSet",

                    "spacing": "Large",

                    "facts": [

                        {

                            "title": "Submitted By",

                            "value": "**@{triggerOutputs()?['body/Author/DisplayName']}** @{triggerOutputs()?['body/Author/Email']}"

                        },

                        {

                            "title": "Employee",

                            "value": "@{triggerOutputs()?['body/Title']}"

                        },

                        {

                            "title": "Start Date",

                            "value": "@{triggerOutputs()?['body/StateDate']}"

                        },

                        {

                            "title": "End Date",

                            "value": "@{triggerOutputs()?['body/EndDate']}"

                        }

                    ]

                }

            ]

        },

        {

            "type": "Container",

            "items": [

                {

                    "type": "ActionSet",

                    "actions": [

                        {

                            "type": "Action.Submit",

                            "title": "Approve",

                            "style": "positive",

                            "data": {

                                "id": "@{triggerOutputs()?['body/ID']}",

                                "action": "approve"

                            }

                        },

                        {

                            "type": "Action.ShowCard",

                            "title": "Reject",

                            "style": "destructive",

                            "card": {

                                "type": "AdaptiveCard",

                                "body": [

                                    {

                                        "type": "Input.Text",

                                        "id": "RejectCommentID",

                                        "placeholder": "Please specify an appropriate reason for rejection.",

                                        "isMultiline": true

                                    }

                                ],

                                "actions": [

                                    {

                                        "type": "Action.Submit",

                                        "title": "Send",

                                        "data": {

                                            "id": "@{triggerOutputs()?['body/ID']}",

                                            "action": "reject"

                                        }

                                    }

                                ],

                                "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"

                            }

                        }

                    ]

                }

            ]

        }

    ],

    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",

    "version": "1.2",

    "fallbackText": "This card requires Adaptive Cards v1.2 support to be rendered properly."

}

Step 2 – Building The Flow

• To create the Flow, Go to Power Automate -> Create -> Start from Blank -> Automated Flow.
• Give an appropriate name for the Flow and select the “When an item is created” trigger and click on Create button.

• Add “Post an Adaptive Card to Teams Channel and wait for response” action.

• Team: Select the Team in which you want to post the approval
• Channel: Select the Channel in which you want to post the approval
• Message: Copy the json given above and paste it in the message section and ensure the dynamic content is copied properly, or if you have built your own adaptive card then paste your json here and add any dynamic content as required.
• Update Message: Provide the update message, which will be shown after approver user has provided the decision using the card.
• Should update card: Select yes here.

• Add “Condition” action to check whether approver has approved or rejected the request, on left hand side of the condition copy.
• body(' Postadaptivecardandwaitforaresponse')['submitActionId'] expression (without quotes) and on right hand side provide “Approve” value or whatever your action value is defined in your adaptive card for the buttons.

• Under the “yes” branch to update the item and send message to the employee once leave request approval or rejected, do following.

• Finally, the navigate to SharePoint site and create a new leave request.

• Manger will receive message in teams chats please refer below screen short.

• Adaptive card wait for response.

• Once manager approve’ s the request employee will receive message in teams that his leave request is approved.

Complete Flow.

Thank you...!