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.

2 Result:

3 Step by step guide:

To do so you go to the "Layout design" panel and select the object in question, you want to look at in more detail.

💡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, which we call the "Form Designer"

Here you can use different kinds of structure possibilities:

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

👋 Search in the panel “Browse catalog of objects” for the “SimpleSwatBlock” and drag & drop it on the “ShipDate” attribute and select “Save”
👋 Search in the panel “Browse catalog of objects” for the “SimpleSwatFieldset” and drag and drop it on the first “SimpleSwatBlock” attribute and select “Save”
👋 Search in the preview for the data fields “CustNum”, “Ordernum”, “ShipToID”,”WarehouseNum”,”BillToID”,”PO” and drag and drop them on the “SimpleSwatFieldSet” and select “Save”
👋 Search in the panel “Browse catalog of objects” for the “SimpleSwatNewColumn” and drag and drop it on the fourth data field on the preview and select “Save”. 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 “Attribute Value” -> “Base Order Information” and select “Save”.
👋 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