Form
Form component overview
Form component is used to quickly update or add new records to your database.
Methods
Method | Description |
---|---|
| submits the form |
| sets value of the form, key: value object |
| sets submit button state (enabled/disabled) |
| resets the form |
Triggers
Triggers allow you to launch certain actions based on different events.
On Init | Calls for an action on component initialization, e.g., page refresh |
On Submit | Calls for an action as you submit the form |
On Click | Calls for an action as you click on a form |
Updating data from the form
Let's explore the case when you need to update the data from the form. We suppose that you already have data loaded into a table.
Place a form component near the table. You will notice that the form has inherited the same structure as your table.
2. As the next step, you need to link the form with the table, so that upon a row selection, you can see the record's data in the form. In order to do that, in the Data field of the form, specify the following variable: {{ui.tableName.selectedRow.data}}
3. Let's configure the update action. You will notice a green button Configure submit handler near the On Submit trigger. Click the button, and you'll be redirected to the actions pane.
4. Select the Update Row action type and choose the corresponding table.
5. Configure the fields to be updated. In our case, we are making all the fields editable. To send all the records to the data source, switch to JS
mode, and specify the following reference {{ui.yourForm.value}}
. Next, select the unique record identifier and refer to it as {{ui.yourForm.value.selected_field}}
, e.g. {{ui.productsForm.value.productCode}}
.
6. To complete the action, go to the Triggers tab and set the load data action On Success trigger, so that the data in a table is updated with every record's edit.
Adding new records from the form
Let's create a form for new records submission.
Place a form component near the table. The structure will be inherited from the table already.
Click the green button Configure submit handler to create a new action.
Select the Update Row action action type and choose the corresponding table.
Configure new record fields by referencing to the new values as
{{ui.form.value}}
To complete the action, go to the Triggers tab and set the load data action On Success trigger, so that the data in a table is updated with every new record added.
If you would like to reset the form after the submission, check the Reset on submit option.
Adding a single form to add and update records
If you need a single form to both add and update the data, follow this guide:
Create a single form to add and update dataFields validation
You can validate any of the form's fields in its' Edit settings. From the right menu, click on the necessary field and scroll to its Edit settings. You can set up its' Regexp pattern and Regexp pattern error message, as well as the min/max length for the field.
Setting default values in the form's fields
If you need to set some form fields to default values, in the Data field of the form, specify the code following the pattern {field: 'default_value'}
, e.g. {text: 'Hi!"}:
Dynamic structure
The Form
component allows dynamic configuration of its structure through the use of JavaScript mode.
Click a JS button next to the rows section to turn the dynamic mode.
Form structure can be specified using an array of objects or strings. If an object is used, it can define properties such as
prop - data property to display
type - one of the available types: 'number', 'string', 'text', 'image', 'link', 'button', 'contextMenuButton', 'boolean', 'currency', 'date', 'datetime', 'file', 'jsoneditor', 'time', 'select', 'multiselect', ''
primaryKey, color, and text, among others.
A list of all supported properties can be found here.
The following is an example of how to use the component:
Default type if not specified - string. Required key - prop.
Change an input value while editing
Sometimes you may need to predefine the input's value or change it depending on some other input. For this purpose, you can use Value
field in the Edit settings
group.
It works similarly to the default Value
field in the Input component. Here is an example of using the Value
field:
Case 1: Fill the "initials" input with the first letters of the first and last name.
Create a form with default data and keep
id
,first_name
,last_name
fields;Create a new field with
initials
prop andstring
type;Find the
Value
field in theEdit settings
group and fill it with{{parent.value.first_name?.[0] || ''}}{{parent.value.last_name?.[0] || ''}}
;Select the form and try to edit your first and last name - the value of the initials input will be updated automatically depending on the values of the first and last names:
Case 2: Change select options depending on another field's value.
Create a
getFormData
action with theCode
step and the following data to it:
Create a
getAvailableOptions
action with theCode
step and set the following to it:
Create a form component and set the
getFormData
action to theData
field;Select the
month
field and change the type toSelect
;Find the
Options
field in theGeneral settings
group, enable js-mode, and fill it with next code:
Select the form and try to change the
season
value and check available options for themonth
column.
Last updated