Data Binding
Bind data from your Looply Workflow directly into your Adaptive Card.
Last updated
Bind data from your Looply Workflow directly into your Adaptive Card.
Last updated
The data binding feature from the Adaptive Card designer allows the binding of any JSON attribute from the to an element on an Adaptive Card.
When adding an Adaptive Card to a Workflow, if you click "Create new card" this will create a new Card but will also link the Workflow Schema to the Adaptive Card allowing you to bind for example the result from an API request to a on your Adaptive Card. Find a more in-depth explanation from the or check out .
Whilst in the Adaptive Card Designer you will notice a , this holds the data that can be bound to the Adaptive Card you are creating. Data can be added to this code editor or it can be pulled from the workflow schema where this card is bound. Below is a sample that takes data from a Workflow Schema:
Note: Manually typing in data bindings must follow the above syntax.
Data binding can be done on a wide variety of properties ranging from the Text property of a to the choices of an .
Binding data from the is easy. You can do it via any of these 3 ways:
When an element on the has been selected, some elements like the will show you a "Bind..." button. Clicking on this will pull up a dropdown menu showing you all the attributes you can bind to the . This dropdown is generated via the data supplied in the .
When an element on the has been selected, the should have all the customisation options for the respective field. Notice that certain fields have a button displaying "...", clicking on this will pull up a dropdown menu showing you all the attributes you can bind to this particular property. Like option 1, this dropdown is generated via the data supplied in the .
You can manually type in the binding directly into the .
Note: Please note that if a binding is incorrectly typed directly into the , the adaptive card canvas may not appear.
Binding will appear in the as shown below:
Data in our may contain arrays of strings or arrays of JSON objects. Binding these structures to our Adaptive Card is a little different from the above which follows a more one-to-one approach.
Note: Manually typing data bindings from an array is highly advised. Using the will result in incorrect mappings for array items.
If the data within the looked as follows:
Displaying only the 3rd title from our util_data array is straightforward and replicates process 3 from .
If we want to display a for each of the title values in our util_data array we need to manually type this binding into our against our . A "data context" has to be established on our - this means that the is only observing data within a certain attribute within our . Due to a data context being applied to the , our binding will appear shorter than the above approach. Below is how we can display 8 TextBlocks, where each element points to a different title in our util_data array.
Note: Binding data using a "data context" will stop the Adaptive Card Designer from immediately showing the final rendered card. You will have to use the Test Card action to see the final result - then: View>Test Card.
You can bind data directly to the choices attribute of an . This is particularly useful if the choices are dynamic and could change.
Note: This works due to the structure of util_data replicating that of an choices attribute array. Always test your card using the Test Card action in the View menu of the to check the binding has worked.