Configure the layout of a form in the Form Designer

1 Context

🧠

First you are probably asking yourself what a Form Designer is, since we have only spoken about the Screen Designer before. The Form Designer is not much different. In the the Form Designer we can look into separate objects in more depth and open a dedicated page to work on them just like when designing the entire screen. Now we will structure and improve the appearance of the form that was added in the last step.

Form Structure Explanation

The Form Object type allow the users to organise the fields with three different types of structures:

“SimpleSwatBlock” -> Is used to group data fields
“SimpleSwatNewColumn” -> Is used to align data fields with each other
“SimpleSwatFieldset” -> Is used to group data fields in a foldable group

2 Result

3 Step by step guide

In this example we will select the gear wheel of the orderform "OrderForm_<YourName>/form" and then select "Open Object Master". Now you have opened a Designer for a Form Object

Search in the tab “Library of Objects” for the “SimpleSwatBlock” and drag & drop it on the “ShipDate” field (that it way it is positioned above the field).
Search in the tab “Library of Objects” for the “SimpleSwatFieldset” and drag and drop it on the first “SimpleSwatBlock” field.
Search in the preview for the data fields “CustNum”, “Ordernum”, “ShipToID”,”WarehouseNum”,”BillToID”,”PO” and drag and drop them on the “SimpleSwatFieldSet”.
Search in the tab “Library of Objects” for the “SimpleSwatNewColumn” and drag and drop it between the third and fourth Data field in the fieldset. Now the data fields are aligned to each other
Select the object “SimpleSwatFieldset” and search in the “Attributes” panel for the attribute “LABEL” and insert the value -> “Base Order Information”.
Organise the rest of the fields in two more blocks and fieldsets as seen in the following screenshots. Remember to also provide a title to the fieldsets as seen in the screenshot on the right

You can test the form in an empty screen witht the option “Launch Object in Blank Screen”

A Warning would appear indicating that some errors can occur if the form has logic related to a specific screen. For our case, nothing will happen as we haven’t added any custom logic to the form. Just click in the “Yes” option to see the Form

Close the Form Designer with the small x icon

4 Explanation

With the different structuring options, you can customize the form according to your requirements. You can group, separate, and make them collapsible. In addition, there are other objects to design the form. For example the block that is used to control the responsiveness and line breaks of the data fields.

5 Helpcenter Article

Form Block

Form blocks can be created in Build.One with the object SwatBlock and can be used within a ‣ to group other form-objects together or to visually add empty space to the form.

helpcenter.build.one

Fieldset

The FieldSet control is used to group multiple form fields together in a labeled collapsible/expandable area. This helps to organise and group the form fields for functional reasons. The screenshot below shows an example of a form with 2 fieldsets:

helpcenter.build.one

Form Columns

Form columns can be created in Build.One with the object SwatNewColumn and can be used within a ‣ to organise the form in columns visually.

helpcenter.build.one