Skip to main content

Notifications

Community site session details

Community site session details

Session Id :
Copilot Studio - General
Answered

Display Array Items in Adaptive Card

(1) ShareShare
ReportReport
Posted on by 19

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!

Categories:
  • HenryJammes Profile Picture
    on at
    Re: Display Array Items in Adaptive Card

    Awesome, glad you found it useful @Code4Pay!

  • Code4Pay Profile Picture
    19 on at
    Re: Display Array Items in Adaptive Card

    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/77176893#77176893

  • Code4Pay Profile Picture
    19 on at
    Re: Display Array Items in Adaptive Card

    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!

  • Verified answer
    HenryJammes Profile Picture
    on at
    Re: Display Array Items in Adaptive Card

    Hi @Code4Pay@fernandosilva@abhi_r,

     

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

    Here's the end result:

     

    HenryJammes_0-1695685045390.png

     

    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.

    HenryJammes_2-1695685188368.png

     

    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:

     

    HenryJammes_3-1695685282584.png

     

    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}",)

     

    HenryJammes_4-1695685449320.png

     

    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

  • fernandosilva Profile Picture
    Super User 2024 Season 1 on at
    Re: Display Array Items in Adaptive Card

    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.

    2023-09-18 15.07.22 web.powerva.microsoft.com 4dcba9e00b9b.png

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

    2023-09-18 15.12.10 web.powerva.microsoft.com ef7ea8d2fa24.png

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

     

    Cheers,

     

    Fernando

  • Code4Pay Profile Picture
    19 on at
    Re: Display Array Items in Adaptive Card

    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): Screenshot from 2023-09-13 15-25-29.png

  • Code4Pay Profile Picture
    19 on at
    Re: Display Array Items in Adaptive Card

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

  • fernandosilva Profile Picture
    Super User 2024 Season 1 on at
    Re: Display Array Items in Adaptive Card

    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

     

     

  • abhi_r Profile Picture
    on at
    Re: Display Array Items in Adaptive Card

    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

     

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

🌸 Community Spring Festival 2025 Challenge Winners! 🌸

Congratulations to all our community participants!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Congratulations to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard > Copilot Studio - General

#1
Romain The Low-Code Bearded Bear Profile Picture

Romain The Low-Code... 25

#1
Pablo Roldan Profile Picture

Pablo Roldan 25

#3
stampcoin Profile Picture

stampcoin 10

Overall leaderboard