Guidance for Adaptive Cards Custom Visual 1.0.2 - Repeating Column Set

Adaptive Card cards have three repeating set features for facts, columns and images. This version of the Adaptive Cards Custom visual adds support for facts and column sets. It will support one set for each card. Here is an example of a repeating column set. I created some dummy data and edited the cards in https://adaptivecards.io/designer/ to bind the data. 

This has the Adaptive Cards in carousel mode on the left and the detail card with columns on the right.

(Updated) In order to get the single card on a single row, I created a table for it in DAX that always has no rows, but has an ID, we can use as a category on our single card:

NoID = SELECTCOLUMNS(CALCULATETABLE(QldParliament,QldParliament[ID]= -1),"ID", [ID])

My test data looks a little like this:
{
    "ID": 32,
    "Member": "Jarrod Bleijie",
    "Electorate": "KAWANA",
    "Thumbnail" : "data:image/jpg;base64,/9j/4AAQSkZJRgABAQ...",
    "Detail": [
        {
            "Field": "MP",
            "Value": "Jarrod Bleijie"
        },
        {
            "Field": "Party",
            "Value": "Liberal National"
        },
        {
            "Field": "Namesake",
            "Value": "Kawana Waters"
        },
        {
            "Field": "Electors",
            "Value": "34,080 (2017)"
        },
        {
            "Field": "Area",
            "Value": "43 km (16.6 sq mi)"
        }
    ]
}
Notice the Field, Value repeating data that we need to bind to the card here's the essential bit of the card.
   ... {
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Field}",
                            "wrap": true
                        }
                    ]
                },
                {
                    "type": "Column",
                    "width": "stretch",
                    "items": [
                        {
                            "type": "TextBlock",
                            "text": "${Value}",
                            "wrap": true
                        }
                    ]
                }
            ],
            "$data": "${Detail}"
        }...
 
Let's have a look at the data model here:
 
'Member' and 'MemberDetail' are the two cards and are a single column of JSON. The WikipediaData table has multiple rows for each ID. There's a Detail Hierarchy, not strictly necessary, but it aids clarity. Also, note the relationship between QLDParliamwnt and NoID, this means we can use a null ID with the single card visual tp ensure it only displays a single card. The Adaptive Cards Visual will map those multiple rows to the column set on the cards. Here is how that looks in PowerBI:
From the top we have the ID, that's from the NoID table so that there is only one row, then the template, which is the card to which we are binding the data.
If you want to know how to get the card read the previous blog post https://blog.paradigmbi.com.au/post/2020/10/03/adaptive-cards-for-power-bi.
Add the fields in the normal manner and then for the repeating fields add the first column, this is the grouping category for these fields, then add the actual fields on the Card. Rember bind is by name, so if the names don't match, just rename them.
 
That's about it for repeating column sets, I'll do fact sets in another post.
 
Have a play in the online designer or Adaptive Card Studio in Visual Studio Code
Go to the download page to get the latest version of Adaptive Cards Custom Visual https://blog.paradigmbi.com.au/page/paradigm-bi-downloads
Don't forget to reach out and let us know your thoughts,

 

Comments are closed