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.
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
Msg.article.title = “Amazon.com, Inc. (NASDAQ:AMZN)",
And put it the same as a normal variable.
Adaptive cards support JS variables, msg objects&also context variable data.
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
let books = [{ "title":"Book ISBN","value":"Title" },]msg.library.books.forEach(element=>{ //iterate msg.library.book arraybooks.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
{"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
Send ACard to room JSON
[{"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"]]}]
