Embedded Files
Terminologies
Terminologies
Adaptive Card – It’s a JSON based UI object, which we can render in MS Team chat, Outlook, Windows Notification etc. Check here for more detail on Adaptive card
Scenario
Scenario
To understand Adaptive card integration with outlook we are going to achieve following scenario –
For an office weekend outing we want to decide from following two places –
Ganapatipule for water sports
Mahabaleshwar for strawberries
We want to store all responses in SharePoint list called “Response” with associate name and choice. So that we can make a decision.
Implementation Summery
Implementation Summery
Before going into solution lets understand following sequence diagram -
We are going to create a MS Automate flow to send email, this email will contain an adaptive card to collect location preference
User will select location inside mail body and will click on submit
On submit we will call another MS Automate flow "Record response"with selected location
Record response flow will store location in SharePoint list "Response"
Record response flow will also replace location collection adaptive card with another adaptive card with thank you message.
Implementation Detail
Implementation Detail
I have already created following list. It is having two columns one is to store associate name and another is for outing preference of associate.
Now let’s create our flow to send mail with trigger "Manually trigger a flow", and add an action "Send an email V2"
But to create mail body with adaptive card, we also need another flow which will receive the user response, so save this flow we will resume work here.
Create another flow with trigger "When a HTTP request is received", now set our request body using following payload
{
"associateName": "",
"locationPreference": ""
}
Request body JSON schema will automatically look like as shown in below image
Once we will receive user response lets save it in our Response list
Now after saving data in list we also need to send a confirmation to user in outlook mail body.
For this add action "Response", in the header section add property "CARD-UPDATE-IN-BODY" and set value to true, without this property outlook will not replace adaptive card in mail body.
Now to replace location collection adaptive card we will need another card, I created following card using one of the sample card from Adaptive Cards Designer
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"text": "Thank You !",
"size": "Medium",
"weight": "Bolder"
},
{
"type": "TextBlock",
"text": "Your response recorded successfully",
"wrap": true
}
]
}
Now save flow, and copy HTTP POST URL and save it in notepad. Copy button is highlighted in below image.
Now go back to our flow "Send location selection mail".
In Send an email action in Body section you will see </> button, click on that and delete the default content
Now add following script tag
<script type="application/adaptivecard+json">
</script>
Without this script tag outlook will not understand Adaptive card JSON
Now we need to create a adaptive card to collect location, I created following card using one of the sample card from Adaptive Cards Designer .
Replace the highlighted strikethrough part in below JSON with HTTP POST URL which we copied in notepad in previous step.
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"text": "Please select your location preference",
"weight": "Bolder",
"size": "Medium"
},
{
"type": "Input.ChoiceSet",
"choices": [
{
"title": "Ganapatipule for water sport",
"value": "Ganapatipule"
},
{
"title": "Mahabaleshwar for strawberries",
"value": "Mahabaleshwar"
}
],
"id": "locationChoices",
"style": "expanded"
}
]
}
]
}
],
"actions": [
{
"type": "Action.Http",
"title": "Submit",
"url": "https://prod-26.centralindia.logic.azure.com:443/workflows/35734a60bea04d898afc19789f6468ac/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=R-QqQ_Fz46Zz_p8CqCc6TvI7aO4gNg5A9xh2fPDSwvM",
"id": "submit",
"style": "positive",
"method": "POST",
"body": "{\"associateName\":\"DJ\",\"locationPreference\":\"{{locationChoices.value}}\"}",
"headers": [
{
"name": "Authorization",
"value": ""
},
{
"name": "Content-type",
"value": "application/json"
}
]
}
]
}
Now copy past this JSON between our script tag, our email body will look like as shown in image below.
Now its time to test our flow, Save our flow click on Test
If required fix or create connection then click on Continue
Finally run flow "Send location selection card"
Once our flow ran successfully you will see success screen as shown below, if there is any error then fix that and run again.
Now lets go and check our mailbox, as I kept myself as mail recipient.
Now select any option and click Submit, you will notice in a few second your mail body will refresh automatically and will show Thank you message as we configured in our second flow "Record Response"
Lets look at SharePoint list, you will notice a new item with location preference which we selected inside mail body.
You will also notice in Associate Name it is showing wrong information, it is because I am not sure yet how to fetch user detail in mail body, so passed "DJ" as string, let me know if you had any clue :-) You can drop your answers here.
Post relevance date : October 2020
Page updated
Report abuse