Claire
2 years ago
4 changed files with 339 additions and 5 deletions
@ -0,0 +1,91 @@ |
|||||||
|
# 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}" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
... |
||||||
|
``` |
@ -0,0 +1,199 @@ |
|||||||
|
{ |
||||||
|
"type": "AdaptiveCard", |
||||||
|
"body": [ |
||||||
|
{ |
||||||
|
"type": "Container", |
||||||
|
"items": [ |
||||||
|
{ |
||||||
|
"type": "TextBlock", |
||||||
|
"text": "{item.name}", |
||||||
|
"size": "Large", |
||||||
|
"weight": "Bolder", |
||||||
|
"horizontalAlignment": "Center", |
||||||
|
"color": "Accent" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"type": "Image", |
||||||
|
"url": "{item.image}", |
||||||
|
"altText": "" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"type": "ColumnSet", |
||||||
|
"columns": [ |
||||||
|
{ |
||||||
|
"type": "Column", |
||||||
|
"width": "stretch", |
||||||
|
"horizontalAlignment": "Right", |
||||||
|
"items": [ |
||||||
|
{ |
||||||
|
"type": "TextBlock", |
||||||
|
"text": "{template.other}", |
||||||
|
"weight": "Bolder", |
||||||
|
"horizontalAlignment": "Right" |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"type": "Column", |
||||||
|
"width": "stretch", |
||||||
|
"items": [ |
||||||
|
{ |
||||||
|
"type": "TextBlock", |
||||||
|
"text": "{item.other}" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"type": "ColumnSet", |
||||||
|
"columns": [ |
||||||
|
{ |
||||||
|
"type": "Column", |
||||||
|
"width": "stretch", |
||||||
|
"horizontalAlignment": "Right", |
||||||
|
"items": [ |
||||||
|
{ |
||||||
|
"type": "TextBlock", |
||||||
|
"text": "{template.name}", |
||||||
|
"weight": "Bolder", |
||||||
|
"horizontalAlignment": "Right" |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"type": "Column", |
||||||
|
"width": "stretch", |
||||||
|
"items": [ |
||||||
|
{ |
||||||
|
"type": "TextBlock", |
||||||
|
"text": "{item.name}" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"type": "ColumnSet", |
||||||
|
"columns": [ |
||||||
|
{ |
||||||
|
"type": "Column", |
||||||
|
"width": "stretch", |
||||||
|
"horizontalAlignment": "Right", |
||||||
|
"items": [ |
||||||
|
{ |
||||||
|
"type": "TextBlock", |
||||||
|
"text": "{template.order}", |
||||||
|
"weight": "Bolder", |
||||||
|
"horizontalAlignment": "Right" |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"type": "Column", |
||||||
|
"width": "stretch", |
||||||
|
"items": [ |
||||||
|
{ |
||||||
|
"type": "TextBlock", |
||||||
|
"text": "{item.order}" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"type": "ColumnSet", |
||||||
|
"columns": [ |
||||||
|
{ |
||||||
|
"type": "Column", |
||||||
|
"width": "stretch", |
||||||
|
"horizontalAlignment": "Right", |
||||||
|
"items": [ |
||||||
|
{ |
||||||
|
"type": "TextBlock", |
||||||
|
"text": "{template.family}", |
||||||
|
"weight": "Bolder", |
||||||
|
"horizontalAlignment": "Right" |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"type": "Column", |
||||||
|
"width": "stretch", |
||||||
|
"items": [ |
||||||
|
{ |
||||||
|
"type": "TextBlock", |
||||||
|
"text": "{item.genus}" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"type": "ColumnSet", |
||||||
|
"columns": [ |
||||||
|
{ |
||||||
|
"type": "Column", |
||||||
|
"width": "stretch", |
||||||
|
"horizontalAlignment": "Right", |
||||||
|
"items": [ |
||||||
|
{ |
||||||
|
"type": "TextBlock", |
||||||
|
"text": "{template.species}", |
||||||
|
"weight": "Bolder", |
||||||
|
"horizontalAlignment": "Right" |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"type": "Column", |
||||||
|
"width": "stretch", |
||||||
|
"items": [ |
||||||
|
{ |
||||||
|
"type": "TextBlock", |
||||||
|
"text": "{item.species}" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
{ |
||||||
|
"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}" |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
] |
||||||
|
} |
||||||
|
], |
||||||
|
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json", |
||||||
|
"version": "1.0" |
||||||
|
} |
@ -0,0 +1,27 @@ |
|||||||
|
{ |
||||||
|
"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" |
||||||
|
} |
||||||
|
} |
Loading…
issues.context.reference_issue