Introduction to Adaptive Cards in Dynamics 365

Jordan Hohepa, 14 June 2018

Adaptive Cards are a great way to display an interactive card-like interface within applications like Outlook, Microsoft Teams, Bots and many more. The screenshot below shows a simple adaptive card which can be shown in different web chat channels and has a variety of text, an image and two buttons. These adaptive cards are very customizable and are very consistent with the channels they are in.

Each adaptive card is a simple JSON object and customizing this card is as simple and adding to the JSON. The screenshot below shows the JSON for rendering “Jordan Hohepa” and “CRM Developer” in the adaptive card above. To test out creating and customizing adaptive cards online you can visit https://adaptivecards.io/ and navigate to the ‘Visualizer’ tab.

The screenshot below shows an email I have received via Outlook which contains the adaptive card I had created above. Like the card earlier, it is fully interactive within the email itself. Although this has been a simple example, you can see how these cards could be useful. In the case of Outlook, Users won’t need to navigate away from their inbox and will be able to view and interact with the cards as they need to. To send the Adaptive Card below I used Microsofts ‘Actionable Message Card Playground Tool’ which allows you to create the card as JSON and send it to yourself for testing purposes. At the time of writing this blog the Tool can be found at https://messagecardplayground.azurewebsites.net/.

The button logic is also configurable within the JSON schema of the adaptive card. The screenshot below shows the contents of the ‘Save’ button, which has a text field element and a button element inside. The button which is labelled ‘Send’ has an Http Request action connected to it, which will POST data to a provided URL. The action can contain a Custom URL, header values and body text, which in this example would be taken from the input of the textbox by using the id set as “sendText” within two curly brackets.

The result of the above schema can be seen in the screenshot below where the Save button expands a drop down showing the textbox and the Send button.

 
The example in this blog is very simple but the functionality shown can be re-used within real life situations, whether it’s something like providing feedback directly within the email itself or booking a flight overseas. One feature recently announced was the ability to integrate payment actions within these adaptive cards. With this Users would be able to pay for things without the need to leave Outlook.