I’ve been assisting with random comments to a client who wants to start an approval on a document, and have that show up as a card with Approve/Decline buttons in Teams. And yesterday the good SharePoint/Flow man himself Chaks at Microsoft reached out with a similar scenario.
Chaks wanted to build a bot for this, and I asked if he had tried the Adaptive Card action in Flow, and have card buttons trigger an approval/decline action via a HTTP trigger. Turns out that adaptive cards via Flow in Teams does not support Action.Http. End of story.
Here I am, having told a client this should be easy, and Chaks telling me I can’t do it. Being me, that’s not acceptable, of course it can be done – and turns out my ego was right this time :D (it’s not always)
Start the approval Flow from SharePoint.
Adaptive card in Teams.
Important: Enable Major, minor versioning and approval on the document library. And I have not put any thoughts into licensing of actions in Flow if any for this scenario.
How??? Let me show you!
Let’s start with the approval part first. You don’t need to use a HTTP POST action to trigger a Flow. Flip open the advanced options and you can trigger by GET. And the good part, you can pass in routing information and pick out values from the calling URL.
In the above image I have specified Response/{Response}/Id/{Id} as my routing path which let’s me access Response and Id as variables in my Flow. In my case Response will be Approve/Decline, and Id is the item if of the file which should be approved.
Here’s an explanation of the complete approval flow:
- Request is received
- Load file properties based on the item id (using the id saves encoding issue)
- Get file metadata to easily retrieve the ETAG value needed for approval (you can retrieve the ETAG value from the previous step as well, but that requires more work)
- Check response for Appove or Decline
- Approve or Decline the document approval
- Output a simple web page to the approver
Note: I had issues where Response and Id did not show up for all actions as dynamic variables in the Flow designer. This is solved by using them further down and copy/paste them where needed.
As for the asking for approval Flow, it’s a few simple steps:
- For the selected file, load file properties
- Create an adaptive card based on the file information
- Post the card to a Teams channel
{ "type": "AdaptiveCard", "body": [ { "type": "Container", "items": [ { "type": "TextBlock", "size": "Medium", "weight": "Bolder", "text": "Please approve or decline the document" }, { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "weight": "Bolder", "text": "@{body('Get_file_properties')?['Editor']?['DisplayName']}", "wrap": true }, { "type": "TextBlock", "spacing": "None", "text": "Modified {{DATE(@{body('Get_file_properties')?['Modified']},SHORT)}}", "isSubtle": true, "wrap": true } ], "width": "stretch" } ] } ] }, { "type": "Container", "items": [ { "type": "TextBlock", "text": "Someone wants you to approve the following document: ", "wrap": true } ] } ], "actions": [ { "type": "Action.OpenUrl", "title": "Approve", "url": "https://.../invoke/Response/Approve/Id/@{body('Get_file_properties')?['ID']}?..." }, { "type": "Action.OpenUrl", "title": "Decline", "url": "https://.../invoke/Response/Decline/Id/@{body('Get_file_properties')?['ID']}?..." } ], "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "version": "1.0" }
Happy flowing!