Add variables to an Adaptive Card in a Copilot Studio Topic

Topics in Copilot Studio have so many great features. One of them being something widely used in the Power Platform as well as so many programming languages: variables. And displaying information using Adaptive cards makes for a better user experience 🙂

In this post, we’ll see how to add variables into an Adaptive card, whether it’s a global variable, topic variable, and even output variables coming from an Agent flow.

Scenario

A Copilot agent will return information about dog breeds (I love dogs so why not 😊) and our data will be coming from a SharePoint list. When a user enters a dog breed in the chat, we expect information about that breed displayed in an Adaptive card.

Topics

For that instance, we’ll use classic orchestration, and add our SharePoint site into the agent’s knowledge.

As this agent will only be scoped to this specific task (and for demo purposes), we’ll first modify a little bit the Conversation Start topic to grab the dog breed provided by the user. We’ll come back briefly into this topic later…

Note: It’s always best to create a new topic instead of modifying a built-in one, but here is only for demo purposes and simplicity as topics are not the subject of this post 😉

Our second (main) topic will be where the magic happens. We’ll create a topic from blank, and set the trigger to be It’s redirected to. Then, in order to get our data from SharePoint, we’ll need to use an Agent flow.

Add a node and choose add tool > New Agent flow.

Agent flow to get SharePoint data

The flow will be straight forward:

• When an agent calls the flow, get the dog breed provided by the user (Text input)
• Get the data from SharePoint corresponding to that breed (HTTP request to SharePoint with filter query)
• Respond to the agent with the data we want to display in the Adaptive card (outputs from the HTTP request to SharePoint)

💡 Don’t forget to publish and rename your Agent flow, then let’s go back to the topic.

Observe that the flow input is our global variable (from the Conversation Start topic above), and the flow outputs are now topic variables.

Adaptive Card

Adaptive cards are a great way to display information to users, while also providing various actions to perform (i.e.: open a link via a button).

When creating an adaptive card, replace every values you expect to be dynamic with placeholders. In the card designer, it doesn’t matter if you prefer a syntax of $myDynamicValue or {myDynamicValue} because they will be removed for the real values.

The information we’ll display on the card are:

• Dog image (topic variable)
• Dog breed (global variable)
• Origins (topic variable)
• Size (topic variable)
• Lifespan (topic variable)

The syntax will be Global.myVariableName or Topic.myVariableName.

Let’s add a Send a message node, click + Add (under the icon of the node), and choose Adaptive card. You can choose to create your card directly by clicking on Edit adaptive card (right panel), or paste the JSON in the Formula card option.

Now, replace the placeholders with the variables. Below is my adaptive card as an example:

{
  type: "AdaptiveCard",
  '$schema': "https://adaptivecards.io/schemas/adaptive-card.json",
  version: "1.5",
  body: [
    {
      type: "Image",
      url: Topic.DogImage,
      altText: "Dog standing"
    },
    {
      type: "TextBlock",
      text: Global.varDogBreed,
      wrap: true,
      size: "Large",
      weight: "Bolder"
    },
    {
      type: "ColumnSet",
      columns: [
        {
          type: "Column",
          width: "stretch",
          items: [
            {
              type: "TextBlock",
              text: "Origins:",
              wrap: true,
              weight: "Bolder"
            }
          ]
        },
        {
          type: "Column",
          width: "stretch",
          items: [
            {
              type: "TextBlock",
              text: Topic.Origins,
              wrap: true
            }
          ]
        }
      ]
    },
    {
      type: "ColumnSet",
      columns: [
        {
          type: "Column",
          width: "stretch",
          items: [
            {
              type: "TextBlock",
              wrap: true,
              text: "Size:",
              weight: "Bolder"
            }
          ]
        },
        {
          type: "Column",
          width: "stretch",
          items: [
            {
              type: "TextBlock",
              text: Topic.Size,
              wrap: true
            }
          ]
        }
      ]
    },
    {
      type: "ColumnSet",
      columns: [
        {
          type: "Column",
          width: "stretch",
          items: [
            {
              type: "TextBlock",
              text: "Lifespan:",
              wrap: true,
              weight: "Bolder"
            }
          ]
        },
        {
          type: "Column",
          width: "stretch",
          items: [
            {
              type: "TextBlock",
              text: Topic.Lifespan,
              wrap: true
            }
          ]
        }
      ]
    }
  ]
}

Our last step is to go back to the first topic, and add a node to redirect to this main topic.

Click the + sign to add a node, Topic management > Go to another topic > Select your topic.

Results

Let’s test! After entering a dog breed, we’ve got a nice response with a beautiful German Shepherd 🐕 (I own one so I may be a bit biased)

Note: If your users use acronyms, create custom entities. For example, instead of German Shepherd, users may also enter “GSD” or “Alsatians” as they’re also known this way.

Thanks for reading! 🙂