Displaying Azure Cosmos DB items in an Adaptive Card using Node.JS

Greeting and salutations all. Here is my first foray into writing a technical blog.

Cosmos DB is fun. Adaptive Cards are fun. I like fun things, so I thought it would be fun to get my bot to display items from a Cosmos DB in an Adaptive Card.

In your Node.JS project, install the following npm packages:

npm install @azure/cosmos
npm install adaptive-expressions
npm install adaptivecards-templating

Step 1 — Set up the Cosmos DB Client

Setting up the Cosmos DB Client

Set up the connection to the Cosmos DB Client as above. In my example, I’ve stored the keys, endpoint and database information in the ENV file.

Step 2 — Connect to the Cosmos DB Client

Connecting to the Cosmos DB Client

In this step, we are going to connect to the Cosmos DB container.

In the example, the container is called ‘staging-list’, this is the container we will be querying.

Step 3 — Query the Cosmos DB

Querying the Cosmos DB using Node.JS

In this step, we are going to set an empty array using var res = []. This is so we have a container to store the output of the query. We will use the res array later on to help generate the adaptive card.

We are also going to set our query using var userQuery = USER.toUpperCase(). In this example, USER relates to a variable I’ve set which is retrieving the email address of the user. This will be the value that I’m using as part of the query. I’ve then added .toUpperCase() to ensure an exact case match, since the items stored in the container will be in upper case.

In the example, we’re doing a basic query that is going to fetch all items where the Requestor is equal to the user email address and then extrapolating those results and pushing them into the res array I mentioned earlier.

Step 4 — Building the Adaptive Card

Partial JSON schema for Adaptive Card

In this step, we are going to build the Adaptive Card with the data bindings in place. This is so we can map the data in the res array to the Adaptive Card. But first, we need to set up the adaptivecards-templating package which we’ve done using var ACData = require(“adaptivecards-templating”).

In the partial example, there are two key things to note; in the Column Set we are setting up the array that allows the adaptive card to render dynamically. We are then calling out the variable names in the text handle using ${name}. These variables will need to match the variables in the res array (as seen in Step 3) so our data knows where to go.

There is a great post over at Stack Overflow that goes into a little more depth about mapping JSON arrays with Adaptive Cards, which helped me to put this blog post together!

Step 5 — Binding the Data to the Adaptive Card

Binding the Data to the Adaptive Card

In this step, we are going to bind the data from the res array to our Adaptive Card template.

In the example, we are setting up our Adaptive Card card template using the templatePayload schema (as seen in Step 4). We are then binding the data to the requestCard template, specifically calling out reqRows (as seen in Step 4), so our Adaptive Card knows it’s a dynamic structure and res which is the array output.

Step 6 — Rendering the Adaptive Card

Rendering the Adaptive Card

In this final step, we are going to display the Adaptive Card with data.

In the example, we’re rendering and displaying the Adaptive Card using the CardFactory library and referencing the requestCard array (as seen in Step 5) as part of step process in the bot.

The Final Outcome

Bot Emulator showing the Adaptive Card with data

Here it is — in all it’s glory!!!

There are probably a million different ways this could’ve been done better (please let me know if there was!) but I hope it’s been of some use.

Take care,

Steve

Father, Gamer, Man Utd Supporter, Bots, Tech and all things Azure and Microsoft 365. SuperDry shill. Also likes Patty & Bun and BrewDog.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store