JSON-driven UI

Runtime assets

ui/index.json selects the entry screen and screen inventory. Screen definitions live under ui/screens; bottom sheets under ui/bottom_sheets. The baseline index uses home as its entry.

{
  "version": "1.0",
  "entry": "home",
  "screens": [
    { "id": "home", "file": "home.json", "label": "Home", "icon": "home" }
  ]
}

This illustrates a minimal structure. It is not an instruction to remove the current app's screenVault, survey screens, or binding information.

Screen nodes

A screen places nodes in children. The renderer selects an implementation using unit and type, with display properties in props.

{
  "id": "home",
  "title": "Home",
  "children": [{
    "id": "intro",
    "unit": "component",
    "type": "Text",
    "props": {
      "text": "Thank you for participating in this study.",
      "style": "bodyLarge"
    }
  }]
}

Bindings and actions

bindingRef connects displayed data/state and actionRef connects user actions to existing contracts. Inventing an identifier does not implement its runtime behavior. Verify the connection between packaged assets and binding/action handlers.

Survey availability and start actions have meaning beyond presentation. Preserve the existing availability and submission boundaries, and keep temporary UI state separate from persisted data.

Adding a node

1. Check whether an existing component or block can express the requirement.
2. Add the node implementation and JSON definition only if necessary.
3. Register it in UiNodeRenderer and extend only the bindings/actions it needs.
4. Verify rendering, input, and error states on Android.
5. Align shared contracts or renderers when used by that node.

Follow the existing MaterialTheme and DataCollectionTheme path. Replacing entire screens with hardcoded Compose flows is not a prerequisite for documentation or routine configuration changes.

Component reference

Use the Component catalog (Korean) as a reference when composing research app screens. This is an external reference site; for Android use, check the current JSON nodes, renderer, and binding implementations alongside it.

The reference site currently requires ChatGPT sign-in.