Adaptive Cards – open yourself to more content
By Shrikant Sharma
In today’s world where content is currency, people are always searching for new and interactive ways to extract content from different platforms.
Adaptive cards provide a JSON schema and empowers you to open any content across different platforms to deliver an engaging experience. Adaptive Cards are designed to “adapt” to whatever platform they’re being used in, because the host application is given ultimate control over how the content needs to look. For instance, the same contact card in Dynamics 365 can be viewed in Microsoft Team…taking on the look and feel of Teams.
Adaptive cards can be hosted on:
- Bot Framework Webchat
- Outlook Actionable Messages
- Microsoft Teams
- Cortona Skills
- Windows Timeline
- Windows Notifications
As Microsoft says, “Users win because everything feels familiar. Host apps win because they control the user experience. And Card Authors win because their content gets broader reach without any additional work.”
In this blog, we explore a step by step guide on how to create and send an Adaptive Card in Outlook and get a response using Power Automate (MS Flow).
Before we start, it is important to note that whilst the above can be achieved using Flow Approvals or Email with Option action in Power Automate, there are some restrictions.
For instance, Approval Flow can only be used for internal teams and you can’t send it to others outside your organisation. Similarly, when using Email with Option Action in Power Automate, you cannot ask for any other inputs other than what is provided as the specified options.
So, how do you create a simple Adaptive Card which will ask users to select an option and provide a comment?
Step 1: Log into https://adaptivecards.io/designer/ and start creating the adaptive card by simply dragging and dropping the elements in the design area. Alternatively, you can simply modify an existing one. Ensure that you select Outlook Actionable Messages as the host app.
Below is the generated JSON of the Adaptive Card.
{
“type”: “AdaptiveCard”,
“inputNecessityIndicators”: “requiredInputs”,
“displayInputSuccessIndicators”: true,
“version”: “1.0”,
“body”: [
{
“type”: “TextBlock”,
“size”: “Medium”,
“weight”: “Bolder”,
“text”: “Please take a moment to answer one simple question by clicking either link below.”,
“horizontalAlignment”: “Center”
},
{
“type”: “TextBlock”,
“text”: “How was your experience?”
},
{
“type”: “Input.ChoiceSet”,
“id”: “SingleSelectVal”,
“isRequired”: true,
“errorMessage”: “Please select one of the above option”,
“style”: “expanded”,
“value”: “1”,
“choices”: [
{
“title”: “Good – I’m satisfied”,
“value”: “1”
},
{
“title”: “Bad – I’m unsatisfied”,
“value”: “2”
}
]
},
{
“type”: “Input.Text”,
“placeholder”: “Comment”,
“style”: “text”,
“maxLength”: 0,
“isRequired”: true,
“errorMessage”: “Required”,
“id”: “SimpleVal”
}
],
“actions”: [
{
“type”: “Action.Http”,
“title”: “Submit”,
“url”: “https://prod-29.southeastasia.logic.azure.com:443/workflows/b9277c7040154322b45dbf536ba0f6ac/triggers/manual/paths/invoke?api-version=2016-06-01",
“id”: “submit”,
“style”: “positive”,
“method”: “POST”,
“body”: “{\”choices\”:\”{{SingleSelectVal.value}}\”,\”comment\”:\”{{SimpleVal.value}}\”}”,
“headers”: [
{
“name”: “Authorization”,
“value”: “”
},
{
“name”: “Content-type”,
“value”: “application/json”
}
]
}
]
}
Step 2: Create a Power Automate to send an email using the Adaptive Card.
- Next you need to define the trigger. In this example we have opted to use Manual but you can select others based on what you are trying to achieve.
- Add Action Compose and paste the JSON which you have created into the Adaptive Card studio.
- Add Action Send Email and convert its body into HTML format. Thereafter, you need to add the tag below. Ensure you add the output which you received from Compose step in the middle of the tag.
<script type="application/adaptive card+json"> </script>
Now you are ready to send an email using the Adaptive Card but the response extraction part is still pending. Next you need to create one more flow to extract the response.
Step 3: Create a Power Automate to extract the response.
- Define “When an HTTP request is received” trigger and passed below JSON. This JSON will vary based on your specific requirement.
{
“choice”: “text”,
“reason”: “text”
}
- Add two variables to store the response. You can use the snippet below to extract the response.
split(triggerBody()?[‘choices’],’,’) split(triggerBody()?[‘reason’],’,’)
- Then add a Compose Step to send a successful submission notification.
- Add Response action which will update the Adaptive Card. Remember to add the header below which will update the card view in email.
CARD-UPDATE-IN-BODY = True
Tada! Everything is set up and it’s time to demo it.
If you have any other ways or ideas on how to build Adaptive Cards to make the process more interactive then please comment down below.
