Form

Overview

The Form component is used to quickly update or add new records to your database.

Properties

Methods

Triggers

Working with the component

Best practices

Check out these articles to learn how you can utilize the Form component in different scenarios👇

Form & field settings

View/Edit settings

In the Edit settings section, for any editable field you can specify the Input mask you need (for example, Uppercase/lowercase) and the Field tooltip. These settings will be applied to data display if the Do not allow editing this field checkbox is NOT selected.

Fields validation

You can validate Form fields by clicking on the necessary field and navigating to the Edit settings section. There, you can set up the Regexp pattern and the error message, as well as set the min/max length for the field.

Setting default values for Form fields

It's possible to configure default values for any Form field. You can set them up in the component's Data property using the following format: {field: 'default_value'}, for example, {text: 'Hi!'}.

Changing an input value while editing

In some cases, it may be necessary to predefine the input value or change it depending on another field's value. To do so, you can use the Value property in the field's Edit settings section. It works similarly to the Input component's default Value field.

Let's review a couple of examples of using the Value field:

• Automatically populate the Initials field

Imagine you have a Form with some default data and the following fields: Id, First name and Last name. Now, you also want to automatically display the initials of the user.

1. Add a new Initials field to the Form - select the String type.

2. Now, expand this field's Edit settings section and add the following code to the Value property:

{{parent.value.first_name?.[0] || ''}}{{parent.value.last_name?.[0] || ''}};

That's it! Now, when you fill in the First and Last name fields, the value of the Initials field will be automatically updated depending on your input.

• Change Select options depending on another field's value

Let's say you have a Form with the Season and Month fields and you want to display only the months corresponding to the specified season. Here's how you can configure this:

1. Create an action of the JavaScript Code type (getAvailableOptions here) and add the following code:

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

1. Now, select the Form's Month field, change its type to Select/Tag, and add the following code to the Options property in the General settings section (in the JS mode):

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

Done! Now specify the season in the Form and check the available options for the month.

Dynamic structure configuration

It's possible to use the JS mode for dynamic configuration of the Form's structure. To enable the mode, you just need to click the button next to component Structure in the right side panel.

You can specify Form structure using an array of objects and strings. If an object is used, it can define the following properties:

• 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, text, and others.

This is an example of a dynamic structure configuration:

[
  '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\}\})" ],
    },
  },
];