Displaying Cards inside your application
It's easy to render Adaptive Cards inside your application. We provide SDKs for the all common platforms, as well as provide a detailed specification for creating your own Adaptive Card renderer.
- Install a renderer SDK - for your target platform.
- Create a renderer instance - configured with your app's style, rules, and action event handlers.
- Render a card to native UI - automatically styled to your app.
Adaptive Cards SDKs
Create an instance of the renderer
The next step is to create an instance of an
Hook up action events
By default, the actions will render as buttons on the card, but it's up to your app to make them behave as you expect. Each SDK has the equivalent of an
OnAction event that you must handle.
- Action.OpenUrl - open the specified
- Action.Submit - take the result of the submit and send it to the source. How you send it to the source of the card is entirely up to you.
- Action.ShowCard - invokes a dialog and renders the sub-card into that dialog. Note that you only need to handle this if
ShowCardActionModeis set to
Render a card
After you acquire a card payload, simply call the renderer and pass in the card. You will to get back a native UI object made up of the card contents. Now just put this UI somewhere in your app.
There are several ways you can customize what is rendered.
A HostConfig is a shared, cross-platform configuration object that controls the basic styling and behavior of cards inside your app. It defines things like font sizes, spacing between elements, colors, number of supported actions, etc.
Native platform styling
Most UI frameworks allow you to style the rendered card by using the native UI framework styling. For example, in HTML you can specify CSS classes for the HTML, or in XAML you can pass in a custom ResourceDictionary for fine-grained control of the output.
Customize per-element rendering
Each SDK allows you to override the rendering of any element, or even add support for entirely new elements that you define. For example, you can change the
Input.Date renderer to emit your own custom control while still retaining the rest of the output of the renderer. Or you can add support for a custom
Rating element to you define.