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.
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.
Adaptive Cards are platform-agnostic snippets of UI, authored in JSON, that apps and services can openly exchange. When delivered to a specific app, the JSON is transformed into native UI that automatically adapts to its surroundings. It helps design and integrate light-weight UI for all major platforms and frameworks. In this module, you'll learn how to create engaging messages with Adaptive Cards to create Outlook Actionable Messages and conversations in Microsoft Teams.
Demonstrate the business value and product capabilities of Microsoft Power Platform, such as Power Apps, data connections with Dataverse, and Power Automate.