Table of contents
- What are Actionable Messages
- Configuration of 'Send email' action with the Adaptive Card
- Configuration of the Actions in the Adaptive Card with Power Automate
What are Actionable Messages
According to the article Actionable messages in Outlook and Office 365 Groups on docs.microsoft.com, 'Actionable Messages enable you to take quick actions right from within Outlook. Developers can now embed actions in their emails or notifications, elevating user engagement with their services and increasing organizational productivity. Office 365 provides two solutions to enhance productivity with Outlook Actionable Messages: actionable messages via email, and actionable messages via Office connectors.'
Sending actionable messages via email is supported in the following scenarios.
- The recipient must be an individual, not a group.
- The recipient must be visible on the message. Do not put the recipient in the BCC field.
- The recipient must have a mailbox on Outlook.com or Exchange Online in Office 365.
An Actionable Message is basically an email with a JSON body. These Actionable Messages are also known as Adaptive Cards that you need to design. You can use the Actionable Message Designer to design the card. There you will find Adaptive Card samples that can help you get started crafting your own cards.
In order to enable Actionable Message functionality, you need to provide certain information to Microsoft. When the recipient of the message is NOT the same as the sender, you should specify the correct originator property. It must be set to a valid provider ID generated by the Actionable Email Developer Dashboard. The most important configuration steps are the following:
- Target URLs: HTTPS URLs that will be invoked by the actions from the message card.
- Scope of submission: Here you can set the scope, i.e. whether you want to send mail to all the Office 365 users within your organization or any Office 365 user.
Configuration of 'Send email' action with the Adaptive Card
Outlook Actionable Messages cards are designed using the Adaptive Card format. To create an Adaptive Card navigate to Actionable Message Designer and choose one of the samples (for ex. sample 'Vacation Approval'). You can check available controls and their properties here.
You need to have a SharePoint List to track users vacation requests. An Actionable message could be sent after a user submits the request (save SharePoint list item).
You need to encapsulate card JSON (you can copy it directly from the Actionable Message Designer) within a script tag as follows:
<script type="application/AdaptiveCards+json">
<!--BODY OF THE CARD -->>
</script>
This script tag is added to the head section of the html email as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/AdaptiveCards+json">
….
</script>
</head>
<body>
…..
</body>
</html>
Then you just need to insert this HTML into the Body of the 'Send email' action. You can use there any placeholders and variables (as marked in bold in the full code of the Body below).
NOTE: Actionable messages could be sent only with the new 'Send email' action provided in Solution Studio Update 19.05.2022 or Modern Forms add-in 1.3.0.0.
Here is the configuration of the 'Send Email' action:
and full code of the Body:
var requestorName = [[Requestor.Title]];
return `
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/adaptivecard+json">
{
"type": "AdaptiveCard",
"originator": "76bbbdc4-29f9-4134-97af-8a9ed1b7b892",
"hideOriginalBody": false,
"body": [
{
"type": "Container",
"style": "emphasis",
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "Left",
"color": "Dark",
"text": "Vacation Approval",
"wrap": true
}
],
"padding": "Default",
"spacing": "None"
},
{
"type": "Container",
"separator": true,
"style": "accent",
"items": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"color": "Dark",
"text": "Vacation request by ` + requestorName + ` is pending for your approval",
"wrap": true
}
],
"padding": "Default",
"spacing": "None"
},
{
"type": "Container",
"separator": true,
"items": [
{
"type": "Container",
"items": [
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"horizontalAlignment": "Center",
"style": "Person",
"url": "` + [[@Variables.imageDataUri]] + `",
"size": "Small",
"altText": "` + requestorName + ` Avatar"
}
],
"width": "auto",
"padding": "None"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "` + requestorName + `",
"wrap": true
},
{
"type": "TextBlock",
"spacing": "None",
"color": "Light",
"text": "Software Engineer",
"wrap": true,
"size": "Small"
}
],
"width": "stretch",
"padding": "None"
}
],
"padding": "None"
}
],
"padding": "None"
},
{
"type": "FactSet",
"id": "105b5da3-b129-6ba3-f414-0fa914b10268",
"facts": [
{
"title": "Reason:",
"value": "` + [[Reason]] + `"
},
{
"title": "From:",
"value": "` + [[FromDate]] + `"
},
{
"title": "To:",
"value": "` + [[ToDate]] + `"
}
]
}
],
"padding": {
"top": "Default",
"bottom": "None",
"left": "Default",
"right": "Default"
},
"spacing": "None"
},
{
"type": "Container",
"id": "466ee0a4-b5ba-520e-0b5d-53841fffe66e",
"padding": "Default",
"items": [
{
"type": "ActionSet",
"actions": [
{
"type": "Action.ShowCard",
"title": "Approve",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "ApproveReason",
"placeholder": "Add a reason",
"isMultiline": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Http",
"title": "Submit",
"method": "POST",
"url": "https://prod-150.westeurope.logic.azure.com:443/workflows/72adb81c09dd4c9ebe0b28c42238efca/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=2Q_7D6-Gwi37UTR8PAo17s8Wf-RRo20Fky7ErRXxWzs",
"body": "{Reason: '{{ApproveReason.value}}', ItemID:'` + [[ID]] + `', ActionStatus: 'Approved' }",
"headers": [ { "name": "Authorization", "value": ""} ]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"padding": "None"
},
"style": "positive",
"isPrimary": true
},
{
"type": "Action.ShowCard",
"title": "Decline",
"card": {
"type": "AdaptiveCard",
"body": [
{
"type": "Input.Text",
"id": "DeclineReason",
"placeholder": "Add a reason",
"isMultiline": true
},
{
"type": "ActionSet",
"actions": [
{
"type": "Action.Http",
"title": "Submit",
"method": "POST",
"url": "https://prod-150.westeurope.logic.azure.com:443/workflows/72adb81c09dd4c9ebe0b28c42238efca/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=2Q_7D6-Gwi37UTR8PAo17s8Wf-RRo20Fky7ErRXxWzs",
"body": "{Reason: '{{DeclineReason.value}}', ItemID: '` + [[ID]] + `', ActionStatus: 'Declined'}",
"headers": [ { "name": "Authorization", "value": ""} ]
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"padding": "None"
}
}
],
"spacing": "None"
}
],
"spacing": "None"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"padding": "None"
}
</script>
</head>
<body>
Visit the <a href="https://docs.microsoft.com/outlook/actionable-messages">Outlook Dev Portal</a> to learn more about Actionable Messages.
</body>
</html>
`;
To submit a request a user needs to create an item in the SharePoint List and click the 'Save' button:
After submitting a request, a user will see the following email in Outlook:
When the card is not rendering in the email body you can install Actionable Message Debugger for Outlook and inspect the actionable message card payload.
Configuration of the Actions in the Adaptive Card with Power Automate
Now when the 'Send email' action is working and the Actionable Message is displayed, you can proceed and configure card actions and the Microsoft Power Automate.
The idea is to write a user's response with the reason of Approve/Reject back to the SharePoint list using Microsoft flow with the 'When a HTTP request is received' trigger (since this is a premium connector in Power Automate, additional costs could apply). To implement this you need to pass the following parameters to the flow: Item ID, Response text, and action type - Approve or Decline. All these parameters you can provide in the request body of the Action in Adaptive Card:
"body": "{
Reason: '{{ApproveReason.value}}',
ItemID:'` + [[ID]] + `',
ActionStatus: 'Approved'
}"
Note: Be careful to provide the same parameters with the same types in the flow trigger as in the request body.
Note: The 'When a HTTP request is received' trigger does not expect any credentials, but Outlook automatically sends out a bearer token when you submit an Actionable Message by default. This will lead to an HTTP Unauthorized error message
To avoid this, you must provide a Header with an empty Authorization token inside:
"headers": [ {
"name": "Authorization",
"value": ""
} ]
Here is an example of the 'Approve' button actions:
"actions": [
{
"type": "Action.Http",
"title": "Submit",
"method": "POST",
"url": "https://prod-150.westeurope.logic.azure.com:443/workflows/72adb81c09dd4c9ebe0b28c42238efca/triggers/manual/paths/invoke?api-version=2016-06-01&sp=%2Ftriggers%2Fmanual%2Frun&sv=1.0&sig=2Q_7D6-Gwi37UTR8PAo17s8Wf-RRo20Fky7ErRXxWzs",
"body": "{Reason: '{{ApproveReason.value}}', ItemID:'` + [[ID]] + `', ActionStatus: 'Approved' }",
"headers": [ { "name": "Authorization", "value": ""} ]
}
]
The POST URL that is used in the code above will be automatically generated after the flow is saved.
Let's have a look at the Microsoft Flow configuration:
To generate trigger's 'Request Body JSON Schema' you can use either same payload option or write JSON manually. The example above used a sample payload option using the parameters that we provided in the request body of the Action in Adaptive Card.
'Update item' action should update the 'Status' and 'Approver Comment' list fields.
To test the flow you need to submit the request that you've received in Outlook. After clicking the 'Submit' button you will see this message at the bottom of your screen:
Status and Approver Response should be now updated in the SharePoint List:
So, this small example shows how to configure an Adaptive Card and send it via skybow 'Send email' action.
Comments
0 comments
Please sign in to leave a comment.