Adaptive Cards offer a new way for developers to display & exchange content in a common and consistent way across different applications. It can be hosted on:
- Bot Framework Webchat
- Cortona Skills
- Outlook Actionable Messages
- Windows Timeline
- Microsoft Teams
- Windows Notifications
SDKs (.NET, JavaScript, Android, React, iOS etc) are available for authoring & rendering cards inside your own apps. Microsoft has got great documentation on this. The schema explorer has got information about all the list of available Card elements, containers & actions sets to use. Adaptive card templating features are now available in preview mode to help create, reuse & share the cards you develop & enable you to separate the data from the layout in an Adaptive card. There is also a plugin available called Adaptive Card Viewer in Visual Studio code for visualizing the card & a team app called App Studio.
Develop a card using the Adaptive Card Designer from scratch or you can start with some available samples. Card Authors describe their content as a simple JSON object with the help of the designer which could then be rendered natively inside a Host Application, automatically adapting to the look and feel of the Host.
In this article, I am going to show you how to create an Outlook actionable message using a sample (Input Form) available in Adaptive card designer. This collects information (Name, Email) from the user & stores it in a SharePoint list using two flows. There is also going to be a simple response card to be shown once the information is submitted.
For the outlook version requirements for actionable message, click on this link,
- Instant flow with the manual trigger for sending the adaptive card in an email
- Instant Flow using trigger when a request is received for sending information to SharePoint list
Actionable messages can be via email which I am focusing on in this article or by using connectors. Check here the supported scenarios via an Email.
Steps involved to create actionable message via an email:
- Creating the Adaptive card for the host application (Outlook)
- Creating the Flows
Let’s start with creating the card using the Adaptive Card designer
Adaptive Card Creation
There are going to be two adaptive cards:
- The first one is the initial form to be sent on email using the sample input form
- The second one is a response card which will be shown after the input form is submitted
First Adaptive Card
Go the designer & click on Open Sample, select Input Form as shown below
Then change the host app from the default Bot Framework Webchat to Outlook Actionable Messages. Remove the phone number Text Block [Element] & the corresponding Text.Input [Inputs] field to keep it simple. Remove the Submit action set, add the action set of type Action.Http for us to call the flow with method POST for us to interact with SharePoint
Update the following attributes of the just-added element action set:
- Rename the title of the element to Submit from Action.Http
- Add the Id submit
- Change the Style to Positive from Default
- Select the Method to POST
- Url to be set to our second FLOW (When a Http request is received) HTTP POST url later once we have it ready with us
- Add the following to the body:
- {
- "inputName":"{{myName.value}}",
- "inputEmail":"{{myEmail.value}}"
- }
- Set the HTTP Headers
- Click the Add New header, enter “Authorization” to Name and leave the Value blank. If this is not done, you will receive an HTTP 401 unauthorized message while clicking the button on the email. The HTTP request is received flow does not have any authentication - it's anonymous - so be careful with the URL and have some steps to validate on the flow so check if it's triggered from a valid source
- Add one more header, enter “Content-type” to Name and Value should be “application/json”. This is required to make the POST request from the email
The first card is ready, let's go ahead and create the second one which is the response card. This will be shown once the response is submitted
Second Adaptive Card:
This is going to be a very simple card, let's start from the scratch. Go to the designer and select New Card
- Add a Container
- Add a TextBlock with text “Your Response has been submitted successfully” on the container.
- {
- "type": "AdaptiveCard",
- "version": "1.0",
- "body": [
- {
- "type": "Container",
- "items": [
- {
- "type": "TextBlock",
- "text": "Your response has been submitted successfully",
- "id": "response text"
- }
- ]
- }
- ],
- "$schema": "http://adaptivecards.io/schemas/adaptive-card.json"
- }
Instant Flow using trigger When a Request is received
This flow is an Instant flow with trigger “When a HTTP request is received”, this is going to be called from email for submitting the input form to a SharePoint list. Create a SharePoint list with two columns for us to store the Name and Email submitted from the adaptive card on email.
Create the flow with the trigger as said above. The POST url will be generated after the flow is saved with an action. Click Generate from sample on the trigger and copy and paste the below information which would automatically generate the schema for you. If you have more advanced JSON schema, try using this tool.
- {
- "inputName": "",
- "inputEmail": ""
- }
Click Advanced options to select the method POST. Add the action create item to store the user form response to SharePoint list created above with the request body information mapped to Title (Name - inputName) & Email (inputEmail) using the dynamic content.
Add the Compose action, paste the JSON of the second adaptive card to the Inputs.
Add the Response action, a premium one with the header key CARD-UPDATE-IN-BODY and the value as true. The body parameter should be the outputs of the compose action JSON.
Maz WebPosted Jan 31, 2021, 2:59 PM
Hi -- Thank you for this. With the HTTP request trigger a premium feature, do you know of any workarounds? Thanks!
Nandha KumarPosted Sep 30, 2020, 7:55 AM
Hi Mohammed, I tried this approach. It is working fine in Outlook Office 365(App) and in Browser(Outlook). But not working in Windows mail client(office 365). Adaptive card is not getting rendered. Windows mail client does not support adaptive card or am i missing something?. Can you help me on this. Thanks!
surya sudhakarPosted May 8, 2020, 1:08 PM
An email actionable message is then sent to the appropriate person to take action Until that step, all good, no problem.Then the person receiving the email can click on the actionable message to take action. The message contains an 'approve' button that should trigger a Flow HTTP Request That's where the problem is... It never triggers the Flow and the error message shows "Target URL ... is not allowed" All Flows have been shared with all parties. Both actions have been registered on the "Actionable Email Developer Dashboard" In the JSON object the token has been placed as the value for the 'Originator' key
Anandavadivelan VijayaragavanPosted Mar 16, 2020, 2:07 AM
Hi Mohamed, great post, just what I was looking for. One thing, the adaptive card shows fine on Outlook on the web and the native client on Windows 10 laptop but does not show on the outlook mobile app. Have you seen this issue and know any fix?
Mohamed Ashiq FaleelPosted Feb 9, 2020, 9:02 AM
I've created a post, hope you find it useful. This creates a card in Teams for collecting response https://ashiqf.com/2020/02/09/collect-response-from-a-user-with-adaptive-card-in-teams-using-power-automate/
Kurtis PapplePosted Jan 30, 2020, 9:14 AM
Amazing guide, thank you very much. Is there any way for this to be done but with the first Adaptive Card to be sent in Teams, rather than as an email? Thanks very much.