In the last blog we saw how to use actionable messages with adaptive cards to send an interactive email text box,
Now these actionable messages will work perfectly in your own mail box but in-order to make these actionable messages work in other outlook mail boxes within your organization or even to external users you need to authenticate your self as a valid actionable message provider. You need to validate the originators (Sender of the actionable) email with Microsoft.
If this is not done and the originators ID (Provider Id) is not added to your actionable message the message will show up as blank in the outlook client.
So in this blog lets see how get a Provider Id and how you can make an actionable message work in other outlook mail boxes.
Step 1 : Once you have configured your adaptive card with the actionable message go to the –> Actionable Email Developer Dashboard using the link [https://outlook.office.com/connectors/oam/publish].
Step 2 : Click on New Provider
Add a name, copy the ID from the Provider Id follow the instructions given in the image below.
Scope of the submission
In this blog I will be only covering the first two options from the scope.
I would recommend not using Global Scope as Actionable message only work with outlook and certain versions of it, also email policies of users outside your organizations might also block these actionable messages and they will get a blank email, there is no certain way to determine if users outside your organizations are getting the messages correctly so hence I would recommend using this only within the organization.
Test Users
This is auto -approved and you get the approval configured within 30 mins to 1 hour so you can use this scope if you want to send an actionable message to a single user only other than your self.
To configure select test user and follow the screenshot below.
Organization
This will enable the actionable message for the entire organization, once you send this all the Global admins will get approval emails to approve your request, any one of them can approve the request, it takes 15-24 hours to get configured after approval.
Emails received by Global admins
Once your requests are approved copy the provider Id (Originator) and paste it in your adaptive card payload.
This will resolve the issue and the adaptive card will start appearing in the outlook clients.
Ever got emails where you can actually do stuff without opening a different app? That’s Outlook’s actionable messages for you.
They let you take actions right from your email. You can say ‘yes’ to things, give quick answers, and change infoāall from the email itself.
No need to jump between different apps. You can use these messages for lots of things, like saying ‘OK’ to tasks, answering questions, and more. They even look nice with pictures and buttons.
In this blog I will show you how you can combine Actionable Messages with Adaptive Cards to send an outlook message with a free text input box.
This is an adaptive card which is sent to a user after a meeting let’s see this can be done.
Explanation of the implementation: We will be making an outlook actionable message adaptive card and using two power automate flows, One will be a sender flow to send this adaptive card to the desired users via email and other flow will be an HTTP request flow will will be a receiver flow which will receive and process the message submitted by the users via this adaptive cards.
Lets first begin with Making an Adaptive Card.
We would require two adaptive cards
The first one will be the adaptive card which has the Text Box – This will be used in our sender flow
Shown in the image above
Second one will be the response adaptive card which will be sent after the user hits submit. – This will be used in our receiver flow
Step 2: Select the host app as Outlook Actionable Message and the target version should be 1.0 (This adaptive card only works best with target version 1.0)
Now our adaptive card setup is ready lets add components to this adaptive card.
Adding the below components to the adaptive card
TextBlock : Add a text block and put the title you want to display as shown in the image below.
Input.Text : Add a input text control which will be a multi line of text box in which the users will submit their inputs, adding an ID to this input element is important as we will be using this ID to pass the value in this text box to our receiver flow
Action.Http (Submit Button): Since this is an actionable message we need to add add a Http action which will send the entered data to a request URL once the user hits the submit button. ( You will get the Add an action option once you have selected the whole card & when the host app is outlook actionable messages )
Add the title to the button, select the method name as POST, add the HTTP request URL which you will get from the receiver flow shown later in this blog, and add the message body as show in the image below
{ “responseByUser”:”{{meetingnotes.value}}” (meetingnotes.value –> meetingnotes is the ID of the Input.Text element) }
Add a header Authorization and keep the value empty, Add a Content-Type header and keep the value application/json
Now that the elements of the adaptive cards are set copy the card payload and keep it ready to be used in the sender flow.
(Below is the payload I used you can also copy this payload and put it in your editor do change the originator and your request url)
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"originator": "[HOW TO GET THIS IS EXPLAINED IN THE LINKED BLOG BELOW]",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Please add your meeting feedback below ",
"wrap": true
},
{
"type": "Input.Text",
"placeholder": "please enter your meeting notes in this box",
"isMultiline": true,
"maxLength": 1000,
"id": "meetingnotes"
}
],
"actions": [
{
"type": "Action.Http",
"title": "Submit",
"id": "Submit",
"method": "POST",
"url": "[URL OF YOUR SENDER FLOW OR RECIEVING URL]",
"body": "{\n\"responseByUser\":\"{{meetingnotes.value}}\"\n}",
"headers": [
{
"name": "Authorization",
"value": ""
},
{
"name": "Content-Type",
"value": "application/json"
}
]
}
]
}
Sender Flow
For this example I am using a Manually triggered flow, paste the payload of the adaptive in a compose.
Add the output of this compose to the body of send an email (V2) action, you need to add this in the code view of the email action and using the script below.
The sender flow is ready to send the actionable messages to users.
Receiver Flow
The trigger of the receiver flow is When a HTTP request is received.
The HTTP POST URL should be added in the URL section of the Action.Http (Submit Button)
Add the below JSON Schema to the HTTP request trigger.
{
"responseByUser":"text"
}
Make sure the objects of the payload are same in the Action.Http (Submit Button) request body and the HTTP request schema, in simpler words you are passing an object by the name “responseByUser” through the adaptive card request so your flow flow schema should also have an object by the same name “responseByUser“
In the response adaptive card payload use the below adaptive card payload. (You can directly use the below payload) or create a simple response adaptive card of your own.
{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"body": [
{
"type": "TextBlock",
"text": "Your response has being registered !",
"wrap": true,
"id": "titlebox"
},
{
"type": "TextBlock",
"text": "Thank you, your notes will be updates on the case and appointment automatically.",
"wrap": true,
"id": "messagebox"
}
]
}
The response should have a status code 200 and the header should be CARD-UPDATE-IN-BODY set to true.
Lastly the body of the response should be the response adaptive card
This actionable message will work great within your own mail box, but when you sent it to other users it might just send blank emails, to avoid this from happening you need to authenticate the senders emails, it is recommended to do this step for smooth operations. Follow the next blog to for the final steps.
Power Platform Puzzles 