Adaptive Cards with Microsoft Teams with Examples

What are Adaptive Cards? Adaptive Cards allows you to focus on the layout and content of what you want to share and how it is to be organized, such as using images, columns, tables, etc. It does not focus on how it is displayed on a device and is unconcerned about the browser that is being used. Adaptive Cards are platform-agnostic and can be exchanged openly between apps and services as they are authored in JSON format. The display of the content is the responsibility of the host application where it controls color, buttons, backgrounds, fonts, and specific parts of the layout. When the Adaptive Card is delivered to a specific app, such as Microsoft Teams, the JSON converts to the native UI and automatically adapts to its hosts. Once the card is displayed, it appears as another user interface.

What can Adaptive Cards be used for?  

There are several scenarios where Adaptive Cards can be leveraged to increase user engagement. You can:

1. Notify Users: by providing an interactive card that encourages the user to take additional information or continue to enact actions. Bots are a great example of this as they can provide information such as weather or travel, confirm reservations, and alleviate the load of repetitive tasks. Chat or conversation bots will engage your user through text, task modules, and interactive cards. Conversation bots are extremely flexible as they can manage basic commands to complex tasks through the use of natural language processing and AI.
2. Collect Feedback: by providing polls and surveys, you can gather feedback to obtain the data that you seek. The polls and surveys can be highly interactive with bots that provide questions and answers, engaging the user to click or provide text which will cause the next step in the conversation.
3. Interactions: by resolving single request or response cycles with results that are meaningful to multiple members of the conversation.
4. Social/Fun Bots: by leveraging bots to increase engagement in social activities, including random winner draws, retrieving fun images, games, daily jokes, etc.
5. One-to-One Chat: by enabling bots that can answer Q&A, initiate workflows in other systems, take notes, and many other tasks, workloads are greatly diversified.

Samples of Adaptive Cards for Microsoft Teams

This is exciting as these select samples and templates have been created and are offered in Microsoft Teams to show what you can create. These can be copied, edited, and tweaked to create any possible scenario. There are limitless scenarios to design and create.

Activity Update and Activity Update with Labels

Calendar Reminder and Calendar Reminder with Labels: displays a message reminding the user of a calendar appointment.

Image Gallery

Weather Compact

Weather Large

Product Video: imbed multi-media assets in Adaptive Cards.

Expense Report and Expense Report with Labels

Show Card Wizard: using Adaptive Cards, create a wizard-like user interface.

Food Order and Food Order with Validation: a sample of how a menu selection can be created with an Adaptive Card

Input Form and Input Form with Labels

Inputs and Inputs with Validation

Restaurant

Sporting Event

Stock Update

Agenda

Flight Itinerary: used in a booking application and will list information related to booking flights including a list of flights, cost, and passengers.

Flight Update: displays a list of flights, flight status, and passengers.

Flight Details

Simple Fallback

Adaptive Cards and Flow for Microsoft Teams

When an instant flow button is integrated with an Adaptive Card, collaboration and engagement in Microsoft Teams are instantaneous. There are several instances where Flow can be leveraged with an Adaptive Card, and the following examples explore these possibilities.

Candidate Feedback

Image Share: designed for sharing photos in a display-only mode. Photos are shared from posted images on SharePoint and are undergoing completion processes related to compliance, audits, and inspection.

Lead Collection: this is an input form created to collect information of potential clients that is completed by the user and submitted.

Poll Generator: this is an input form for polling and it will provide different decision paths to the recipient that are based on voting counts or poll values.

Metadata Update: This is a display Adaptive Card, but input fields can be added if one of the Wait for response actions is used to create it. This Adaptive Card enables flow makers to update and notify Teams members or channels with metadata related to files, records, or topics. This card consists of three sections: the topic header (contains the header, sub-header, and a description), fact list area (shows relevant row metadata), and column set (supports a table array of data).

Daily Weather: designed to post daily weather updates to a Teams channel in conjunction with MSN weather.

Acronym Form: this is an Adaptive Card leveraging an input form to collect data on acronym usage and is stored in the Dataverse and can be queried from anywhere as this is an ongoing project of data collection.

Images and Media: Microsoft.com

Adaptive Cards are a vehicle to design and integrate lightweight UI for all major frameworks and systems including Android, iOS, Windows, ReactNative, JavaScript, ASP.NET, and .NET WPF. Adaptive Cards provide process designers the ability to achieve consistent UI patterns whenever there is a need to display information as a part of the business automation or process.