Form

A widget that would gather and store entries from the child widgets. Use this widget to create custom form entry (with custom looks and feel, etc). The data entry by users will be used in data store and can be accessed via data. template or conditional. This widget will not actually perform CRUD, you should include a button or something that would perform the action itself. This widget can be used to create tracker, trigger, user, etc.

This widget will used Flutter's Scaffold and render the header widget as part of the AppBar. The AppBar widget include an action to the top left to allow user to cancel the action so most likely this widget should be the first widget in the layout. You should include a postAction with a target to close the current layout after user pressed the header widget.

The widget that launch this form (which's most likely a query) should included a way to refresh. See widget for reference (e.g. for query widget, you should include a refresh action so that when user submitted, the layout will be refreshed.)

Component

Name	Description
component	form
header	a widget to be displayed at the top right of app bar. Usually this should be the Submit button.
footer	a widget to be displayed at the bottom (bottom bar), for example a delete button. This is optional
children	a list of support widgets that support user entry. Support widgets are text-entry, chooser, toggle-button, dropdown with more to come. See each widgets for configuration details. The widget should include id parameter so that we can used this to store the data. The id of widget can be nested, e.g. attributes.profile.name, or none nested, e.g. name. If nested, changes will update the tail.

Examples

Create a trigger

{
    "ux": {
        "component": "form",
        "header": {
            "component": "button",
            "text": "Submit",
            "kind": "outlined",
            "validation": {
                "rule": "data.name exists"
            },
            "onClick": {
                "target": "createOrUpdateUserTrigger",
                "options": {
                    "name": "{data.name}",
                    "cron":"{data.cron | toCron}",
                    "timezone": "{data.timezone}",
                    "behaviorHandle": "{data.behaviorHandle}"
                }
            },
            "postAction": {
                "target": "close"
            }
        },
        "children": [
            {
                "component": "chooser",
                "kind": "dropdown",
                "id": "name",
                "hint": "Trigger name",
                "options": {
                    "items": [
                        {
                            "text": "Some name",
                            "value": "Some name"
                        },
                        {
                            "text": "Other name",
                            "value": "Other name"
                        }
                    ]
                }
            },
            {
                "component": "text-entry",
                "kind": "text",
                "id": "behaviorHandle"
            },
            {
                "component": "text-entry",
                "kind": "time-picker",
                "id": "cron"
            },
            {
                "component": "text-entry",
                "kind": "timezone",
                "id": "timezone"
            }
        ]
    }
}

Update a trigger

Action to launch form entry to update a trigger

{
    "component": "button",
    "kind": "round",
    "shape": "circle",
    "icon": "fal fa-pen-to-square",
    "onClick": {
        "target": "layout",
        "options": {
            "id": "edit-trigger",
            "hideAppBar": true,
            "parameters": {
                "id": "{data.id}",
                "status": "{data.status}",
                "name": "{data.name}",
                "description": "{data.description}",
                "behaviorKind": "{data.behaviorKind}",
                "behaviorId": "{data.behaviorId}",
                "triggerKind": "{data.triggerKind}",
                "triggerId": "{data.triggerId}",
                "triggerHandle": "{data.triggerHandle}",
                "behaviorHandle": "{data.behaviorHandle}",
                "cron": "{data.cron | cronAsTime}",
                "timezone": "{data.timezone}",
                "environment": "{data.environment}",
                "userId": "{data.userId}"
            }
        }
    }
}

Form to update a trigger

For this example, the form entry is part of layout handle edit-trigger

{
    "ux": {
        "component": "form",
        "header": {
            "component": "button",
            "text": "Submit",
            "kind": "outlined",
            "onClick": {
                "target": "createOrUpdateUserTrigger",
                "options": {
                    "id": "{data.id}",
                    "status": "{data.status}",
                    "name": "{data.name}",
                    "description": "{data.description}",
                    "behaviorKind": "{data.behaviorKind}",
                    "behaviorId": "{data.behaviorId}",
                    "triggerKind": "{data.triggerKind}",
                    "triggerId": "{data.triggerId}",
                    "triggerHandle": "{data.triggerHandle}",
                    "behaviorHandle": "{data.behaviorHandle}",
                    "cron": "{data.cron | toCron}",
                    "timezone": "{data.timezone}",
                    "environment": "{data.environment}",
                    "forUser": "{data.userId}"
                }
            }
        },
        "children": [
            {
                "component": "chooser",
                "kind": "dropdown",
                "id": "name",
                "hint": "Trigger name",
                "options": {
                    "items": [
                        {
                            "text": "Some name",
                            "value": "Some name"
                        },
                        {
                            "text": "Other name",
                            "value": "Other name"
                        }
                    ]
                }
            },
            {
                "component": "text-entry",
                "kind": "text",
                "id": "behaviorHandle"
            },
            {
                "component": "text-entry",
                "kind": "time-picker",
                "id": "cron"
            },
            {
                "component": "text-entry",
                "kind": "timezone",
                "id": "timezone"
            }
        ]
    }
}

Nested example

{
    "component": "form",
    "header": {
        "component": "button",
        "text": "Save",
        "onClick": {
            "target": "popupMessage",
            "options": {
                "text": "Updated value is {attributes.profile.name}"
            }
        }
    },
    "children": [
        {
            "component": "text-entry",
            "id": "attributes.profile.name",
            "options": {
                "seed": "{attributes.profile.name}"
            }
        }
    ]
}