Skip to content

Task list

Component

Name Description
component task
filter options - filter configuration to match the query
dataSource source id either a query object or a data source
kind dispatch, script
children Children will be matched based on their condition rule and the appropriate child will be displayed
onClick action used to create the task; use 'context' action target for a create or update action related to the task
options options

Options

Name Description
transition bounceIn, flipX, flipY, fade, scale, none - animation used when swiching components
curveIn transition curve out
curveOut transition curve out
waitForReady true, false - wait for the query to complete before displaying, default is true
limit number - this can also be provided via the query
duration number - duration of the transition
exists edit, view, create - what do do when there is an existing dispatch match
{
  "component": "task",
  "text": "EXACT",
  "dataSource": "dayTasksQuery",
  "id": "dayTasks.Exact",
  "transition": "flipX",
  "filter": {
    "tracker": "exact"
  },
  "classes": {
    "root": "task-line"
  },
  "onClick": {
    "target": "context",
    "options": {
      "tracker": "exact"
    }
  },
  "children": [
    {
      "component": "some-component",
      "condition": {
        "rule": "props.count > 0"
      }
    },
    {
      "component": "some-component",
      "condition": {
        "rule": "props.count == 0"
      }
    }
  ]
}

Example using a script data source

{
  "component": "task",
  "dataSource": "status",
  "transition": "none",
  "kind": "script",
  "options": {
    "duration": 1200
  },
  "children": [
    {
      "component": "icon",
      "icon": "fal fa-check",
      "size": 10,
      "shape": "circle",
      "showBorder": true,
      "condition": {
        "rule": "props.variants.{data.variant.handle} == true"
      }
    }
  ]
}