Getting Started

An Adaptive Card is a JSON-serialized card object model.

Adaptive Card structure

The basic structure of a card is as follows:

• AdaptiveCard - The root object describes the AdaptiveCard itself, including its element makeup, its actions, how it should be spoken, and the schema version required to render it.
• body - The body of the card is made up of building-blocks known as elements. Elements can be composed in nearly infinite arrangements to create many types of cards.
• actions - Many cards have a set of actions a user may take on it. This property describes those actions which typically get rendered in an "action bar" at the bottom.

Example Card

This sample card which includes a single line of text followed by an image.

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "text": "Here is a ninja cat"
        },
        {
            "type": "Image",
            "url": "http://adaptivecards.io/content/cats/1.png"
        }
    ]
}

Type property

Every element has a type property which identifies what kind of object it is. Looking at the above card, you can see we have two elements, a TextBlock and an Image.

All Adaptive Card elements stack vertically and expand to the width of their parent (think display: block in HTML). However, you can use a ColumnSet to create side-by-side columns of containers.

Adaptive Elements

The most fundamental elements are:

• TextBlock - adds a block of text with properties to control what the text looks like
• Image - adds an image with properties to control what the image looks like

Container elements

Cards can also have containers, which arrange a collection of child elements.

• Container - Defines a a collection of elements
• ColumnSet/Column - Defines a collection of columns, each column is a container
• FactSet - Container of Facts
• ImageSet - Container of Images so that UI can show appropriate photo gallery experience for a collection of images.

Input elements

Input elements allow you to ask for native UI to build simple forms:

• Input.Text - get text content from the user
• Input.Date - get a Date from the user
• Input.Time - get a Time from the user
• Input.Number - get a Number from the user
• Input.ChoiceSet - Give the user a set of choices and have them pick
• Input.Toggle - Give the user a single choice between two items and have them pick

Actions

Actions add buttons to the card. These can perform a variety of actions, like opening a URL or submitting some data.

• Action.OpenUrl - the button opens an external URL for viewing
• Action.ShowCard - Requests a sub-card to be shown to the user.
• Action.Submit - Ask for all of the input elements to be gathered up into an object which is then sent to you through some method defined by the host application.

Example Action.Submit : With Skype, an Action.Submit will send a Bot Framework bot activity back to the bot with the Value property containing an object with all of the input data on it.

For more details look at

https://adaptivecards.io

In this Article

When working Bot framework SDK to develop chatbot, we will use the Adaptive cards mostly so that we can achieve many card styles with forms and fields highly customizable - refer this site to understand more on this.

When we use Adaptive card, we may want to dynamically generate the card with more customization of fields using C#, let's see a sample adaptive card generator code fully in C# in this article.

Sample Adaptive Card in C Sharp

We have Adaptive card library in Nuget which we can use for this purpose.

Let's see the code how it looks:

    public static AdaptiveCard GenerateAdaptivePromptCard(List<Item> listOfOptions)
    {
        List<AdaptiveChoice> categoryChoices = new List<AdaptiveChoice>();
        foreach (var item in listOfOptions)
        {
            categoryChoices.Add(new AdaptiveChoice
            {
                Title = item.Label,
                Value = item.Value,
            });
        }

        var columns = new AdaptiveColumn
        {
            Separator = true,
        };
        columns.Items.Add(new AdaptiveTextBlock
        {
            Text = "text",
            Wrap = true,
            Weight = AdaptiveTextWeight.Bolder,
            Size = AdaptiveTextSize.Large,
        });
        columns.Items.Add(new AdaptiveTextBlock
        {
            Text = "reprompt message",
            Wrap = true,
            Weight = AdaptiveTextWeight.Lighter,
            Size = AdaptiveTextSize.Default,
        });

        columns.Items.Add(new AdaptiveTextBlock
        {
            Text = "text block message",
            Wrap = true,
        });
        columns.Items.Add(new AdaptiveChoiceSetInput
        {
            Id = "12432",
            Style = AdaptiveChoiceInputStyle.Compact,
            IsMultiSelect = false,
            Choices = categoryChoices,
            Value = categoryId,
        });
        columns.Items.Add(new AdaptiveTextInput
        {
            Id = "234324",
            Value = "test",
            IsRequired = true,
        });
        columns.Items.Add(new AdaptiveTextInput
        {
            Id = DescriptionLabel,
            Value = "value",
            IsMultiline = true,
            IsRequired = true,
            Height = AdaptiveHeight.Stretch,
        });

        var columnSet = new AdaptiveColumnSet();
        columnSet.Columns.Add(columns);

        var container = new AdaptiveContainer();
        container.Style = AdaptiveContainerStyle.Emphasis;
        container.Items.Add(columnSet);

        var mainCard = new AdaptiveCard(new AdaptiveSchemaVersion(1, 0));
        mainCard.Body.Add(container);

        mainCard.Actions.Add(new AdaptiveSubmitAction
        {
            Title = "sample submit action",
        });

        return mainCard;
    }

Here i have used the following classes and properties from the NuGet library to generate and customize them.

• AdaptiveChoice
• AdaptiveColumn
• AdaptiveTextBlock
• AdaptiveTextWeight
• AdaptiveTextSize
• AdaptiveChoiceInputStyle
• AdaptiveChoiceSetInput
• AdaptiveTextInput
• AdaptiveHeight
• AdaptiveColumnSet
• AdaptiveContainer
• AdaptiveContainerStyle
• AdaptiveSubmitAction
• AdaptiveSchemaVersion

Like the above code we can customize the Adaptive Card in C#.

Thanks.