DataSource

Use datasources to query data to be rendered

Script datasource

In this example. We invoke campaign-applicants script which returned a map of data

Script response

{
    "pending": [
        {
            "name": "Homer Simpson"
        }
    ],
    ...
}

Layout (main)

{
  "data": {
    "sources": [
      {
        "id": "applicants",
        "kind": "script",
        "options": {
          "handle": "campaign-applicants",
          "campaignId": "{dispatch.id}"
        }
      }
    ]
  },
  "ux": {
    "component": "grid",
    "children": [
      {
        "component": "layout"
        "options": {
          "id": "campaign-participants-pending",
          "parameters": {
>>>         "participants": "{$source.applicants.data.pending}"
          }
        }
      }
    ]
  }
}

Layout (sub layout)

This layout is where we passed there from the script to. We passed the data {data.participants} that being sent by the parent layout to an iterator. We iterate the list {data.participants} and render a text widget with text of data.name.

{
  "ux": {
    "component": "accordion",
    "title": "Pending",
    "child": {
      "component": "iterator",
>>>    "list": "{data.participants}",
      "child": {
        "component": "grid",
        "direction": "row",
        "justifyContent": "space-between",
        "alignItems": "center",
        "children": [
            {
                "component": "text",
>>>              "text": "{data.name}"
            }
        ]
      }
    }
  }
}