Basic usage of Cards

The cards are sent to the chat using a simple rest api request. We can achieve that using the flow or outside services including postman.

Sending card to the room

Let’s start with something simple of just how to display a card in the specified room.

For this we will need an inject node, function node, http request node and a debug node which can come in handy while debugging our flow.

Example adaptive card workflow

Example flow JSON

[{"id":"b02aed05.5a51a","type":"tab","label":"Send ACard to room","disabled":false,"info":""},{"id":"2f914fdb.97cbc","type":"function","z":"b02aed05.5a51a","name":"Adaptive Card","func":"msg.roomId = \"!avGWZRMXzxybyGFKAh: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 \"adaptiveCard\": {\n      \"$schema\":\"http://adaptivecards.io/schemas/adaptive-card.json\",\n      \"type\":\"AdaptiveCard\",\n      \"version\":\"1.2\",\n      \"body\":[\n         {\n            \"type\":\"Container\",\n            \"items\":[\n               {\n                  \"type\":\"TextBlock\",\n                  \"text\":\"Amazon.com, Inc. (NASDAQ: AMZN)\",\n                  \"size\":\"Medium\",\n                  \"isSubtle\":true\n               },\n               {\n                  \"type\":\"TextBlock\",\n                  \"text\":\"September 19, 4:00 PM EST\",\n                  \"isSubtle\":true\n               }\n            ]\n         },\n         {\n            \"type\":\"Container\",\n            \"spacing\":\"None\",\n            \"items\":[\n               {\n                  \"type\":\"ColumnSet\",\n                  \"columns\":[\n                     {\n                        \"type\":\"Column\",\n                        \"width\":\"stretch\",\n                        \"items\":[\n                           {\n                              \"type\":\"TextBlock\",\n                              \"text\":\"75\",\n                              \"size\":\"ExtraLarge\",\n                              \"isVisible\":false\n                           },\n                           {\n                              \"type\":\"TextBlock\",\n                              \"text\":\"▼ 0.20 (0.32%)\",\n                              \"size\":\"Small\",\n                              \"color\":\"Attention\",\n                              \"spacing\":\"None\"\n                           }\n                        ]\n                     },\n                     {\n                        \"type\":\"Column\",\n                        \"width\":\"auto\",\n                        \"items\":[\n                           {\n                              \"type\":\"FactSet\",\n                              \"facts\":[\n                                 {\n                                    \"title\":\"Open\",\n                                    \"value\":\"62.24\"\n                                 },\n                                 {\n                                    \"title\":\"High\",\n                                    \"value\":\"62.98\"\n                                 },\n                                 {\n                                    \"title\":\"Low\",\n                                    \"value\":\"62.20\"\n                                 }\n                              ]\n                           }\n                        ]\n                     }\n                  ]\n               }\n            ]\n         }\n      ],\n      \"backgroundImage\":{\n         \"horizontalAlignment\":\"Right\",\n         \"verticalAlignment\":\"Center\"\n      },\n      \"verticalContentAlignment\":\"Bottom\"\n   }\n}\n\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":420,"y":200,"wires":[["6c62af61.9266"]]},{"id":"6c62af61.9266","type":"http request","z":"b02aed05.5a51a","name":"Post Request","method":"POST","ret":"obj","paytoqs":"ignore","url":"","tls":"","persist":false,"proxy":"","authType":"","x":620,"y":200,"wires":[["69514855.dbc0c8"]]},{"id":"69514855.dbc0c8","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":860,"y":200,"wires":[]},{"id":"33450c6d.ba8ea4","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":250,"y":200,"wires":[["2f914fdb.97cbc"]]}]

Msg.payload structure

We have already discussed how to send a message to the tekos chat room. To send an adaptive card you only need one more parameter in the msg.payload object containing the code of the adaptive Card. Let’s take a look what is inside the Function node:

msg.roomId = "!avGWZRMXzxybyGFKAh:m.tekos.co"

msg.url = "https://"+env.get('BASE_URL')+'/_matrix/client/r0/rooms/' +msg.roomId+ '/send/m.room.message?access_token='+global.get('user_access_token')
msg.headers ={
 "Content-type": "application/json"
}

msg.payload={
 "body": "",
 "msgtype": "m.text",
 "adaptiveCard": "" // enter CARD JSON
}

return msg;

As you can see there is almost no different between messages with and without the Adaptive Cards. All you need to do is paste the ACard code to the adaptiveCard object in the msg.payload.

Of Course we only mentioned a basic usage of the card with static data, in the next steps we are going to discuss how to use the variables in the cards and how to structure a code with dynamic content. Also there is an option to build forms inside the cards and that will be also mentioned in the next steps under the “Http actions”