3.9 KiB
Example
This tool requires two different JSON inputs: the data model (data_model.json), and the card payload (card_payload.json).
The Data Model
This renderer employs an expanded data model, which is designed to allow rendering cards dynamically based on the data model's contents. I created this for another UWP project I'm working on, and I needed a means of including every possible field in my card payload, without the renderer displaying empty fields.
Syntax
There are two sections of the data model JSON object. The template section is a set of key-value pairs giving a friendly display name to every data key in the item section.
The template section should only include fields to be displayed by the card renderer.
The data model item definition is composed of key-value pairs. Each value may be either a string, or a single-level array of strings.
Example
In the below example (also found in data_model.json), note that images require no friendly name, and one of the attributes, clade, contains an array of strings.
{
"template" :
{
"image" : "image",
"clade" : "Clades",
"name" : "Common Name",
"order" : "Order",
"family" : "Family",
"genus" : "Genus",
"species" : "Species (Latin Name)"
},
"item" :
{
"image" : "almonds.jpg",
"clade" : [
"Tracheophytes",
"Angiosperms",
"Eudicots",
"Rosids"
],
"name" : "American Hazelnut",
"order" : "Fagales",
"family" : "Betulaceae",
"genus" : "Corylus",
"species" : "Corylus Americana"
}
}
The Card Payload
The card payload can be generated using Microsoft's Adaptive Cards Designer, or you can create it by hand. The card payload should contain every possible field that may be passed by the data model.
Vanilla adaptive cards display all available fields, including those with no value. My implementation makes it possible to bypass rendering any field that isn't included in the data model's template section, which allows the renderer to dynamically adjust the rendered card based on the data model provided.
This example includes card_payload.json, which is a card payload with empty fields, along with the fields defined in the data model. Of note, the clade field, which contains an array in the data model, includes additional parameters:
...
{
"type": "ColumnSet",
"columns": [
{
"type": "Column",
"width": "stretch",
"horizontalAlignment": "Right",
"items": [
{
"type": "TextBlock",
"text": "{template.clade}",
"weight": "Bolder",
"horizontalAlignment": "Right"
}
]
},
{
"type": "Column",
"width": "stretch",
"items": [
{
"type": "Container",
"items": [
{
"$data": "{item.clade}",
"type": "TextBlock",
"text": "{$data}"
}
]
}
]
}
]
}
...