Page History

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:Default section that contains the
  • form fields displayed in the main area
  ;
  • Custom sections, each displayed as a tab and containing a separate set of record fields;
  • Related lists area;
  • URL actions area;
  • • widget instances

      Tooltip
      onlyIcon true appendIcon info-filled iconColor blue
      Refer to the Add widgets to a form article to learn more.

      
      

      Info
      The Default section is displayed first.

      
      

  • Form links UI actions .
  • Form button UI actions .
  • Related Lists areaUI actions of the form types.

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

  tip

  Role required: admin.

  
  

  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  to open the Form layout configure menu.
  2. In the Form View view and Sectionsection area, the View Name 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.
  5. Configure the related lists displayed.
  Click Save

  Tip
  To configure the Related Lists displayed on the form, in the hamburger menu Image Added navigate to Configure → Related List → Layout. See Related Lists to learn more.

  
  

  Info
  In SimpleOne, you can create separate form views with sets of fields for different processes or user roles. The system system stores all the list and form views created along with their layout elements as table records. To See List and form elements to learn more, follow the link.

  Create a new form view

  ---

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

  1. On the record form,  enter enter the hamburger menu Image Added and select Configure → Form → Layout to  to open the Form layout configure menu.
  2. On the In the Form view and section area, click Add Newnew next to the View Namename field.
  3. In the modal window appeared, enter the desired view name and click Create.
     Image RemovedImage Added
  4. Configure the fields to display by moving them from the Available to Selected heapselect 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.

  Note
  If you leave the configure menu without clicking the Save button, then the pop-up window will appear. Click OK to save changes or click Cancel to discard them.

  Please note that when a new form view is created, it is empty by default. Mandatory fields and fields with a default value will appear on a newly created form. 

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

  Image Removed

  To configure a preview form view, please complete the steps below (you need to have admin privileges to perform this):

• Navigate to a table form you need to add a preview form.
• Add a new form view as described below and give it a Preview name.
• Fill it with desirable fields and click Save.

Image Added

Info
Refer to the Customizing portal and agent views article to learn how to change the set of displayed fields

After that, when clicking on a record in a referenced field related to this table, you will see a preview form containing brief information about the referenced record in the read-only mode

.

Example

You have created a Preview a Preview form for the Incidents Timezone table and have added some fields like shown on in the screenshot above (these are the Callerthe Title, State Name, Subject UTC Offset, Active, Company, Opened at, and Contact type fieldsand Updated at fields). And by clicking on the records related to the Incident table in field referenced to the Timezone table on other forms (for example, Master Incident, Caused by Incidents, User, Employee, Schedule, and so on), the incident preview timezone record Preview form appears.

Configure a form section

---

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

The The Default section  section displays the table fields grouped on the main area of the form (In 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 URL actionsthe Related Lists.

Image RemovedImage Added

Info

The Available heapselect Available  layout area contains all the table fields that can be embedded in the form by adding them to the Selected heapselectSelected layout area. Move elements by drag-and-dropping or using the Image Modified and Image Modified  buttons. To remove or add all the fields, click the  Image Modified  or Image Modified buttons. To move several elements in a row, select them with the Shift key pressed and drag-and-drop from the Available heapselect to layout area to the Selected one. To move several scattered elements at once, select them with the Ctrl key pressed and drag-and-drop from the Available heapselect to layout area to the Selected one.

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  to open the Form layout configure menu.
2. On the Form view and section area, click Add New Add new next to the to the Section field.
3. In the modal window appeared, enter the desired section name and click Create.
   Image RemovedImage Added
4. With the created section selected, configure the fields to display by moving them from the Available to Selected heapselect layout area.
5. Click Save to apply changes and leave the configure menu.

Note
If you leave the configure menu without clicking the Save button, then the pop-up window will appear. Click OK to save changes or click Cancel to discard them.

Your newly created section is displayed on the form.

Info
title Positioning the sections
You can change sections order by drag-and-dropping them in the Section menu or clicking Image Modified and Image Modified buttons.

Split the section fields

---

You can configure how fields and widgets are placed on the form

Tooltip
onlyIcon true appendIcon info-filled iconColor blue
Refer to the Add widgets to a form article to learn more.

. By default, fields on the form 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 , for example, in two or more columns, then you can use splitters for this. 




Image RemovedImage Added

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

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

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

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

4. (Optional) Add more the  |-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.

Note
If you leave the configure menu without clicking the Save button, then the pop-up window will appear. Click OK to save changes or click Cancel to discard them.




Tip
If you omit the |-begin-split-| element, all fields above the |-split-| element will be considered the rightmost column in the Selected layout area (as if there is a  |-begin-split-| element above them). Please note that the  |-begin-split-| element is obligatory for nested splittings.




Info
The splitters appear at the bottom of the heapselectthe Selected layout area if no fields are highlighted. If a field is highlighted, the split element appears right after it. Drag-and-drop or using the Image Modified and Image Modified buttons to move these splitter elements.

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.




Image Added

Image Added

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:

Section
Column Image Added Column |-begin_split-| Phone Link |-split-| Date Price |-end_split-|




Tip
It is easier to grasp the idea if you imagine every separate block of columns as boxes which sides are the |-begin_split-| and the |-end_split-| elements. So, basically you put boxes inside other boxes.

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.

Image Added

Panel
|-begin_split-| Field 1 |-begin_split-| Field 2 Field 3 Field 4 |-split-| Field 5 Field 6 Field 7 |-end_split-| |-split-| |-begin_split-| |-begin_split-| Field 8 |-split-| Field 9 Field 10 |-end_split-| Field 11 Field 12 |-split-| Field 13 Field 14 Field 15 Field 16 |-end_split-| |-end_split-|

Configure Related Lists area

---

Related lists appear at the bottom of the forms

Image Removed

Configure Related Lists area

Related lists appear on forms and show records in tables that have relationships with the current record. For example, on the change request User form, related lists can display approval tasks lists User Role  lists; on the incident Task form, they can display SLA indicators with  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 Image Added on the left side at the bottom of the page;.
3. Select Form Layout → Related Lists.

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

Info

When the new related list is added, the  Default  list view of the related table is copied and used as a view of the related list. You can set up the view later. When a child table is created, its form and list views are copied from a parent table, taking into account views of sections and related lists. You can set up these views later. Refer to the  Form Layout  and  List Layout  articles to learn more.

Relationships configuring

In SimpleOne, apart from regular related lists, there are also relationships scripted relationships implemented too. Their difference is, unlike Unlike the related listlists, in relationships, the queries to the related tables are performed by the scriptscripted relationships use scripts to query to the related tables.

To learn more about how to configure relationshipsa 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:

VCS Record UI Form View (sys_ui_form) UI Form Section 1 sys_ui_form_section Form Element field sys_ui_form_element Widget Instance sys_widget_instance ... Form Element field sys_ui_form_element UI Form Section N sys_ui_form_section Form Element field sys_ui_form_element Widget Instance sys_widget_instance ... Form Element field sys_ui_form_element Related List (sys_related_list) List Element 1 sys_ui_related_list_element     List Element N sys_ui_related_list_element

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

Expand
title JSON (Copy) field
Code Block title JSON (Copy) field linenumbers true "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 } }

/