search

Variables in the Cards

Of course static data inside the cards can be useful, but to get the full potential we need to use some variables that come in the flow.

We can split this into two parts. Static cards with variables as a value or dynamic generated content of card using arrays.

hashtag
Variables as a value of element.

Let’s take a look at the TextBlock element. 

{
    "type":    "TextBlock",
    "text":    "Amazon.com, Inc. (NASDAQ: AMZN)",
    "size":    "Medium"
},

Instead of putting the text in the text object we can use some variables, defined in the function node or passed in the msg object

For example we can define a title variable. And put it straight in the element. 

let title = “Amazon.com, Inc. (NASDAQ: AMZN)",

{
  "type":"TextBlock",
  "Text": title,
  "size":"Medium"
},

But we can also use data passed in the msg object

And put it the same as a normal variable.

circle-info

Adaptive cards support JS variables, msg objects & also context variable data.

hashtag
Using array to display dynamic content

In some cases there will be a need to display some dynamic data depending on the payload we could receive from applications. For example items in the cart of the shopify or woocommerce. List of users from CRM portals and other similar cases.

Then we would like the elements of the adaptive card to be generated dynamically depending on the msg content. That is where Arrays can come in handy. Let’s take an object “Library” with an array of books and customer objects.

We need to iterate through the array and also we need to create another array containing adaptive card elements for example FactSet facts.

Our code to generate facts depending on length of the msg.library.books array

Of Course then we need to append our created “book” array to the adaptive card

Outcome with our dynamic card

Here you can find an example flow of what we just discussed. Import it and take a look at the code

PreviousBasic usage of CardsNextAction Buttons

Last updated

Was this helpful?