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"
}
}
]
}