Data Binding & Adding Objects in an Adaptive Card

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

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.

     

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

     

     

Add Primitive Types to Adaptive Card

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

  1. Right click on 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.

     

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

     

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 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.

     

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

     

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 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.

     

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

     

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.

     

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