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:

pageCreate 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 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:

[
  '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.

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.

Value field in the Edit settings

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.

1. Create a form with default data and keep id, first_name, last_name fields;

2. Create a new field with initials prop and string type;

3. Find the Value field in the Edit settings group and fill it with {{parent.value.first_name?.[0] || ''}}{{parent.value.last_name?.[0] || ''}};

4. 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 1 example

Case 2: Change select options depending on another field's value.

1. Create a getFormData action with the Code step and the following data to it:

return { id: 1, season: 'Winter', month: 'December' };

2. Create a getAvailableOptions action with the Code step and set the following to it:

return {
  Winter: ['December', 'January', 'February'],
  Spring: ['March', 'April', 'May'],
  Summer: ['June', 'July', 'August'],
  Autumn: ['September', 'October', 'November'],
};

3. Create a form component and set the getFormData action to the Data field;

4. Select the month field and change the type to Select;

5. Find the Options field in the General settings group, enable js-mode, and fill it with next code:

{{actions.getAvailableOptions.data?.[parent.value.season] ?? []}}

6. Select the form and try to change the season value and check available options for the month column.

Case 2 example