Power Virtual Agents: Creating adaptive cards with PowerFX

The last three articles I wrote were about the new advanced authoring canvas in Power Virtual Agents, which is in preview today. In the first article I showed you an example of how we could query data from Dynamics 365 customer service and feed those rows back into Power Virtual Agents so that we can use these values with a question (You can access that article here).
In the article after that (accessible here) , I build on top of the previous article’s example, discussing how we can use basic cards in Power Virtual Agents and populate the card with dynamic values using PowerFX. In this article I am going to use the same data from the example in the previous article to build an adaptive card that will be shown to the customer who is interacting with Power Virtual Agent.
This card will contain information about a case that was created by using a Power Automate Flow in Power Virtual Agents. Below shows an image of the adaptive card I will show you how to create.

Adaptive Card

With adaptive cards you have the ability to design the card however you want. There are no fields to fill out like you saw with the basic card. You can create your adaptive card by navigating to the adaptive card designer page. When you open the page you’ll notice a simple card is loaded on the screen as an example. If you click on the ‘Samples’ tab on top of the screen, you can take a look at several different samples you can start from. Once you find a sample that you like, click on ‘Try it yourself’ on the left side of the screen. The card will be loaded in the window and you can start editing the card. When you’re finished editing your card, you’ll need to copy the json payload. (which is visible below the card.) You can do this by clicking the ‘Copy card payload’ button on the top of the screen. I created my card from scratch and have shared the json payload below.

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.5",
    "body": [
        {
            "type": "TextBlock",
            "text": "New case created!",
            "wrap": true,
            "size": "Medium",
            "weight": "Bolder",
            "color": "Attention"
        },
        {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": 2,
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "Case# ",
                            "wrap": true,
                            "size": "Medium",
                            "weight": "Bolder",
                            "spacing": "None"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Category: ",
                            "wrap": true,
                            "spacing": "Small"
                        },
                        {
                            "type": "TextBlock",
                            "text": "Subcategory: ",
                            "wrap": true,
                            "spacing": "Small"
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": 1,
                    "items": [
                        {
                            "type": "Image",
                            "url": "https://thecomputershop.org/wp-content/uploads/2020/05/ContactComputerShop.jpg",
                            "size": "Large",
                            "horizontalAlignment": "Right"
                        }
                    ]
                }
            ]
        }
    ]
}

The next thing we need to do is to create another message node and make that message appear as an adaptive card. You can do this by clicking on the plus button in the Power Virtual Agent authoring canvas and selecting ‘Send a message’. When the message window opens, click on the ‘+Add’ button and select ‘Adaptive card’. You’ll notice that the ‘Adaptive card properties’ window opens on the right side of the screen.

Click on the arrows on the top right side of the window to open the JSON editor. This is where we need to paste the JSON payload code from the card that we created earlier. First delete all the content in the CardContent screen and then paste your custom JSON code in the window. At this point we haven’t added the dynamic data yet, like the case#, the category and subcategory. On the screen click the ‘Edit JSON’ button and change it to ‘Formula’. Performing this action will allow us to work with this data as a PowerFX formula and add the dynamic content.

After you switch to ‘Formula’, you’ll notice the full window loads, showing all the code. It’s pretty easy to read where we need to add the dynamic values from Power Virtual Agents. If you’re using the sample code I shared above, then scroll down until you see Text: “Case# “, (In the code above you’ll notice the areas where I will add the PowerFX are colored in red.) The text between the quotes is the hard coded text that will show in the card. I’m going to add the first bit of PowerFX after Text: “Case# and before the comma. (,). I will add a space first, then & (Topic.CaseNumber). This will pull in the data from the CaseNumber variable in Power Virtual Agents. The entire line should look like this:

text: "Case# " & (Topic.CaseNumber),

We will do the same for case category and sub category. For case category you’ll need to find the line that shows “text”: “Category: “, and then add & (Topic.CaseCategory) after the quote, and before the comma. For subcategory you’ll need to find the line that shows “text”: “CaseSubCategory: “, and then add & (Topic.CaseSubCategory), make sure the comma is at the end. The entire code should look like this:

{
  '$schema': "http://adaptivecards.io/schemas/adaptive-card.json",
  type: "AdaptiveCard",
  version: "1.5",
  body: [
    {
      type: "TextBlock",
      text: "New case created!",
      wrap: true,
      size: "Medium",
      weight: "Bolder",
      color: "Attention"
    },
    {
      type: "ColumnSet",
      columns: [
        {
          type: "Column",
          width: "2",
          items: [
            {
              type: "TextBlock",
              text: "Case# " & (Topic.CaseNumber),
              wrap: true,
              size: "Medium",
              weight: "Bolder",
              spacing: "None"
            },
            {
              type: "TextBlock",
              text: "Category: " & (Topic.CaseCategory),
              wrap: true,
              spacing: "Small"
            },
            {
              type: "TextBlock",
              text: "Subcategory: " & (Topic.CaseSubCategory),
              wrap: true,
              spacing: "Small"
            }
          ]
        },
        {
          type: "Column",
          width: "1",
          items: [
            {
              type: "Image",
              url: "https://thecomputershop.org/wp-content/uploads/2020/05/ContactComputerShop.jpg",
              size: "Large",
              horizontalAlignment: "Right"
            }
          ]
        }
      ]
    }
  ]
}

You’ll notice I highlighted the PowerFX that I added in red to make it easier to find where I added the code. Obviously this is a very simple card, so I would recommend playing around with the adaptive card designer. NOTE: You can also access the designer directly from the ‘Adaptive card properties window’ by clicking on ‘Open Adaptive Card designer’.
I hope you enjoyed this post! Be sure to check in again next week for a new article or subscribe here to never miss another post!

Share this!

Comments are Closed