In this #PowerShot, I will show you how to use adaptive cards to create multi-line approvals, get response to the adaptive card via an email on Outlook and register the response using Power Automate.
Let's Get Started!
Approval actions with Power Automate have made life a lot easier when it comes to automating pen and paper/ email based approval processes. However, the out of the box available approval actions do not provide with a capability of approving/ rejecting individual items when a list is sent in the approval request. In this post, let's see how we can leverage adaptive cards and the office 365 outlook connector to address this limitation and create a multi-line approval process.
The scenario we are looking here at is a person creates multiple order items in SharePoint and sends those for approval to their manager. The manager reviews the order and verifies the items that need to be ordered. The manager can approve certain items from the list and the automation needs to be set up in a way that a single approval can be sent for multiple items in the same order.
Adaptive Card
Step 1: Create an Adaptive Card. Logon to : https://adaptivecards.io/designer/ and start creating the adaptive card by simply dragging and dropping the elements in the design area as shown in the screenshot below. Ensure that you select Outlook Actionable Messages as the host app.
The tricky part in this action is get the output and pass it to flow. The Element type of Action set and kind HTTP is used for the above scenario. In the method for the action.http, select POST and then pass the URL from the trigger of the second flow created in the next section. For the body, pass the below payload:
{ "choice":"{{choiceSelect.value}}", "reason":"{{reason.value}}", "item":"{{heading.value}}" }
Explanation:
1. choiceSelect is the id of the choices being created and all the selected values are returned by choiceSelect.value.
2. reason is the id of the text input where the approver can provide a reason for their decision. reason.value returns the text from that input control
3. heading is the id of the second text input control where the item ID from the SharePoint list will be passed and that will further be used to track the order and the items back to the list.
Step 2: Once the card is created, log on to : https://adaptivecards.io/visualizer and paste the entire JSON from the Card Payload editor generated in the Step 1. You should be able to see the card render as shown in the screenshot below.
The adaptive card is now ready to be used in Power Automate.
Power Automate
Flow 1: To create and send the multi line approval as an adaptive card via email.
Step 1: Trigger- Recurrence- To trigger the flow on a recurrence everyday.
Step 2: Action- Initialize Variable- Initialize a variable of type array. This will be further used to populate all the items that have to be sent for the approval.
Step 3: Action- Get Items- To get the items from the SharePoint List. Filter query has been used to get particular required items only.
Step 4: Control- Apply to each- To iterate over each item from the Get Items action.
//Loop Starts
Step 5: Action- Append to array variable- The items in this array will be passed as choices in the adaptive card. The JSON for which is as shown in the image below.
//Loop Ends
Step 6: Action- Compose- To compose the JSON for the adaptive card and add custom data. The common Order ID from the SharePoint items, Email of the user who has created the items, the array variable of Choices and the Order ID again are all passed to respective placeholders as shown in the image below.
Step 7: Action- Send an Email- To send the adaptive card as an email and get response on the choices. Switch to HTML code for the action and enter:
<script type=\"application/adaptivecard+json\">
</script>
and then pass the outputs of the compose action in the script tag as shown in the image below.
Flow 2: To get the response from the adaptive card and update it.
Step 1: Trigger- When an HTTP request is received- To trigger the flow when the user responds to the action card approval in the email.
Use the below payload to generate the schema:
{
"choice":"text",
"reason":"text",
"item":"text"
}
Step 2: Action- Initialize Variable- Initialize a variable of type array and use the expression below to populate the choices that have been approved by the approver.
split(triggerBody()?['choice'],',')
The selected choices are returned separated by ','.
Step 3: Action- Get Items- To get the items matching the Order ID returned from the trigger.
Step 4: Control- Apply to each- To iterate over each item returned in the previous action.
//Loop Starts
Step 5: Control- Condition- To check if the array created from the choices returned contains the title of the current SharePoint item or not.
//Yes Branch Starts
Step 6: Action- Update Item- To update the item in SharePoint item and mark the item as Approved, add the comments from the approver.
//Yes Branch ends
//No Branch
Step 7: Action- Update Item- To update the item in SharePoint item and mark the item as Rejected, add the comments from the approver.
//No Branch
//Loop Ends
Step 8: Action- Compose- To create the JSON to be sent as a response and display on the email after the approver has responded.
Step 9: Action- Response- To send the above JSON response to the email approver and update the adaptive card.
Remember to add the header as shown in the screenshot to update the card view in the email.
Let's see this in Action
In this post, we saw how to send multiple items for approval via adaptive cards in an Outlook email. The standard approval actions are limit the users to either approve or reject the entire item list. Using adaptive cards that limitation can be overcome and the users can select items to approve/ reject and provide their response.
Adaptive card code reference here.
I hope you found this interesting and it helped you. Thank you for reading!