Partial Outageshare-external
how to pass a array of text caption image and text body . i have a doctor name,his bio and his image like that i will have multiple doctor data.how can i structure that in flow .json
1
 {
  "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}" }

Harsheena
Asked about 5 months ago
Selected Answer
1

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": {}
            }
          }
        ]
      }
    }
  ]
}
July 3 at 3:48 AM
Bar