Screen layout

Component documentation

Structure

Document object

variant: screen | wizard | tabs (default is screen)
data
- sources: array of dispatch queries
- attributes: array of attribute queries
- user: user query that returns a single user (or passed in)
- dispatch: dispatch query that returns a single dispatch (or passed in)
ux (the root ux object)
- singular root object that contains other objects
fetchPolicy
- set data source fetch policy (cacheFirst, networkOnly, noCache), default to networkOnly
pullToRefresh
- if set to true, user can pull the page down to force a refresh (load from network), default to false

Component object

styles: object
- root
  - actual styles
- [sub component]
  - actual styles
component: enumeration
direction: column | row
span: 1-12 if applicable
condition:
- rule: ParseCondition rule
- action (if true): include | exclude | disable (default = include)
options: component specific options
child: single component object
children: array of component objects (ignored if child is present)

Breakpoints

Breakpoints are platform/device specific properties. Device specific properties override default properties, platform specific will override device specific properties. For example, span-flutter will have higher precedent than span-md, while span-md has higher precedent than span property

Name	Description
span	number of grid space span for all screen size and platform
span-sm	number of grid space span for`md` screen size
span-md	...
span-flutter	span for flutter, for other platform can add `span-[platform]`
*	property for all screen size and platform
*-[platform]	platform specific property

Example

{
  "variant": "screen",
  "data": {
    "sources": [
      {
        "id": "<some id>",
        "query": "current user"
      }
    ]
  },
  "ux": {
    "styles": {
      "root": {
        "backgroundColor":"white" 
      }
    },
    "component": "grid",
    "children": [
      {
        "component": "text",
        "condition": {
          "rule": "true",
          "onClick": "exclude"
        }
      }     
    ]
  }
}