Page Comparison

The purpose of this tutorial is to guide you through how to design Adaptive cards and perform data binding in the adaptive card. The features provided for the Adaptive card in WFS are discussed

in the previous article here.

Add an Adaptive Card

1. Right-click on desired package folder and navigate to New User Interface → Adaptive Cards.

   Image Modified

2. Now, the Adaptive card designer will be loaded with the default template.

1. Image Added

Add Primitive Types to Adaptive Card

Adaptive card designer allows developers to add primitive type properties into the property panel.

1. Right click on

1. Custom Properties → Add New Property.

2. Provide the Name of the Property and choose Type from the list. Click Add button to add the Property.
   

   Image Modified

3. Once the Type is added, it will be included in the Custom Properties section.
   

   Image Modified

Add Rbac Components to Adaptive Card

The adaptive card designer allows for designing adaptive cards with EmpowerID Rbac objects. Please follow the instructions below to add Rbac components to an adaptive card.

1. Right click on

1. Custom Properties →Add New Property.

2. Input the Name of Property and choose Type from the Rbac Components list. Click Add button to add the Property.

   Image Modified

3. Once the Type is added, it will be included in the Property list Treeview.
   

   Image Modified

Add Custom Object Properties to Adaptive Card

The adaptive card designer allows for designing adaptive cards with a custom object. Please follow the instructions below to add custom object components to an adaptive card.

1. Right click on

1. Custom Properties → Add New Property.

2. Input the Name of Property and click the Browse Components tab.

3. Browse to locate the object, select it and click Add button to add the DLL.
   

   Image Modified

4. Once the DLL is added, the classes will be included in the Property list Treeview.
   

   Image Modified

Data Binding in Adaptive Card

Templating enables the separation of data from the layout in your Adaptive Card. The template language is the syntax used to author a template.    

• Binding expressions can be placed just about anywhere that static content can be.

• The binding syntax

• for data properties is ${

• DataPropery}. E.g.,

•  ${

• MyProperty}.

  • Use Dot-notation to access sub-objects of an object hierarchy. E.g., ${

• • MyParent.

• • MyChild}

• The binding syntax for custom properties is #CustomProperty~. E.g., #MyProperty~.

  • Use Dot-notation to access sub-objects of an object hierarchy. E.g., #MyParent.MyChild~

To use the above binding expressions, we can copy the required field from Property Panel and paste it into the Adaptive Card Editor. Follow the instructions below to use the binding expressions.

1. Right-click on a binding field from the Property panel and click on Copy.
   

   Image Modified

2. Paste the expression into the Adaptive Card editor where you want to use the binding.
   

   Image Modified

1. Image Added

   Insert excerpt
   IL:External Stylesheet IL:External Stylesheet nopanel true