Form
Last updated
Last updated
The form is a versatile widget for the input of a wide range of data types and formats.
It can build forms with any number of fields and collect the data as entered by the app users.
Column count:
The Column Count can be modified for each screen type, so different screens can have a different number of columns.
The other style settings are automatically set on all screens at once for consistency.
Label Mode: choose between 4 style options for the field labels.
Label Location: determines the position of the label, but only for the "Outside" label mode.
Form fields come in 16 different types, each with different accepted inputs.
Editor Type | Data type |
---|---|
Text Box | string |
Select Box | string |
Number Box | number |
Check Box | bool |
Password | string |
Tag Box | array |
Date/Time Select | date |
Color Select | number (hexadecimal) |
Location Select | geojson |
Radio Group | string |
Text Area | string |
Slider | number |
Switch | bool |
Some types of field inputs have extra options such as an option list or a default value.
Each field can be set as required and show an error message when it’s empty.
When a form is created, the Data Settings
tab has a default Group
with a default text field.
Fields can only be created inside of a group.
If theGroup Label
is filled, it will show as a title on the app UI.
Make sure to label groups in a tab view. Unlabeled groups will appear as empty tabs.
The form widget has a set of unique properties when linked to a function.
The default option when connecting the form to an input, it reads the form data as specified in the options.
Returns the result of validation in this format:
The isValid
variable can be used, for example, to prevent the app user from submitting a form without having completed the required field.
Some types of form fields have a list of values to select from. One way to set these options is using the set options
property. Link an output to form and then select the “set options” property.
Compared to writing the options in the Data Settings
, this method allows to set the options dynamically from the logic board.
Automatically fills a specified form field with a value passed to the function.
The call validate
property checks whether the information in the form is valid (required fields are filled, the inputs are in the correct formats etc.). After triggering a function with this property, the results can be accessed with the from validationResult
property.
The call clear
property clears all the form inputs when triggered.