These adaptive cards are a way of exchanging content in a common format across multiple platforms and devices. The benefit of an adaptive card is that while it is defined with a JSON schema, it gets transformed by the host application into native UI using the adaptive card API thus allowing for a unified UI experience across platforms.
What are Adaptive Cards?
Adaptive Cards are platform-agnostic snippets of UI, encoded in JSON, that apps and services can openly exchange. When delivered to a specific application, the JSON is transformed into native UI that automatically adapts to its surroundings. It helps developers design card-based UI that can be rendered beautifully inside your application, without adding any kind of third party UI libraries.
Implementing Adaptive Cards in Azure
In the Azure ecosystem, adaptive cards are particularly useful as part of the Azure Bot Service, which is a key component of the AI-102 exam. They help in gathering user input or displaying a set of options to the user in a rich, interactive format.
Here is a basic example of how the JSON for an adaptive card might look:
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"text": "Hello! This is an Adaptive Card!"
}
]
}
The “body” array can contain multiple items or blocks. This example uses a single block of type “TextBlock”.
The above adaptive card will render a simple card with text saying, “Hello! This is an Adaptive Card!” across most platforms and devices without any extra UI code.
Adaptive Cards with Azure Bot Service
One common use case for Adaptive Cards is within the Azure Bot Service. For instance, during a conversation in a chatbot, you might use an adaptive card to display a detailed product description with an image, title, description and various action buttons.
A sample of JSON for Adaptive Card used in Azure Bot Service might look like this:
{
"type": "AdaptiveCard",
"version": "1.0",
"body": [
{
"type": "TextBlock",
"size": "Large",
"weight": "Bolder",
"text": "Product Details"
},
{
"type": "Image",
"url": "http://producturl.com/image.jpg",
"size": "Medium"
},
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "Product Title"
},
{
"type": "TextBlock",
"text": "Product Description"
}
],
"actions": [
{
"type": "Action.OpenUrl",
"title": "Buy Now",
"url": "http://producturl.com/buy"
}
]
}
In this example, the card contains multiple elements: a title, an image, a subtitle, some text detail and an action button.
Taken together, this card provides an interactive experience for the bot user, all within the chat interface.
Conclusion
To summarize, Adaptive Cards are an effective way to create platform-agnostic, interactive and engaging UI within your Azure AI solutions. Whether it’s part of a bot chat interaction or another scenario, Adaptive Cards provide a flexible and powerful solution to present and gather information in a structured manner. In addition, understanding Adaptive Cards is crucial in preparing for the AI-102 Designing and Implementing a Microsoft Azure AI Solution exam.
Practice Test
True or False: Adaptive Cards are a way to present information in a uniform way across various platforms.
- True
- False
Answer: True
Explanation: Adaptive Cards are an open-source tool for creating platform-agnostic and customizable UI that automatically adapts itself for rendering on different devices and platforms.
What are Adaptive Cards used for in Microsoft Azure?
- A. Data Visualization
- B. Management of Databases
- C. User Interface Presentation
- D. Statistical Analysis
Answer: C. User Interface Presentation
Explanation: Adaptive Cards are used to create customizable and card-based UI that adapts to any platform.
True or False: Adaptive Cards are not customizable and cannot be used to present dynamic content.
- True
- False
Answer: False
Explanation: Adaptive Cards are highly customizable and can be used to effectively present dynamic content in a consistent manner across different platforms.
Multiple select: Which of the following are features of Adaptive Cards?
- A. Consistent UI presentation across platforms
- B. Open Source
- C. Limited to text-based content
- D. Can be integrated into various apps and services
Answer: A. Consistent UI presentation across platforms, B. Open Source, D. Can be integrated into various apps and services
Explanation: Adaptive Cards offer consistent UI, they are open source, and they can be integrated into various apps and services.
Which language is used to define the schema for Adaptive Cards?
- A. Python
- B. JavaScript
- C. JSON
- D. C++
Answer: C. JSON
Explanation: JSON is the language used to define the schema for Adaptive Cards, allowing for a standardized format.
True or False: Adaptive Cards can be used to deliver interactive content.
- True
- False
Answer: True
Explanation: Adaptive Cards can be used to deliver interactive content, including actions like button presses or inputs.
Multiple select: In which of the following can Adaptive Cards be used?
- A. Microsoft Teams
- B. Outlook Actionable Messages
- C. Cortana Skills
- D. All of the above
Answer: D. All of the above
Explanation: Adaptive Cards can be used within Microsoft Teams, Outlook Actionable Messages and Cortana Skills.
True or False: Adaptive Cards don’t support responsiveness across different screen sizes.
- True
- False
Answer: False
Explanation: Adaptive Cards are designed to adapt and provide an optimized look and feel on different devices and screen sizes.
Which version of Adaptive Cards introduces support for media playback?
- A. Version 0
- B. Version 1
- C. Version 2
- D. Version 3
Answer: C. Version 2
Explanation: Version 2 of Adaptive Cards introduces support for media playback, enhancing the functionality and versatility of the cards.
True or False: Adaptive cards render exactly the same on every platform.
- True
- False
Answer: False
Explanation: While Adaptive cards strive to provide a consistent UI across platforms, the final rendering is controlled by the host application and may have slight differences.
What are the structural elements of an Adaptive Card?
- A. Elements and Actions
- B. Cards and Elements
- C. Actions and Cards
- D. Templates and Data
Answer: A. Elements and Actions
Explanation: An Adaptive Card is composed of two key concepts: Elements (which are visual building-blocks) and Actions (which are triggers to execute a task).
True or False: Adaptive Cards can only be written in English language.
- True
- False
Answer: False
Explanation: Adaptive Cards can be created and viewed in any language. Their language independence makes them versatile for global use.
Can third-party applications host Adaptive Cards?
- True
- False
Answer: True
Explanation: The Adaptive Card framework is open-source and platform-agnostic, which means other applications, even those not from Microsoft, can host Adaptive Cards.
Which of the following is NOT an element type in Adaptive cards?
- A. TextBlock
- B. Image
- C. Video
- D. FactSet
Answer: C. Video
Explanation: The Video is not an element type in Adaptive cards. However, you can use Media element type to include video in the cards.
True or False: Adaptive Cards allows developers to embed both input fields and action buttons.
- True
- False
Answer: True
Explanation: Adaptive Cards provide a rich set of input controls and actions, allowing developers to create interactive and dynamic card-based UIs.
Interview Questions
What are Adaptive Cards in Azure?
Adaptive Cards are a cross-platform card-like UI framework for developers and designers to exchange card content in a common and consistent way that can be highly customized.
What is the usefulness of Adaptive Cards in AI?
Adaptive cards can be used to create rich, interactive, and flexible card surfaces in AI applications. They can host custom content and allow for advanced interactions, making AI responses more engaging and useful.
Can Adaptive Cards be used in bots?
Yes, Adaptive Cards offer a way to present data in a rich and interactive way in bots. They can be used in bot frameworks to create more responsive and visually appealing bots.
What are the main parts of an Adaptive Card?
The main parts of an Adaptive Card are the body, actions, and speak. The body contains the content of the card, actions are what the user can do, and speak is used for speech and text-to-speech experiences.
What is the schema of an Adaptive Card?
The schema of an Adaptive Card defines how the content is laid out and how it behaves. It contains properties that specify the type, version and body of the card.
Which platforms support Adaptive Cards?
A variety of platforms support Adaptive Cards including Windows, Android, iOS, JavaScript, .NET and many more.
What JSON payload is in an Adaptive Card?
JSON payload in an Adaptive Card defines the schema of the card. It specifies the card’s type, version, body content, actions, and speak properties.
How can you modify the appearance of an Adaptive Card?
Appearance of an Adaptive Card can be modified by adjusting the properties in the JSON payload, such as colors, font sizes, and spacing.
Can Adaptive Cards be authored directly in the Bot Framework?
No, Adaptive Cards need to be authored separately and then included in the bot’s response as an attachment.
Can Adaptive Cards support rich media like videos and GIFs?
Yes, Adaptive Cards can support rich media like images, videos, GIFs, and even custom HTML.
What is the ‘Action’ property of an Adaptive Card used for?
The ‘Action’ property allows for interactive elements to be added to the Adaptive Card such as buttons which can trigger events or actions when clicked.
Can one include inputs in an Adaptive Card?
Yes, you can include all sorts of input in an Adaptive Card like Text, date, time, number, choice set and toggle.
What is the role of Host Config in Adaptive Cards?
The host config in Adaptive Cards is used to customize the rendering of cards to match the host’s look and feel.
Are Adaptive Cards supported by Teams, Outlook and Cortana?
Yes, Adaptive Cards are supported by several communication platforms including Teams, Outlook, and Cortana.
How are Adaptive Cards integrated within an AI solution?
Adaptive Cards can be integrated within an AI solution by using the Adaptive Card SDKs to render the cards, and then these cards can be displayed in any application or on any platform.
extutorials.com