Adaptive Cards in Teams Channel to drive the Doc-Approval Process using a Power Automate solution

[yashkamdar]

Whenever there is a need to design an automated solution for driving the approval and conversion process of documents in SharePoint Online, One drive etc., we look at the traditional Approvals – Start an approval template in Power Automate.

This traditional approach is simply not up to the task anymore and, to be honest, it isn’t a time friendly solution either.  Beyond it’s time drain, it has too many components that need to be coordinated and it’s driven via emails, never a good sign when you want to build a robust and reliable automated solution.

Good news, now there is a way to make this process streamlined, simple, quick, and efficient by using Adaptive Cards in The Microsoft Teams channel of a Power Automate (Flow) solution.  This post will describe how to make use of an Adaptive Card in The Microsoft Teams channel to drive the document approval and conversion process in SharePoint Online without using emails.

Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange.When delivered to a specific app, the JSON is transformed into native UI that automatically adapts to its surroundings.It helps design and integrate light-weight UI for all major platforms and frameworks.

The purpose of this post is not to describe the design of Adaptive Cards, but if you would like a quick primer on the design of Adaptive Cards, please use the designer made available over here.

I have also included a video tutorial at the end just in case you want to follow. 

Here is the link to my Youtube channel-

https://www.youtube.com/channel/UCM149rFkLNgerSvgDVeYTZQ?sub_confirmation=1

Before we begin, please make sure the following prerequisites are in place:

• An Office 365 subscription with access to Power Automate (Flow).
• Muhimbi PDF Converter Services Online Free, full or trial subscription (Start trial).
• Knowledge of basic operations using SharePoint Rest Endpoints
• Appropriate privileges to create Flows.
• Working knowledge of Power Automate (Flow) and Microsoft Teams.
• Knowledge of designing Adaptive Cards using Designer.

Configurations on the SharePoint end-

One of the most important parts in the Document Approval process is storing the responses associated with the approval,  so that the end user(s) who actually works on the document is updated on the current status of the document.

In order to keep the user(s) updated, we’re going to create some columns in the SharePoint source library so that we can display the following –

• Status of the document sent for Approval (Approve/Reject)
• The person who Approved/Rejected the document
• Approval/Rejection comments that may help the end user(s) understand why the Approval/Rejection decision was made.

As you can see in the image below, I have added three columns with the names File Status, Approved/Rejected By, and Approval Comments.

Now that SharePoint source library is configured, let’s go ahead and start configuring our Power Automate solution.

Step 1 – Trigger

• We use the SharePoint trigger ‘When a file is created in a folder’.
• This means that whenever new file is uploaded/created, the Power Automate (Flow) will get triggered automatically.
• For the ‘Site Address’ in the image below, choose the correct site address from the drop down menu.
• For the ‘Folder Id’ in the image below, select the source folder.

 Step 2 – Get File Content

• For the ‘Site Address’ in the image below, specify the same address as used in the Trigger in step 1.
• In the ‘File identifier’ field, navigate to the ‘Add Dynamic content’ line and choose the ‘File identifier’ option inside the ‘When a file is created in a folder’ trigger.

Step 3 – Get File Metadata

• For the ‘Site Address’ in the image below, specify the same address as used in the Trigger in step 1.
• In the ‘File identifier’ field, navigate to the ‘Add Dynamic content’ line and choose the ‘File identifier’ option inside the ‘When a file is created in a folder’ trigger.

Step 4 – Send an HTTP request to SharePoint

• For the ‘Site Address’ in the image below, specify the same address as used in the Trigger in step 1.
• For the ‘Method’ in the image below, select the ‘Get’ method from the drop down menu.
• Add the following as ‘Uri’ which will help us retrieve the Full URL (EncodedAbsoluteURL) and the name (FileLeafRef) of the file uploaded in the library.
• For the ‘ItemId‘ highlighted in red below, navigate to the ‘Add Dynamic Content’ line and choose the ‘ItemId’ option inside the ‘Get File Metadata’ action.

_api/Web/Lists/GetByTitle(‘your document library name’)/Items?$select=EncodedAbsUrl,FileLeafRef,ID&$Filter=Id eq [‘ItemId’]

• In the ‘Headers‘ option in the image below, enter ‘application/json;odata=nometadata’.

Step 5 – Initialize Variable

• Add ‘Initialize Variable‘ action to initialize a variable of type, ‘String’ and name it ‘DocURL’

Step 6 – Parse JSON

• For the ‘Content‘ in the image below, navigate to ‘Add Dynamic Content‘ line and choose the ‘Body‘ option inside the ‘Send an HTTP request to SharePoint‘ action.
• Add the following as ‘Schema‘:

{
    "type": "object",
    "properties": {
        "value": {
            "type": "array",
            "items": {
                "type": "object",
                "properties": {
                    "Id": {
                        "type": "integer"
                    },
                    "FileLeafRef": {
                        "type": "string"
                    },
                    "ID": {
                        "type": "integer"
                    },
                    "EncodedAbsUrl": {
                        "type": "string"
                    }
                },
                "required": [
                    "Id",
                    "FileLeafRef",
                    "ID",
                    "EncodedAbsUrl"
                ]
            }
        }
    }
}

Step 7 – Apply to each

• For the ‘Select an output from previous steps‘ in the image below, navigate to ‘Add Dynamic content‘ line and choose ‘Value‘ inside the ‘Parse JSON‘ action.
• Then, add a ‘Set Variable‘ action and for the ‘Name‘, select ‘DocURL‘ from the drop down menu and for ‘Value’, navigate to the ‘Add Dynamic content’ line, and choose ‘EncodedAbsoluteURL’ inside the ‘ParseJSON‘ action.

Step 8 – Post an Adaptive Card to a Teams channel and wait for a response

• For the ‘Team‘ in the image below, select the appropriate team from the drop down menu.
• For the ‘Channel‘ in the image below, select the appropriate channel where the Adaptive card should be sent whenever a new document gets uploaded in the source library.

• For the ‘Message‘, we will first need to complete the steps noted below.
• Navigate to the Adaptive card designer page and click on ‘New Card‘ option as shown below-

• Add the JSON below, to ‘Card Payload Editor‘ and you will be able to see a preview of how your adaptive card will look just above it.

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": 2,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Please Approve or Reject this document",
                            "weight": "Bolder",
                            "size": "Large",
                            "spacing": "ExtraLarge",
                            "separator": true,
                            "horizontalAlignment": "Center",
                            "height": "stretch",
                            "color": "Accent"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Approved By",
                            "wrap": true
                        },
                        {
                            "type": "Input.Text",
                            "id": "myName",
                            "placeholder": "Approver's full name"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Email Address",
                            "wrap": true
                        },
                        {
                            "type": "Input.Text",
                            "id": "myEmail",
                            "placeholder": "abc@example.com",
                            "style": "Email"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Approval/Reject Comments",
                            "wrap": true
                        },
                        {
                            "type": "Input.Text",
                            "id": "commentsId",
                            "placeholder": ""
                            
                        }
                    ]
                }
            ]
        }
    ],
    "actions": [
        {
            "type": "Action.OpenUrl",
            "title": "View document",
            "url": "google.com"
        },
        {
            "type": "Action.Submit",
            "title": "Approve",
            "size": "Small",
            "style": "positive"
        },
        {
            "type": "Action.Submit",
            "title": "Reject",
            "size": "Small",
            "style": "destructive"
        }
    ]
}

• Copy this JSON in the ‘Message‘ field of the ‘Post an Adaptive card‘ action at the top of this step.
• Notice that in the JSON just above, we have highlighted google.com, which is the ‘URL‘ property of ‘Action.OpenURL‘ type.
• Replace this with ‘DocURL‘ variable as shown below

• For the ‘Should update the card‘, select ‘Yes‘ and for the ‘Update message‘, enter ‘Your response is submitted‘.

Note – At this point, you will need to run the Power Automate once ,or the different values exposed by ‘Post an Adaptive Card to Teams channel‘ will not be made available in the ‘Add Dynamic Content‘ section which we need in the steps that follow right next.

Step 9 – Condition

• We will set a condition so, if a File gets approved then we will update the File properties with the different parameters and Convert the approved file to PDF.
• If the File does not get approved then we will only update the File properties with the different parameters as it does not make sense converting this file to PDF, since changes are expected in the File before it is approved.
• Add a ‘Condition‘ action and for the ‘choose a value‘ in the image below, navigate to the ‘Add Dynamic Content‘ line, and choose ‘SubmitActionId‘ inside the ‘Post an Adaptive Card to Teams Channel‘ Action.
• Then select ‘is equal to‘ from the drop down menu and enter ‘Approve‘ in the ‘choose a value‘ box.

Step 10 – Outcome of Step 9  is true, If yes

• Add action ‘Update File properties‘ and specify the same address as used in the Trigger in step 1.
• Select the appropriate library name from the drop down menu for the ‘Library Name‘ where the file for approval is going to be uploaded.
• For the ‘Id‘, navigate to the ‘Add Dynamic Content line‘ and choose ‘ItemId‘ from the ‘Get File Metadata‘ action.
• For ‘File status‘, ‘Approved by‘, and ‘Approval Comments‘, navigate to the ‘Add Dynamic content‘ line and enter ‘submitActionId’, ‘data.myName‘, and ‘data.commentsId‘ respectively from the ‘Post An Adaptive Card in Teams Channel‘ action.

• Next, add a ‘Convert document‘ action and for the ‘Source File Name‘, navigate to ‘Add Dynamic Content‘ line and choose ‘File name with extension‘ inside the ‘Update File properties’ action.
• For the ‘Source File Content‘, navigate to ‘Add Dynamic Content‘ line, and choose ‘File Content‘ inside the ‘Get File Content‘ action.

• Add a ‘Create File‘ action and for the ‘Site Address’ in it, choose the correct site address from the drop down menu.
• Select the correct ‘Folder Path’ where the converted PDF should be created.
• Give a meaningful ‘File Name’ to the created PDF, but make sure you remember to add the extension ‘.pdf’ after the ‘File Name’ and to make the file name unique, or multiple runs of the flow will overwrite the same file.  I recommend basing it on the source file name, but with some kind of suffix.
  Select the ‘Processed file content’ option, shown in the image below, to populate the ‘File Content’ field.

Step 10 – Outcome of Step 9  is false, If No

• Add action ‘Update File properties‘ and specify the same address as used in the Trigger in step 1.
• Select the appropriate library name  from the drop down menu for the ‘Library Name‘ where the file for approval is going to be uploaded.
• For the ‘Id‘, navigate to the ‘Add Dynamic Content line‘ and choose ‘ItemId‘ from the ‘Get File Metadata‘ action.
• For ‘File status‘, ‘Approved by‘ and ‘Approval Comments‘, navigate to ‘Add Dynamic content‘ line and enter ‘submitActionId‘, ‘data.myName‘ and ‘data.commentsId‘ respectively from the ‘Post An Adaptive Card in Teams Channel‘ action.

Perfect, go ahead and run the Power Automate now by uploading a File in the source library, fill-in the Adaptive card and choose either Approve or Reject (I have chosen Approve here), but  Reject proves the rejected file will not be converted to PDF..

In a short time, you will see that the File properties have been updated based on your responses in the Adaptive card and a PDF File has been created successfully.

Outputs- 

File uploaded for Approval –

Adaptive Card received in Team channel – 

File properties updated and File converted to PDF –

File Converted to PDF –

Video Tutorial - 

Keep checking this blog for exciting new articles about Power Automate, SharePoint Online, Power Apps, as well as document conversion and manipulation using The Muhimbi PDF Converter.

[Brad_Groux]

Thank you for this, @yashkamdar! I am introducing a junior team member to the thought of migrating some of our internal IT processes to Power Automate, Microsoft Teams and Adaptive Cards, and you basically gathered all of the information I was going to do for him. THANKS AGAIN!

[yashkamdar]

Most welcome @Brad_Groux !! I am glad you loved the blog post. Thank you subscribing to the YouTube channel as well, many more interesting videos and use cases coming up !!

[syam2k]

It is really good post and is will be very useful for many beginners. We have planned to use approval in teams channel and working, but after going thru this we found every thing that we are looking for. Thanks for posting. Keep up your good work and keep posting.