The <form> tag is a widget displaying a record form when necessary parameters (such as the table, form view, and record ID) are specified. It allows users to interact with the record form, while maintaining the usual form behavior. It also supports the functionality of widgets added to the form.

Structure

This widget includes the following elements:

  1. The embedded widget that contains the form elements.
  2. The header block:
    • A header can be taken from the column with the Display by ref checkbox selected.
  3. The section block:
    • The Default section should be the first in the section list if there is more than one.
    • Every widget section is linked to the corresponding form section and has its own title. 
    • This block is mandatory.
  4. The footer block that contains UI actions (buttons and others).

Elements 

Form widget elements, such as form elements, can be of different types. The widget support functionality of all field types used in forms (such as properties, behavior, scalar type, and others).

  • Widget elements display date and time in the user timezone.
  • The widget elements that contain the Translated Text field type (such as table and column titles, choice options) display the values in the current user's locale.

Attributes

To create a dynamic form, use the following attributes:

Attribute

Type

Mandatory

Description

classStringNSpecify a CSS class name defined in the CSS field of the widget.
nameStringN

This attribute stores the form name.

Define the form name within the template in the Template field:

<Form tableName="{data.table_name}" sysId="{data.record_id}" name="custom"></Form>

Then call it in the widget client script:

const builtInForm = s_widgets.getForm('custom');
await builtInForm.save();


tableNameStringYSpecify the table name.
viewStringNDefine a view name of the table, for example, Default.
saveStringN

Add a Save button on the form with the customized text (see the code example below).

Use this attribute when it is impossible to use the UI actions due to any reasons (the uiActions attribute is set to false).

titleHideBooleanNSet the value to true to display the form header by default. The default value is false.
uiActionsBooleanNSet the value to true to make UI actions available to use. Otherwise, their usage is prohibited (except for the Save button specified by the save attribute).
userScriptsBooleanNSet the value to false to disable the client scripts of the selected table. The default value is true.
sysidStringN

Specify the ID of the table record. The table should be specified first via the tableName attribute.

If the sysid attribute is not set, a new record form is displayed.


Example:

<form
    name="leadForm"
    tableName="crm_leads"
    view="Modal Form Disqualify"
    uiActions="false"
    userScripts="true"
></form>
<div class="buttonsModalQualify">
    <button buttonType="unstyled" event-click="window.s_widget_custom.cancel()">{data.cancel}</button>
    <button disabled="{data.isDisabled}" buttonType="primary" event-click="window.s_widget_custom.save()">{data.save}</button>
</div>

The template above displays the following element on the page::

Child tag IndicatePresence

Use the <IndicatePresence> tag with the <Form> tag to add the presence indication widget to a form.

To display the widget, the Indicate presence checkbox must be selected on the table form (the indicate_presence attribute is true).

Available attributes:

AttributeTypeMandatoryDescription
tableNameStringY

Specify the table name. This value must be the same as the value of the tableName attribute of the <Form> tag.

recordIdStringY

Specify the ID of the record. This value must be the same as the value of the sysid attribute of the <Form> tag.

Example:

<IndicatePresence tableName="{data.table_name}" recordId="{data.record_id}"></IndicatePresence>

The code above displays the following element on the page: