Rendering adaptive cards in Outlook with actionable messages its a fantastic way to make your users more productive, and a quick and practical way to display and exchange content..
Adaptive cards offer Power Users and Developers a creative new way to engage with users, using a low-code approach and simple UI design which will automatically adapt to the host application. Send an adaptive card with accommodation details which users can accept or reject, send an approval email as part of a business process, or send an adaptive card with a small form asking users to enter their dietary requirements, these are some of the examples on how adaptive cards can help you and your business be more productive.
Lets take a look at how you can build this incredible cards with only two simple components, yes only two:
- Microsoft Power Automate Flows
- Azure Logic Apps
Send an adaptive card
Adaptive cards can be easily created with online tools such as: https://amdesigner.azurewebsites.net/
I'm not going to deep dive into how you create adaptive cards using JSON, the designer tool will provide you all the information you need. I will provide a simple adaptive card I've created for this article.
In this article I will show you how I use a simple adaptive card with a submit button to complete an approval process in Dynamics 365:
- An email containing an adaptive card with a submit button is sent to the approver
- The approver clicks the button and automatically sending the approval information to a logic app
- The Logic App processes the request and completes the approval process in Dynamics 365
We will use a Power Automate flow to trigger every time a new Approval record is created or updated in Dynamics 365, lets take a look below how we do this, this is how our flow will look like in the end:
Most of the steps are self-explanatory, the Flow will start when a Review and Approval record is created or updated, this is a custom entity I've created:
When the flow triggers, I will retrieve the Review and Approval record and the Opportunity record in order to access its data later on.
We now use the JSON compose action, Copy+Paste the below JSON code associated with the adaptive card:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"id": "a5ade1b0-736e-e6b5-e01f-464f42cfc186",
"text": "Project Title",
"wrap": true
},
{
"type": "ActionSet",
"id": "23699c36-4239-a9f2-7a1c-ca162182af9c",
"actions": [
{
"type": "Action.Http",
"id": "16053767-869c-9c4e-2514-f2d278c1b16c",
"title": "Submit",
"url": "https URL will go here",
"method": "GET",
"headers": [
{
"name": "Authorization"
},
{
"name": "Content-Type",
"value": "application/json"
}
]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"padding": "None"
}
Copy+Paste the code, and note I've appended the field Project Name from the Opportunity record, in front of the text block Project Title, its the only information I'm displaying in the adaptive card for the Opportunity record, this is for demo purposes, in the real world you want to add as much information as needed.
Please take a note at the URL element, you have noticed in my adaptive card code it says: https url will go here. When we create the logic App, a URL will be provided on the HTTP Request Action, note that this URL only appears when you Save the logic App, copy that URL, and paste it where it says https url go here, now at the end of the URL you need to add &recordid= and append the dynamic value of the Review and Approval record id.
The record GUID will be appended to the URL, and picked up by the GET method in the HTTP Request.
To complete our Flow you just need to add the send email action, in the example below, I send the email to the approver of that record, you need to wrap the adaptive card JSON code in <script type="application/adaptivecard+json"> </script> as per the below screenshot, for testing purposes remember to add yourself to the To: field.
Process the approval
Ok, you have now built the Power Automate Flow sending an email containing an adaptive card every time a record is created or updated, the adaptive card contains a submit button, but it needs a URL to send the data to. I'm going to create a simple Logic App, with the HTTP request action, which will listen for incoming requests, the logic app final result will look like this:
Logic apps are created in the Azure portal, navigate to https://portal.azure.com to create your logic app.
For the HTTP request to work we need to provide a JSON Schema, we can generate this by using the built-in tool, you can click Use payload to generate schema, and provide this JSON object:
{
"recordid": "",
"userid": ""
}
Click Add new parameter and select Method, then choose GET, essentially we are saying that the HTTP request will receive two possible parameters: recordid or/and userid via the GET method. The next action is to update the record, below you can see I'm updating Dynamics 365 Review Approval record, based on the recordid received by the HTTP request and then I update the record by setting the status to Approved.
Now we can provide a response back, this response will dynamically update the content of the card, as soon as the user clicks submit. Add the response action and use following code and headers as per the below screenshot:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"body": [
{
"id": "a5ade1b0-736e-e6b5-e01f-464f42cfc186",
"text": "Thank you for submitting your answer",
"type": "TextBlock",
"wrap": true
}
],
"padding": "None",
"type": "AdaptiveCard",
"version": "1.0"
}
Now lets take a look how it works:
I've manually created a Review And Approval record, which triggers my Power Automate Flow, and an email is received:
I Click Submit, if a successful response is received you will see the message below:
As you can see its incredibly easy to build a working solution using adaptive cards, I hope this was helpful and it helps you create new solutions at your workplace.
Please comment/leave your feedback.
