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