# Basic usage of Cards

## 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.&#x20;

![Example adaptive card workflow](https://lh6.googleusercontent.com/wTE8HtciVUnx2egFIixHuVcPAhfQXmeGPAzJToGgHqPCEGI5V-4EPejqmcnINzwAh220_N0-3duRIFNBmvmlMliYlBEnHSfeHwxVBWmvAP9Xz9MtYDEeG_WNICQ2LrNHKFU0yaHT)

{% code title="Example flow JSON" %}

```javascript
[{"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"]]}]
```

{% endcode %}

## **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:

```javascript
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;
```

![](https://lh6.googleusercontent.com/BfPHKFx8BOla23ogB4Whxr4mXQOX71U2GxvVx8keEnfbxN9G-Q1KUHJmDEfujEvt9JAp4S-QRgZmQELk6HisUqZ84SzyYftqMl3w31blnBkVTsfWCx0__wKpCVtQz-eiDE5xCcO7)

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.&#x20;

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”<br>


---

# 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/basic-usage-of-cards.md?ask=<question>
```

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.
