{
"id": "TEAM",
"title": "Our Expert Team",
"data": {
"department": {
"type": "string",
"__example__": "Cardiology"
},
"src":{
"type": "string",
"__example__":"/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAY"
},
"doc_name": {
"type": "string",
"__example__": "Basil"
},
"doc_bio": {
"type": "string",
"__example__": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sedncididunt"
}
},
"layout": {
"type": "SingleColumnLayout",
"children": [
{
"type": "TextHeading",
"text": "${data.department}"
},
{
"type":"Image",
"src":"${data.src}",
"height":150,"scale-type":"contain"
},
{
"type": "TextCaption",
"text": "${data.doc_name}"
},
{
"type": "TextBody",
"text":"${data.doc_bio}" }
The best way to do this is to duplicate components on the screen, and show/hide them depending on the dynamic data you provide.
There are also limitations to the number of images and sizes of these images you can display on a single screen, so keep this in mind.
Here is an example of how you might achieve this for a screen with up to 3 doctors. Copy and paste this example into the playground and try it out by updating the "visible" properties in the data payload examples:
{
"version": "4.0",
"screens": [
{
"id": "TEAM",
"title": "Our Expert Team",
"terminal": true,
"data": {
"department": {
"type": "string",
"__example__": "Cardiology"
},
"doctor_1": {
"type": "object",
"properties": {
"visible": {
"type": "boolean"
},
"src": {
"type": "string"
},
"doc_name": {
"type": "string"
},
"doc_bio": {
"type": "string"
}
},
"__example__": {
"visible": true,
"src": "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAY",
"doc_name": "Basil",
"doc_bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sedncididunt"
}
},
"doctor_2": {
"type": "object",
"properties": {
"visible": {
"type": "boolean"
},
"src": {
"type": "string"
},
"doc_name": {
"type": "string"
},
"doc_bio": {
"type": "string"
}
},
"__example__": {
"visible": true,
"src": "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAY",
"doc_name": "John",
"doc_bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sedncididunt"
}
},
"doctor_3": {
"type": "object",
"properties": {
"visible": {
"type": "boolean"
},
"src": {
"type": "string"
},
"doc_name": {
"type": "string"
},
"doc_bio": {
"type": "string"
}
},
"__example__": {
"visible": false,
"src": "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAY",
"doc_name": "Mallory",
"doc_bio": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sedncididunt"
}
}
},
"layout": {
"type": "SingleColumnLayout",
"children": [
{
"type": "TextHeading",
"text": "${data.department}"
},
{
"type": "Image",
"src": "${data.doctor_1.src}",
"height": 150,
"scale-type": "contain",
"visible": "${data.doctor_1.visible}"
},
{
"type": "TextCaption",
"text": "${data.doctor_1.doc_name}",
"visible": "${data.doctor_1.visible}"
},
{
"type": "TextBody",
"text": "${data.doctor_1.doc_bio}",
"visible": "${data.doctor_1.visible}"
},
{
"type": "Image",
"src": "${data.doctor_2.src}",
"height": 150,
"scale-type": "contain",
"visible": "${data.doctor_2.visible}"
},
{
"type": "TextCaption",
"text": "${data.doctor_2.doc_name}",
"visible": "${data.doctor_2.visible}"
},
{
"type": "TextBody",
"text": "${data.doctor_2.doc_bio}",
"visible": "${data.doctor_2.visible}"
},
{
"type": "Image",
"src": "${data.doctor_3.src}",
"height": 150,
"scale-type": "contain",
"visible": "${data.doctor_3.visible}"
},
{
"type": "TextCaption",
"text": "${data.doctor_3.doc_name}",
"visible": "${data.doctor_3.visible}"
},
{
"type": "TextBody",
"text": "${data.doctor_3.doc_bio}",
"visible": "${data.doctor_3.visible}"
},
{
"type": "Footer",
"label": "Done",
"on-click-action": {
"name": "complete",
"payload": {}
}
}
]
}
}
]
}