Display Array Items in Adaptive Card

[Code4Pay]

Hey,

I am working on a topic to return a user's tickets. I have a JSON dataset returned from a Power Automate flow back to my Power Virtual Agents topic. I would like the tickets to display in an adaptive card. However, I am having trouble getting the card to populate with the data from the returnTickets array.

Here is my JSON I am trying to display:

{
  "capitalName": "John",
  "returnString": "Success",
  "returnCode": true,
  "returnTickets": [
    {
      "id": 114762,
      "summary": "Example Ticket 1",
      "company": "Apple",
      "resources": "Michael, John"
    },
    {
      "id": 117572,
      "summary": "Example Ticket 2",
      "company": "Amazon",
      "resources": "John"
    },
    {
      "id": 121946,
      "summary": "Example Ticket 3",
      "company": "Microsoft",
      "resources": "Peter, Charles, Steven, John"
    },
    {
      "id": 122116,
      "summary": "Example Ticket 4",
      "company": "Facebook",
      "resources": "Steven, John"
    },
    {
      "id": 99336,
      "summary": "Example Ticket 5",
      "company": "Tesla",
      "resources": "Michael, John"
    },
    {
      "id": 119254,
      "summary": "Example Ticket 6",
      "company": "Gamestop",
      "resources": "Michael, John"
    }
  ]
}

Here is the adaptive card I have so far (the variables don't populate properly, ie they just display as "${capitalName}" in the card):

{
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "TextBlock",
      "text": "Capital Name: ${capitalName}",
      "weight": "bolder",
      "size": "large"
    },
    {
      "type": "TextBlock",
      "text": "Return String: ${returnString}",
      "separator": true
    },
    {
      "type": "TextBlock",
      "text": "Return Code: ${returnCode}",
      "separator": true
    },
    {
      "type": "TextBlock",
      "text": "Tickets",
      "weight": "bolder",
      "size": "medium",
      "separator": true
    },
    {
      "type": "Container",
      "items": [
        {
          "$data": "${returnTickets}",
          "type": "TextBlock",
          "text": "- ID: ${id}, Summary: ${summary}, Company: ${company}, Resources: ${resources}",
          "wrap": true
        }
      ]
    }
  ]
}

If I switch to the formula editor, I can get the basic variables to display if I do something like Topic.capitalName, but I still can't get the array of tickets and ticket information to work properly. Can someone point me in the right direction? Thank you in advance!

[abhi_r]

HI @Code4Pay You can try the "Ask with Adaptive card" feature inside PVA canvas. Inside the card you can use "PowerFx" formula editor to add dynamic information to the adaptive card. The array of tickets and ticket information can also be handled as a "Table" function inside the formula editor. 

Check this link below: 

Interactive Adaptive Cards (preview) - Power Virtual Agents | Microsoft Learn.

Tables in Microsoft Power Fx - Power Platform | Microsoft Learn

[fernandosilva]

Hi @Code4Pay ,

If you are using the new canvas, I believe where you have:

"type": "Container", "items": []

You will probably need and "id" where you will set it on Power Automate and then when you call the action (Power Automate) on PVA, try to change the fx formula to Text(Topic.YourIdHere).

"type: "Container",

"id": "MyItems",

"items": [

]

Cheers,

Fernando

[Code4Pay]

Thanks, I'll do some reading on the PowerFX side of things.

[Code4Pay]

Can you elaborate on the new canvas view? This is what I see when I edit the adaptive card (I changed the mode from JSON to Edit Formula since I was playing around with the card):

[fernandosilva]

Hi @Code4Pay ,

I normally create the structure of the adaptive card in json, so my guess is the what most of us use.

If you create the id as you see in the image below, is possible to call it from a Power Automate flow to display whatever choice the user chose.

See the image below.

 

The syntax of the formula on the new canvas have changed, see below:

 

So, after these changes, I believe you will get your results.

Cheers,

Fernando

[HenryJammes · Accepted solution]

Hi @Code4Pay, @fernandosilva, @abhi_r,

I reused @Code4Pay's sample JSON data and adaptive card.

Here's the end result:

I started by initializing the JSON data in a new variable that I call JSON.

I hard coded it, but in a real-life scenario, you'd likely get it back from Power Automate or from an HTTP Request.

I then use a Parse value node to transform the JSON string into a Table that PVA (and Power Fx) can work with.

I pasted the exact same JSON in the Data type "From sample data" to get the data type and schema ready to go automatically:

I save it as a variable called Table.

Last, I simply added an Adaptive Card to a Message node.

I pasted your JSON and then converted it to Formula so I can use Power Fx.

Notice how I can then reference your JSON record properties:

Topic.Table.returnCode, for example, is one of your record properties.

For the list of tickets, as it's an array, I use a ForAll function and reference the Topic.Table.returnTickets array. I can then reference each of the array's properties such as id, summary, etc. as part of my function.

I did some very minor tweaks in your initial adaptive card JSON (removed "$data": "${returnTickets}",)

If you want to test it yourself, just paste this YAML code in the code editor view (an option available under the ... at the top right corner) of a new topic in PVA:

kind: AdaptiveDialog
beginDialog:
  kind: OnRecognizedIntent
  id: main
  intent:
    displayName: Simple Adaptive Card
    triggerQueries:
      - Simple Adaptive Card
  actions:
    - kind: SetVariable
      id: setVariable_vfkAjw
      variable: Topic.JSON
      value: "{   \"capitalName\": \"John\",   \"returnString\": \"Success\",   \"returnCode\": true,   \"returnTickets\": [     {       \"id\": 114762,       \"summary\": \"Example Ticket 1\",       \"company\": \"Apple\",       \"resources\": \"Michael, John\"     },     {       \"id\": 117572,       \"summary\": \"Example Ticket 2\",       \"company\": \"Amazon\",       \"resources\": \"John\"     },     {       \"id\": 121946,       \"summary\": \"Example Ticket 3\",       \"company\": \"Microsoft\",       \"resources\": \"Peter, Charles, Steven, John\"     },     {       \"id\": 122116,       \"summary\": \"Example Ticket 4\",       \"company\": \"Facebook\",       \"resources\": \"Steven, John\"     },     {       \"id\": 99336,       \"summary\": \"Example Ticket 5\",       \"company\": \"Tesla\",       \"resources\": \"Michael, John\"     },     {       \"id\": 119254,       \"summary\": \"Example Ticket 6\",       \"company\": \"Gamestop\",       \"resources\": \"Michael, John\"     }   ] }"
    - kind: ParseValue
      id: sKEHrX
      variable: Topic.Table
      valueType:
        kind: Record
        properties:
          capitalName: String
          returnCode: Boolean
          returnString: String
          returnTickets:
            type:
              kind: Table
              properties:
                company: String
                id: Number
                resources: String
                summary: String
      value: =Topic.JSON
    - kind: SendActivity
      id: sendActivity_9zFgzY
      activity:
        attachments:
          - kind: AdaptiveCardTemplate
            cardContent: |-
              ={
                type: "AdaptiveCard",
                version: "1.0",
                body: [
                  {
                    type: "TextBlock",
                    text: "Capital Name: " & Topic.Table.capitalName,
                    weight: "bolder",
                    size: "large"
                  },
                  {
                    type: "TextBlock",
                    text: "Return String: " & Topic.Table.returnString,
                    separator: true
                  },
                  {
                    type: "TextBlock",
                    text: "Return Code: " & Topic.Table.returnCode,
                    separator: true
                  },
                  {
                    type: "TextBlock",
                    text: "Tickets",
                    weight: "bolder",
                    size: "medium",
                    separator: true
                  },
                  {
                    type: "Container",
                    items: 
                      ForAll(Topic.Table.returnTickets,
                        {
                          type: "TextBlock",
                          text: "- ID: " & id & ", Summary: " & summary & ", Company: " & company & ", Resources: " & resources,
                          wrap: true
                        }
                    )
                  }
                ]
              }

Let me know if that helps

Henry

[Code4Pay]

Oh my gosh, thank you so much for laying it all out so clearly! I absolutely could not figure out how to smash the data into place. The code you gave me worked perfectly. I have since hooked it up to Power Automate to get real data from our system. Thanks again!

[Code4Pay]

For those lost souls in the future, here is a link to my Stackoverflow post about the same thing. There, I have expanded upon my solution, provided my own pictures, clarified a few things for those who may be confused about adaptive card syntax in PVA and how to call variables, and provided my sample code which is slightly tweaked from @HenryJammes lovely code.

https://stackoverflow.com/questions/76965801/cant-dynamically-display-powerva-data-in-adaptive-card/...

[HenryJammes]

Awesome, glad you found it useful @Code4Pay!