{tocify} $title={Table of Contents}
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
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.