Use adaptive cards in Your Cortana Skill

Cards are interface elements that you can use to enhance the user experience in your Cortana skill. As with all cards, you can only use them when Cortana is running on a device with a display. See Determine Cortana's device type to get device information.

An adaptive card is the most versatile display card. It's customizable, and can include any combination of text, speech, images, buttons, and input fields.

Adaptive cards

Adaptive cards provide the following options.

Input controls Add input controls for text, date, number, time, toggle switch, and choice set.
Richer text Text in your card is not limited to title, subtitle, and text fixed formats. Use a variety of font sizes, formats, and colors.
A single open card exchange format Use your existing cards in a common and consistent way and extend your cards with rich controls using a common schema.

Adaptive cards use the open card exchange format. This format enables you to specify user interface content for all cards in your skill in a common and consistent way. You describe the content as a simple JSON object. The JSON content is natively displayed by the skill and automatically adapts to the look and feel of your skill.

Adaptive cards include elements, containers, actions, and inputs. A basic adaptive card includes:

  • an adaptive card root object,
  • an adaptive card body, which includes the elements of your card, and
  • actions for your adaptive card, which are typically displayed in an action bar at the bottom of your card.

Adaptive Cards Designer and Visualizer

The Adaptive Cards Designer provides an interactive card builder where you can see the resulting card JSON data.

The Adaptive Cards Visualizer shows you what the JSON data will look like onscreen.

Important

  1. The speak object of an adaptive card needs to be copied to the Message for Cortana to speak the text.
  2. The speak object text needs to be wrapped in SSML <speak> tags (if it is not already).

The sample text block provides the title text for the sample card in the Adaptive Cards Visualizer.

"type": "TextBlock",
"text": "Publish adaptive card schema",
"weight": "bolder",
"size": "medium"

Sample card

You can change the title text by updating the text block.

"type": "TextBlock",
"text": "This is a test",
"weight": "bolder",
"size": "medium"

Revised card

Create an adaptive card using .NET

  1. Install the AdaptiveCards NuGet package.
  2. Specify the elements of your card in code.
  3. Add the card to your Cortana skill as an attachment.

The following code adds an adaptive card to a Cortana skill response.

var response = context.MakeMessage();

AdaptiveCard card = new AdaptiveCard();

card.Body.Add(new AdaptiveTextBlock()
    {
        Text = "This is a test",
        Weight = TextWeight.Bolder
        Size = TextSize.Medium,
    }
);

response.Attachments.Add(card.ToAttachment());

await context.PostAsync(response);
context.Wait(MessageReceived);

More Information