Form

Form component overview

Form component is used to quickly update the records or add new records to your data base.
Methods
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
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
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.
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
Adding new records from the form
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.
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 data
Fields 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 rows
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', '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.

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

Row context referencing

Pop-up form

Last modified 19d ago

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