We're going to make some customer-friendly KPIs using the Adaptive Cards custom visual for Power BI. This blog and an accompanying video will give you the recipe, then you can get creative and create your own. There is a companion video on YouTube
First up we need some sample data, so we'll model what the data looks like in JSON:
{
"KPIName": "Financial Services KPI",
"KpiIcon": "https://paradigmdownload.blob.core.windows.net/icons/001-financial.png",
"KPIValue":"90" ,
"KPIDate" : "2020-12-14"
}
Note that icon, it's in a publicly accessible Azure storage container, so that we can get to it easily.
Now we can go across to the Adaptive Cards Designer and create a card. Paste the data into "SAMPLE DATA EDITOR" panel. Now we need a card, let's use this one that I created earlier into the "CARD PAYLOAD EDITOR" panel:
{
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "${KpiName}"
},
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"items": [
{
"type": "Image",
"style": "Person",
"url": "${KpiIcon}",
"size": "Small"
}
],
"width": "auto"
},
{
"type": "Column",
"items": [
{
"type": "TextBlock",
"weight": "Bolder",
"text": "${KpiValue}",
"wrap": true,
"horizontalAlignment": "Right"
},
{
"type": "TextBlock",
"spacing": "None",
"text": "Date ${KpiDate}",
"isSubtle": true,
"wrap": true,
"horizontalAlignment": "Right"
}
],
"width": "Auto"
}
]
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3"
}
Now you should see a card like this:
If you haven't used the designer before, have a little click around the "CARD STRUCTURE" panel and see what comes up in the "ELEMENT PROPERTIES" panel.
Now that we have a working card we can bind some real data to the card to create out Adaptive Cards KPI.
Here's some CSV Data:
Strategy,KPI,Status,Date,Icon
Financial,75,Ok,14/12/2020,https://paradigmdownload.blob.core.windows.net/icons/001-financial.png
Customer,60,Ok,15/12/2020,https://paradigmdownload.blob.core.windows.net/icons/002-customer-support.png
Systems,80,Ok,16/12/2020,https://paradigmdownload.blob.core.windows.net/icons/003-administrator.png
Organisation,80,Ok,17/12/2020,https://paradigmdownload.blob.core.windows.net/icons/004-organization.png
Now we're almost ready to put it all together, and I've put the card in Azure storage at
https://paradigmdownload.blob.core.windows.net/pbiviz/AdaptiveCardDemo/DemoKPICard.json
Now if we load the CSV data into Power BI, we are ready to put it on an Adaptive Cards. Have a look at the video for this process. Then we need the recipe for loading a card. This is a good recipe for loading any text data.
let
Source = Lines.ToText(
Lines.FromBinary(AzureStorage.BlobContents(KPICardPath)))
in
Source
Then create a parameter "KPICardPath" that points to the URL of the card in Azure Storage.
Now we can load the Adaptive Cards Visual from the store :
add it to our canvas and add the category and the fields, we rename the fields so that they have the same names as the card fields that we want to bind to:
I've adjusted the card width in the formatting pane under "Card Render" and now our Adaptive Cards KIP is ready to filter other visuals in the report.
Don't forget to check out the companion video on YouTube