# Variables in the Cards
We can split this into two parts. Static cards with variables as a value or dynamic generated content of card using arrays.
## **Variables as a value of element.**
Let’s take a look at the TextBlock element.
```javascript
{
"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.
```javascript
let title = “Amazon.com, Inc. (NASDAQ: AMZN)",
{
"type":"TextBlock",
"Text": title,
"size":"Medium"
},
```
But we can also use data passed in the msg object
```javascript
Msg.article.title = “Amazon.com, Inc. (NASDAQ: AMZN)",
```
And put it the same as a normal variable.
{% hint style="info" %}
Adaptive cards support JS variables, msg objects & also context variable data.
{% endhint %}
## **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
```javascript
let books = [{
"title": "Book ISBN",
"value": "Title"
},]
msg.library.books.forEach(element=>{ //iterate msg.library.book array
books.push({ //Adding elements to FactSet
"title": element.isbn,
"value": element.title
},)
})
```
Of Course then we need to append our created “book” array to the adaptive card
```javascript
{
"type": "FactSet"
"facts": books //We append array of books to this FactSet
},
```
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
{% code title="Send ACard to room JSON" %}
```javascript
[{"id":"b02aed05.5a51a","type":"tab","label":"Send Dynamic ACard to room","disabled":false,"info":""},{"id":"c93a52f4.6b21","type":"function","z":"b02aed05.5a51a","name":"Dynamic Adaptive Card","func":"let books = [\n { //Adding first element to FactSet\n \"title\": \"Book ISBN\",\n \"value\": \"Title\"\n },]\n \nlet customers = [{ //Adding first element to FactSet\n \"title\": \"Customer ID\",\n \"value\": \"Name\"\n }]\n\nmsg.library.books.forEach(element=>{\n books.push({ //Adding elements to FactSet\n \"title\": element.isbn,\n \"value\": element.title\n },)\n})\n\nmsg.library.customers.forEach(element=>{\n customers.push({ //Adding elements to FactSet\n \"title\": element.id,\n \"value\": element.name\n },)\n})\n\nmsg.roomId = \"!lpeAMqZBhqNNbcQkTq:m.tekos.co\"\n\nmsg.url = \"https://\"+env.get('BASE_URL')+'/_matrix/client/r0/rooms/' +msg.roomId+ '/send/m.room.message?access_token='+global.get('user_access_token')\nmsg.headers ={\n \"Content-type\": \"application/json\"\n}\n\n\nmsg.payload={\n \"body\": \"\",\n \"msgtype\": \"m.text\",\n \"sidebar\": \"true\",\n \"adaptiveCard\": {\n \"type\": \"AdaptiveCard\",\n \"body\": [\n {\n \"type\": \"ColumnSet\",\n \"columns\": [\n {\n \"type\": \"Column\",\n \"width\": \"150px\",\n \"items\": [\n {\n \"type\": \"Image\",\n \"url\": \"https://www.crystalinks.com/LibraryofAlexandria.jpg\"\n }\n ]\n },\n {\n \"type\": \"Column\",\n \"width\": \"stretch\",\n \"items\": [\n {\n \"type\": \"TextBlock\",\n \"size\": \"Medium\",\n \"weight\": \"Bolder\",\n \"text\": \"Library of Alexandria\"\n },\n {\n \"type\": \"TextBlock\",\n \"text\": \"The Great Library of Alexandria in Alexandria, Egypt, was one of the largest and most significant libraries of the ancient world.\",\n \"wrap\": true\n }\n ]\n }\n ]\n },\n {\n \"type\": \"TextBlock\",\n \"text\": \"List of books:\",\n \"size\": \"Medium\",\n \"weight\": \"Bolder\",\n \"wrap\": true\n },\n {\n \"type\": \"FactSet\",\n \"facts\": books //We append array of books to this FactSet\n },\n {\n \"type\": \"TextBlock\",\n \"text\": \"List of customers:\",\n \"size\": \"Medium\",\n \"weight\": \"Bolder\",\n \"wrap\": true\n },\n {\n \"type\": \"FactSet\",\n \"facts\": customers //We append array of customers to this FactSet\n },\n {\n \"type\": \"TextBlock\",\n \"text\": \"The content is not random at all, trust us. \",\n \"wrap\": true\n }\n ],\n \"$schema\": \"http://adaptivecards.io/schemas/adaptive-card.json\",\n \"version\": \"1.3\"\n}\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":530,"y":200,"wires":[["3294527f.ad682e"]]},{"id":"69770afe.a4cc54","type":"function","z":"b02aed05.5a51a","name":"Library object","func":"msg.library = {\n \"books\": [\n {\n \"title\": \"Structure and Interpretation of Computer Programs\",\n \"authors\": [\n \"Abelson\",\n \"Sussman\"\n ],\n \"isbn\": \"9780262510875\",\n \"price\": 38.9,\n \"copies\": 2\n },\n {\n \"title\": \"The C Programming Language\",\n \"authors\": [\n \"Kernighan\",\n \"Richie\"\n ],\n \"isbn\": \"9780131103627\",\n \"price\": 33.59,\n \"copies\": 3\n },\n {\n \"title\": \"The AWK Programming Language\",\n \"authors\": [\n \"Aho\",\n \"Kernighan\",\n \"Weinberger\"\n ],\n \"isbn\": \"9780201079814\",\n \"copies\": 1\n },\n {\n \"title\": \"Compilers: Principles, Techniques, and Tools\",\n \"authors\": [\n \"Aho\",\n \"Lam\",\n \"Sethi\",\n \"Ullman\"\n ],\n \"isbn\": \"9780201100884\",\n \"price\": 23.38,\n \"copies\": 1\n }\n ],\n \"loans\": [\n {\n \"customer\": \"10001\",\n \"isbn\": \"9780262510875\",\n \"return\": \"2016-12-05\"\n },\n {\n \"customer\": \"10003\",\n \"isbn\": \"9780201100884\",\n \"return\": \"2016-10-22\"\n },\n {\n \"customer\": \"10003\",\n \"isbn\": \"9780262510875\",\n \"return\": \"2016-12-22\"\n }\n ],\n \"customers\": [\n {\n \"id\": \"10001\",\n \"name\": \"Joe Doe\",\n \"address\": {\n \"street\": \"2 Long Road\",\n \"city\": \"Winchester\",\n \"postcode\": \"SO22 5PU\"\n }\n },\n {\n \"id\": \"10002\",\n \"name\": \"Fred Bloggs\",\n \"address\": {\n \"street\": \"56 Letsby Avenue\",\n \"city\": \"Winchester\",\n \"postcode\": \"SO22 4WD\"\n }\n },\n {\n \"id\": \"10003\",\n \"name\": \"Jason Arthur\",\n \"address\": {\n \"street\": \"1 Preddy Gate\",\n \"city\": \"Southampton\",\n \"postcode\": \"SO14 0MG\"\n }\n }\n ]\n }\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":300,"y":200,"wires":[["c93a52f4.6b21"]]},{"id":"344e08a8.c2c658","type":"inject","z":"b02aed05.5a51a","name":"Inject","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":110,"y":200,"wires":[["69770afe.a4cc54"]]},{"id":"6bc47f08.6421e","type":"debug","z":"b02aed05.5a51a","name":"Post Adaptive card to room","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1020,"y":200,"wires":[]},{"id":"3294527f.ad682e","type":"http request","z":"b02aed05.5a51a","name":"Post Request","method":"POST","ret":"obj","paytoqs":"ignore","url":"","tls":"","persist":false,"proxy":"","authType":"","x":780,"y":200,"wires":[["6bc47f08.6421e"]]}]
```
{% endcode %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://tekos.gitbook.io/doc/building-apps-1/chat-surfaces/modals-adaptive-cards/variables-in-the-cards.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.