Adaptive Cards

Owned by Dev Raj Gautam
Last updated: Oct 10, 2022
3 min read

EID Workflow Studio supports the design and development of adaptive cards for EmpowerID Chatbot. An adaptive card is a commonly used UI component in bot conversation. Adaptive cards are highly interactive since they support using rich text, graphics, input controls, and buttons to gather user input. One of the major advantages of using adaptive cards is the native rendering of the card; because the interface is inherited directly from the host, adaptive cards' UI/ UX appears to match with the framework it is being displayed in. General features provided in the WFS for Adaptive Cards are explained below in this doc, and you can find more information about creating adaptive cards here.

Sample Adaptive Card.

Template Editor 

An Adaptive Card is a JSON-serialized card object model. Developers can edit the JSON for the adaptive card with the template editor. The template editor uses AvalonEdit Textbox to format the template string into JSON format.

 

Data Editor

Data is a JSON-serialized card object model that can be bound to Template JSON.

 

Designer

The result of template JSON can be visualized using the Designer section. This window lets you visualize the card you edit in real-time inside the editor itself.

 

Docking Designer / Editor

We can minimize, maximize and restore the designer and editor. The splitter between the designer and the editor allows you to resize the content. The icon on the top right of the designer/editor helps dock the view to take the entire space and restore the position.

Property Panel

The Property Panel section renders the Data JSON as a collapsible and expandable tree structure for better readability. The property panel listing will iterate over each object's property and children and add them to the property panel. The Property panel has support to split the panel with the designer. Also, we can expand and collapse the panel with an expander icon on the left.

JSON Validation

Both Template and Data JSON can be validated through compile functionality. If there is any error in JSON, then it will be included in the Error window. The validation error is also shown with a red border around the editor.

Multiple Templates

We can add multiple templates in one adaptive card designer. The selected template from the combo box will be a current editing template for the designer. The following options are available on top of the designer.

  • Adding new template

     

  • Editing existing template

     

Publish

Adaptive card design can be published like other Workflow Studio activities. The published file will contain all the templates. You can find detailed instructions about publishing and deployment here in the docs Deployment Overview.

 

Proactive Bot Message

EmpowerID Chatbot

Publish BotFlow from EID Chatbot

 

Â