Form Layout

Configuring form layouts allows administrators to change the form views for the various business tasks. Creating separate form views with sets of fields and widgets is useful for different processes or user roles.

Form view displays the elements in the order below:

• Form sections containing:
  • form fields displayed in the main area

  • widget instances
    

    The Default section is displayed first.

• Form links UI actions .
• Form button UI actions .
• Related Lists area.

Every SimpleOne system table has a Default form view that administrators can configure using the form layout features.

Configure form layout

To change a form layout, follow the steps below:

1. On the record form, enter the hamburger menu and select Configure → Form → Layout to open the Form layout configure menu.
2. In the Form view and section area, the View name displays the view you entered this menu from. If you want to change another form view, select it in this field.
3. Configure your form view by the following actions:
   1. Configure a set of fields in the Default and custom sections.
   2. Add new form sections.
   3. Split sections into vertical columns.
4. Click Save.

Create a new form view

To create a separate view, please complete the steps below:

1. On the record form, enter the hamburger menu and select Configure → Form → Layout to open the Form layout configure menu.
2. In the Form view and section area, click Add new next to the View name field.
3. In the modal window appeared, enter the desired view name and click Create.
   
4. Configure the fields to display by moving them from the Available to Selected layout area.
5. (Optional) Use the Section option to add more form sections by clicking Add new if you need.
6. Click Save to apply changes and leave the configure menu.

Please note that when a new form view is created, it is empty by default.

Also, please note that the Preview view name is reserved for the record preview form. This form looks like this:

Example

You have created a Preview form for the Timezone table and added some fields like shown in the screenshot above (these are the Title, Name, UTC Offset, Active, and Updated at fields). And by clicking on the field referenced to the Timezone table on other forms (for example, User, Employee, Schedule, and so on), the timezone record Preview form appears.

Configure a form section

Sections are needed for separating the fields in a sensible and visual way.

The Default section displays the table fields grouped on the main area of the form (in the Section menu, this option is always on top of the sections list). Custom sections display a set of fields in separate tabs in the bottom of the form above the Related Lists.

Create a new section

To create a new section and fill it with fields, follow the steps below:

1. On the record form, enter the hamburger menu and select Configure → Form → Layout to open the Form layout configure menu.
2. On the Form view and section area, click Add new next to the Section field.
3. In the modal window appeared, enter the desired section name and click Create.
   
4. With the created section selected, configure the fields to display by moving them from the Available to Selected layout area.
5. Click Save to apply changes and leave the configure menu.

Your newly created section is displayed on the form.

Split the section fields

You can configure how fields and widgets are placed on the form . By default, they go from top to bottom in one col umn. Begin split and End split are not necessary for a form layout organized in one column. If you need to rearrange them in two or more columns, you can use splitters for this. 

To split the fields into columns, follow the steps below:

1. Click Begin split to add the |-begin-split-| element to the Selected layout area. Move this element to specify where the split area starts.

2. Click End split to add the |-end-split-| element to the Selected layout area. Move this element to specify where the split area ends.

3. Click Split to add the |-split-| element to the Selected layout area. Move this element between |-begin-split-| and |-end-split-| to set the place where a column ends.

4. (Optional) Add more |-split-| elements in the area between |-begin-split-| and |-end-split-| , if you want to rearrange form fields in more than two columns.
5. (Optional) Add more sets of  |-begin-split-| ,  |-split-| and |-end-split-| elements within the existing ones to create a nested splitting. For this, put the elements between the existing  |-begin-split-| and |-end-split-| . These splits create subcolumns within a column. The number of nested splittings is unlimited.
6. Click Save to apply changes and leave the configure menu.

In the example below, the form is divided into two columns:

1. Table, Column Type, Title, Column Name.
2. Active, Read Only, Mandatory, Full Text Search, Display by Ref, Unique.

Within the second column there is an nested splitting with two columns:

1. Read Only, Mandatory;
2. Full Text Search, Display by Ref.

Complex form layout configuration

In the following example, we examine a case of creating a complex form layout. Dashed lines in the screenshots below represent the |-split-| element.

Basic layout structure is the following:

You can create unlimited number of columns or divide columns within other columns as in the picture below. A complex form layout is broken into component parts. You can use this scheme to create your own complex layout.

Configure Related Lists area

Related lists appear at the bottom of the forms and show records in tables that have relationships with the current record. For example, on the change User form, related lists can display approval User Role  lists; on the Task form, they can display SLA indicators with the relevant values, and so on, depending on the business needs.

To configure related lists, complete the steps below:

1. Open the form you need to reconfigure.
2. Enter the hamburger menu on the left side at the bottom of the page.
3. Select Form Layout → Related Lists.

You can add or remove related lists the same way as the fields.

Relationships configuring

In SimpleOne, apart from regular related lists, there are also scripted relationships implemented too. Unlike the related lists, scripted relationships use scripts to query to the related tables.

To learn more about how to configure a scripted relationship, please refer to the Scripted Related Lists article.

Form view of a VCS record

The VCS record form aggregates all the elements of the form related to it: UI form element (sys_ui_form_element), Form section (sys_ui_form_section), Related list (sys_ui_related_list), and Related list element (sys_ui_related_list_element). They are stored in the JSON (Copy) field. 

See a scheme content of a VCS record below:

A JSON (copy) field stores the data about all the related elements in the following way:

 "title": "Default",
    "policy": "Changed",
    "sys_id": 155964310500000007,
    "user_id": null,
    "table_id": 155931135900000083,
    "aggregate":
    {
        "sys_ui_form_element":
        {
            "156863988112688893":
            {
                "sys_id": 156863988112688893,
                "position": 7,
                "column_id": 155931135900001081,
                "formatter": null,
                "_TABLE_NAME_": "sys_ui_form_element",
                "sys_created_at": "2019-09-30 00:00:00",
                "sys_created_by": 155931135900000001,
                "sys_updated_at": "2022-11-10 12:59:02",
                "sys_updated_by": 155931135900000001,
                "form_section_id": 155964310500000007,
                "displayable_path": null,
                "widget_instance_id": null,
                "form_split_element_type": null
				}
   "sys_ui_related_list":
        {
            "156931267516865423":
            {
                "title": "Default",
                "sys_id": 156931267516865423,
                "form_id": 155964310500000007,
                "user_id": null,
                "table_id": 155931135900000083,
                "_TABLE_NAME_": "sys_ui_related_list",
                "sys_created_at": "2019-09-30 00:00:00",
                "sys_created_by": 155931135900000001,
                "sys_updated_at": "2020-04-27 14:50:56",
                "sys_updated_by": null
            }
        }

/