You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
3.9 KiB
91 lines
3.9 KiB
2 years ago
|
# 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.
|
||
|
|
|
||
|
|
```JSON
|
||
|
|
{
|
||
|
|
"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](https://adaptivecards.io/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:
|
||
|
|
|
||
|
|
```JSON
|
||
|
|
...
|
||
|
|
{
|
||
|
|
"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}"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
...
|
||
|
|
```
|