Comment on page
Form
Form component overview
Form component is used to quickly update the records or add new records to your data base.
Method | Description |
|---|---|
submit() | submits the form |
setValue(value: Object) | sets value of the form, key: value object |
setSubmitButtonDisabled(disabled:boolean) | sets submit button state (enabled/disabled) |
reset() | resets the form |
Triggers allow you to launch certain actions upon 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 |
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.
- 1.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}}.
Configuring an update action
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.
Assigning load data action on success trigger
Let's create a form for new records submission.
- 1.Place a form component near the table. The structure will be inherited from the table already.
- 2.Click the green button Configure submit handler to create a new action.
- 3.Select the Update Row action action type and choose the corresponding table.
- 4.Configure new record fields by referencing to the new values as
{{ui.form.value}} - 5.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.
If you need a single form to both add and update the data, follow this guide:
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.
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!"}:
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.
The following is an example of how to use the component:
[
'full_name',
{ prop: 'id', type: 'number', color: 'danger' },
{ prop: 'full_name' },
{ prop: 'avatar', type: 'image' },
{ prop: 'email', type: 'link' },
{
prop: 'email',
type: 'button',
text: '\{\{value\}\}',
triggers: {
buttonClick: [ "console.log('Button click', \{\{value\}\})" ],
},
},
];
Default type if not specified - string. Required key - prop.
Last modified 1mo ago