Understanding Microsoft Adaptive Cards

Read about the many ways Adaptive Cards can be used and how to make them.

Overview: What Are Adaptive Cards?

Adaptive Cards are an interactive method of displaying information to the audience that can be created on Microsoft’s dedicated Adaptive Cards website. Communicating in the form of rich text and graphics, they also allow input controls and buttons for gathering feedback from users who view the card. These actionable blocks of UI can be added to conversations or announcements on a host platform by creating an automated messaging bot extension.

Business users switch devices and applications frequently to perform their everyday duties. Adaptive Cards increase user engagement by inserting the actionable content directly into the apps used every day. This allows users to interact with the information in a uniform and consistent manner across a range of different applications. Adaptive Cards are built once and deployed everywhere enabling card designers to enhance the overall user experience while also cherishing the freedom to reach a broader audience with much less effort.

Adaptive Cards are used across various Microsoft products. They can be used to direct content to members in Microsoft Teams channels or chats that will look consistent with the app’s UI. Same cards when used to send emails via Outlook will look different and feel inherent to the Outlook interface. Think of these as small messaging units or information carriers that will adapt to the interface of the messaging client they are sent to. Users can post adaptive cards in their business applications to engage with customers or other users. Developers can use adaptive cards to automate portions of everyday business processes and deliver dynamic information in the form of chats, emails as well as system notifications.

Complimentary Consultation

Learn more about the benefits of Microsoft for your business Book Consultation

Before Adaptive Cards, applications displayed fonts, colors, buttons, shapes, etc. that were specific to the platform hosting them. With the arrival of adaptive cards, users now see information that feels familiar regardless of the platform they operate on. Because the interface is inherited directly from the host, adaptive cards appear native to the application displaying them as if they are a part of the host framework itself.

This cross-platform solution was developed to standardize information rendering. Constructed using JSON (JavaScript Object Notation) the card content adapts to the native UI of the framework when hosted in a specific application. Developing these cards is governed by a universal set of principles that allow creating a lightweight, self-contained UI that follows a specific schema.

Standard schema allows the designer to focus on the structure and organization of the information that will be displayed on the card and not worry about the environment it will be displayed in. The host displaying the card controls the look and feel of the card, which eliminates the need for complex customizations required to integrate the functionality with different technologies. Such flexible nature of adaptive cards allows them to be effectively used in Outlook, Microsoft Teams, Windows Timeline, WebEx, Cortana, and other custom-built apps.

Where Can I Use Adaptive Cards?

When a new lead is generated in the system, post an adaptive card in the Microsoft Teams Sales channel. When businesses want their sales team to be on top of the incoming inquiries and track the leads centrally through a sales channel. An automated messaging bot can be created using Power Automate that will post an adaptive card in the MS Teams channel whenever a new lead is generated in the system. The adaptive card schema will be created and loaded directly in the MS Teams connector for Power Automate.

The workflow populates the card elements with dynamic information about the record and posts it to the specific sales channel for the organization. This guarantees that the sales team is always aware of incoming new leads and can take immediate action. It thus provides a way to centralize record logging and related communications all together in one place.

When assigning a record to a user, post an adaptive card in the Microsoft Teams chat. For example, a company requires its sales team to exercise a quick response method where they only have a few hours to contact a newly generated lead before it gets escalated to the sales manager. To simplify this and make life easier for the salesperson, a Power Automate developer builds a workflow that triggers whenever a lead is assigned to the sales user.

The developer then creates an adaptive card schema and loads it directly into the MS Teams connector for Power Automate. The Power Automate flow will then populate the card elements with dynamic information about the record and post an adaptive card in the MS Teams chat for individual users whenever a record is assigned to them.

Further potential scenarios for the use of adaptive cards include:

• When an account is converted to a customer from a prospect, send an adaptive card in the email to the primary contact for the account and invite them to the service portal
• When a company generates an opportunity with the prospect account the account owner changes the relationship of the account from prospect to customer
• A Power Automate Flow can be configured to send an email to the primary contact associated with the customer’s account that will invite the contact to the service portal by posting an adaptive card in the contact’s mailbox
• After creating the adaptive card schema, it will be loaded in the MS Outlook connector for Power Automate. The workflow will then populate the adaptive card elements with dynamic information about the invitation like redeem code, portal URL, etc. and send it to the primary contact via email
• When a service case is closed, send an adaptive card to the Project Manager notifying them about the case closure and displaying important case details like the resolution that was provided against a specific problem
• When an employee of the organization submits an expense report, send an adaptive card to the manager asking for approval on the expense report. The manager can act directly on the adaptive card and choose to approve or disapprove the expense without having to log in to the expense management system

Utilization and Benefits

Let’s look at some of the advantages that adaptive cards provide creators and consumers. These advantages make them an excellent carrier for transferring information between different services.

• Platform Independent, Affordable, Easy, and Safe to implement – Can be integrated with applications and devices on all major platforms & frameworks like Windows, Web, iOS, and Android. Easy to create and embed in existing applications and services. No additional development is needed. The card payload delivers content safely on the host framework without the need for any scripting
• Rich and Expressive Content – Highly customizable and capable of offering various combinations of text, inputs, buttons, images, as well as media
• Auto-styled, reusable & open-source – The schema is defined once and then ported to a variety of host platforms. On its delivery to a specific host, the schema automatically adapts to the native UI of the host framework. Having a single format that works everywhere promotes reusability and minimizes the time and cost involved in the development process. The Adaptive Cards model is governed by a common set of guidelines and the library is openly shared with everyone. Such an ecosystem provides better tools for everyone to share that eliminates the need for creating custom tools
• Standard schema and consistent user experience – No code is involved in adaptive cards, only a simple declarative layout. The creator only declares what is needed and where it is needed in the card structure. The service that presents the card controls the user experience. A single schema works for a range of different applications. Developers can build and consistently deliver their UI across different areas of the business without having to create dedicated schemas for individual processes and automations. Eliminating the need to innovate, design, and document new cards every time allows developers to target more important and business-critical tasks

Further examples of adaptive cards:

What’s Next with Adaptive Cards

Adaptive cards are being used in various Microsoft products to display information in a clean and concise form. As more and more host applications begin to support adaptive cards, they will be more utilized in the daily activities of the business environment. Elements such as text, input, buttons, and images provide the right combination for the infinite innovation possibilities of adaptive cards. With features like opening an external link, submitting feedback, showing other available cards, and others on the way Adaptive cards facilitate the creation of intelligent and responsive notifications and alerts.

Try it Yourself!

If you are thinking you cannot use adaptive cards because you are not a developer, think again. Build your adaptive cards using the interactive card designer. Add text and images, include media, organize card contents within columns, add actions, collect user inputs, and much more.