How to create and use Adaptive Cards

Adaptive Cards are a platform-agnostic specification for defining and rendering rich interactive content within various applications and chat channels, such as Teams or Slack. They are primarily used for display purposes in bot messages, notifications, emails, and other platforms where interactivity is desired. The primary idea is to allow developers to create a single card definition that can be rendered natively and consistently across multiple platforms. In this article, you will learn how to create and use Adaptive Cards with the Adaptive Cards Designer and programmatically with the Adaptive Cards SDK.

Author
Recent Posts

Graham Beer

Graham is an experienced system engineer with a passion for PowerShell and automation. You can follow his blog or reach him on Twitter at @GKBeer.

How to use Adaptive Cards

Adaptive Cards are extremely flexible, allowing you to create a variety of UI elements, including buttons, text boxes, lists, images, dashboards, and forms.

Some ways to use Adaptive Cards include the following:

Notify and alert users: Provide users with timely and relevant information about important events or updates.
Guide and instruct users: Provide users with step-by-step instructions or guidance on how to complete tasks.
Collect user input: Collect user feedback or preferences in a variety of ways, such as through surveys, polls, or forms.
Display data consistently: Present data in a consistent and easy-to-understand format across all devices and platforms.
Create interactive experiences: Build rich and engaging user interfaces that allow users to interact with data and content in new and meaningful ways.

Here are examples of applications in which you can use Adaptive Cards:

Microsoft Teams uses Adaptive Cards to display rich notifications and messages.
Power Automate uses Adaptive Cards to create interactive forms and workflows.
GitHub uses Adaptive Cards to display issue details and allow users to take actions, such as assigning issues or adding comments.Shopify uses Adaptive Cards to send order notifications and allow customers to track their orders.

How to create an Adaptive Card

Defined in JSON, Adaptive Cards are easy to create. You can use either the Adaptive Card Designer or the Adaptive Cards SDK.

Adaptive Card Designer

The Adaptive Card Designer is a web-based tool that allows you to create Adaptive Cards visually. You can then drag and drop elements onto the canvas to create your card.

Once you are finished creating your card, click Export to download the JSON code for the card. You can then use this code in your application to display the card.

You can navigate over to the Adaptive Card Designer from the link https://adaptivecards.io/designer/. The following screen is displayed:

Adaptive Card Designer main screen

On this screen, you can select the host app:

Adaptive Card Designer select host app

You can also create a new blank template or choose one of the examples provided.

The Card elements menu on the left provides the skeleton code for various components, such as inputs, textboxes, and tables. This can help you design your card more easily.

The designer displays your card as you develop, providing a visual aid for how it will look. The Card Payload Editor at the bottom of the screen contains the JSON code, which you can edit. The Adaptive Card Designer is a great starting point for creating Adaptive Cards.

Adaptive Cards SDK

The Adaptive Cards SDK is a library that allows you to create Adaptive Cards programmatically. The SDK is available for a variety of programming languages, including C#, Go, Java, JavaScript, and Python.

To use the Adaptive Cards SDK, you will need to install the SDK for your chosen programming language. Once you have installed the SDK, you can start creating Adaptive Cards by following the documentation for the SDK.

Once you have created an Adaptive Card, you can display it in your application by using the SDK to render the card. The Adaptive Card SDK converts your code to JSON, a lightweight data format that can easily be sent over the network. This lets you create Adaptive Cards in your app and send them to other apps and services.
Here is a simple example of the Adaptive Card SDK with Python:

import adaptivecards
# Create an Adaptive Card object
card = adaptivecards.AdaptiveCard()

# Add elements to the card
card.add_element(adaptivecards.TextBlock("This is a sample Adaptive Card."))
card.add_element(adaptivecards.Button("Click me!", "https://www.microsoft.com"))

# Serialize the Adaptive Card to JSON
json_string = adaptivecards.serialize(card)
# Print the JSON string
print(json_string)

This produces the following JSON template:

{
  "type": "AdaptiveCard",
  "version": "1.3",
  "body": [
    {
      "type": "TextBlock",
      "text": "This is a sample Adaptive Card."
    },
    {
      "type": "Button",
      "title": "Click me!",
      "action": {
        "type": "OpenUrl",
        "url": "https://www.microsoft.com"
      }
    }
  ]
}

The Adaptive Card SDK will serialize your code to JSON for transport over the wire. This means that you can create Adaptive Cards in your application using the SDK, and the SDK will convert them to a JSON format that can be sent to another application or service.

The JSON format is a lightweight and efficient way to represent data, and it is widely supported by a variety of programming languages and platforms. This makes it ideal for transporting Adaptive Cards over the wire.

Best practices

Here are some tips for creating effective Adaptive Cards recommended by Microsoft:

Subscribe to 4sysops newsletter!

Keep your cards concise and to the point.
Use clear and concise language.
Use high-quality images and videos.
Make sure your cards are accessible to all users, including those with disabilities.
Test your cards on different devices and platforms.

Adaptive Cards are a valuable resource for any developer who wants to create more engaging and interactive experiences for their users.