Adaptive Cards Outlook Actionable Messages Lab Notes

This lab is part of the my Electronic Forms and Alternative SharePoint App Approaches and Power Platform Custom Connectors and Office 365 Forms Options Full Day Workshop sessions.

Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange. When delivered to a specific app, the JSON is transformed into native UI that automatically adapts to its surroundings. It helps design and integrate light-weight UI for all major platforms and frameworks.  For more details, see https://adaptivecards.io/.

Outlook Actionable Messages are actions sent through email that allow users who are in Office 365 to complete form actions such as approval workflows, all directly within their Outlook (client, desktop, browser, or mobile).

The scenario we are going to go through is an approval process built using a Logic App.  Unlike Power Automate (Microsoft Flow), Logic Apps don't have a built-in approval process with actionable messages.  What they do have though is a very cost-effective licensing model where you pay $0.000032 per action (https://azure.microsoft.com/en-us/pricing/details/logic-apps/).  With the HTTP triggers in Flow requiring the premium licensing (https://flow.microsoft.com/en-us/pricing/) which can add up to thousands of dollars a month, I'm liking Logic Apps much more.

The other thing I quite like about Logic Apps is that we have complete control over the user experience.  The client scenario that is driving this is an engineering sign-off process where customers come into an Office 365 Extranet to sign off on design drawings.  Having the approvals come from Microsoft Flow would be confusing to external customers.  With Logic Apps we can control the email address they are sent from, and have complete control over the branding of the Actionable Message.

Enough background, let's get into the meat of the lab.  Here's the high-level steps:

1. All lab files are available in https://github.com/petercarson/adaptive-card-approval
2. We'll be designing the Actionable Message with the Designer at https://amdesigner.azurewebsites.net/
3. We'll still use Flow to trigger the process.  For the lab we'll use a manual trigger in Flow, but the real solution would be triggered off a document approval Flow in SharePoint Online.  The Flow will compose and send the Actionable Message
4. The actions in the Actionable Message will POST to a Logic Apps workflow trigger
5. Logic Apps will write the result of the approval in a SharePoint list

GitHub

The GitHub repository at https://github.com/petercarson/adaptive-card-approval has the following files in it:

Actionable Message Designer

• Navigate to https://amdesigner.azurewebsites.net/
• Choose the Blank Card
• In the folder from GitHub, there will be a file called 'adaptiveCard.json'
• Copy the JSON from the file and paste it in the JSON Payload
• This is a sample adaptive card
• To make adjustments to the card, use the top navigation and drag elements  onto the card or select the items already on the existing card
• On the left side, changes can be made to the overall card structure
• Click Preview Mode (top-right) to view how the card will look in an email
• To view the card design in your actual inbox - sign in and click send
• This will send the card designed in the designer to your inbox

Microsoft Flow

• Now that the actionable message has been designed to fit your needs, go to Microsoft Flow (https://us.flow.microsoft.com/en-us/)
• Here we will create our first workflow to get the email sent
• Go to your My Flows
• Import the 'AdaptiveCardFlow.zip' file into Flow
• Create as new when choosing import options and change outlook.com connection to your email
• Now that the flow has been imported, click on the 'Send an Email' step and change the 'To' email to the one you are signed in with
• The 'Parse JSON' step in this flow will hold the data for being able to dynamically change the content in the card
• The 'Compose' step will hold  the JSON for the adaptive card that was created from the designer. Currently it has the JSON from the 'adaptiveCard.json' file and uses the Parse JSON to populate the content that is received in the email

SharePoint

• Create a new SharePoint list with Single line of text columns for 'Reason' and 'Status'
• This SharePoint list will be used by the Logic App we will create in the next step to create a new item in the list and store the response written and the given status of approved or rejected

Logic App

• With the first workflow set up, get the 'AdaptiveCardsLogicApp.json' file and go to https://portal.azure.com/
• In the hamburger menu to the left, click 'Create a resource'
• Once on this page, using search, find 'Template deployment (deploy using custom templates)'
• Click on it. It will take you to a new page where you will create a new template by clicking the 'Create' button
• Click on 'Build your own template in the editor' and then 'Load file' - here you will import the ''AdaptiveCardsLogicApp.json' file
• Save and purchase
• Once your logic app has been created, click edit and fix the connections using the Logic Apps Designer
• Save and then copy the HTTP POST URL in the first step - 'When a HTTP request is received'
• Go back and enable the logic app

Updating the Flow

• Go back to Microsoft Flow and click on the Compose step
• In the JSON for the adaptive card, paste the HTTP POST URL in the url for the two submit buttons
• Save and then run the flow

Running the App

• Go back to Flow and Test the Flow
• Enter manual values in the trigger values and start the Flow
• Check your email for the Actionable Message
• Approve or Reject it
• Check the SharePoint list for the result, and the Logic App history for status of the workflow