Skip to content

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 formd 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",
          "action": "exclude"
        }
      }     
    ]
  }
}