FormLayout

Use

A FormLayout can consist of several "newspaper pages", like this example with two pages:

FormLayout

These "newspaper" pages are displayed next to each other. If you navigate with the tab key through theFormLayout, the UI elements are run through from top to bottom on the first page, and then then those on the page to the right, and so on.

If you want to start a new page, you attach a FormTopData as a LayoutData to a UI element (in the above example, this is the case for SectionHeader with text General Data and Processing Data). On each of these pages there is a fixed, invisible grid with a number of columns defined by propertyFormTopData.colCount. It is therefore similar to GridLayout. As with GridLayouts you can use property FormData.colSpan to define the width of each layout cell. The width is specified in mulitples of column widths. Unlike GridLayout s, and similar to MatrixLayout s, a new line is started by using the layout data FormHeadData (for example, this is the case for LabelPurchase Or… in the above example).

The default style of a FormLayout is 8:1, that is, one main column and eight subcolumns. In contrast to other layouts, contents inFormLayout s that are larger than layout cells are truncated. For more information, see Truncation of Contents in FormLayouts.

Truncating Contents

Depending on the size of the browser window and on the browser used, with Labels in FormLayout s, the text is truncated or an ellipsis displayed.

More information: Truncating Contents in the FormLayout

Restrictions

Note that only layout variants 8:1, 16:1 and 16:2 are presently supported.
Note that in particular with dynamic programming the width (property width) of the UI element in a FormLayout must always be 100%. 100% is also the default value for UI elements in FormLayout. Only in exceptional cases, such as with images, can it be useful to change the default value.
No active UI elements are supported in FormLayout, that is, no UI elements that inherit from AbstractActiveComponent, AbstractApplet or AbstractGenericActiveCompoment.
In vertical alignment (vAlign) you must not use baseline. The default value is top and this should not be changed.
Make sure you do not embed a container with FormLayout in a FormLayout. Automatic word wrapping is not supported in this combination.

Calculation of the Column Division

Columns are divided in theFormLayout on the basis of the following formulas. The component example WDR_TEST_FORM_LAYOUT is available in the system.

In this example the screen is divided into two groups: On the left is group Visibility, and on the right the 8:1 FormLayout. Using the CheckBox es on the left you can control the visibility of the UI elements on the right. The FormLayout for testing on the right is divided into eight columns. This division is based on the following calculations.

Basic rule for 8 to 1:

The first three columns are assigned Label s.
The remaining five columns are assigned other UI elements (here: InputField s).

Detail rules with 8 to 1:

If there are any columns left over from the five columns after dividing them by the number of UI elements (here: InputField s), the size of the integer part of the division is assigned to each UI element. Furthermore, the remainder is divided equally among the UI elements from left to right, whereby each UI element gets an additional column.

Example

WDR_TEST_FORM_LAYOUT:

First line:

Label1 = 3 columns -> 8 columns - 3 columns = 5 columns

5 columns/ 1 UI element = 5 columns for UI element

=> Label1 gets 3 columns and InputField1 gets 5 columns.
Second line:

Label2 = 3 columns -> 8 columns - 3 columns = 5 columns

5 columns/ 2 UI elements = 2 columns per UI element + 1 column remaining

InputField2 = 2 columns + 1 column remaining (that is, 3 columns in total) -> remainder = 0

InputField3 = 2 columns

=> Label2 gets 3 columns and InputField2 gets 3 columns and InputField3 gets 2 columns
Third line:

Label3 = 3 columns   -> 8 columns - 3 columns = 5 columns

5 columns/ 3 UI elements = 1 column per UI element + 2 columns remaining

InputField4 = 1 column + 1 column remaining (that is, 2 columns in total)  -> remainder = 1

InputField5 = 1 column + 1 column remaining (that is, 2 columns in total)  -> remainder = 0

InputField6 = 1 column

=> Label3 gets 3 columns and InputField4 and InputField5 each get 2 columns and InputField6 gets 1 column.
If Label3 is hidden (visible = none), the calculation is:

8 columns/ 3 UI elements = 2 columns per UI element + 2 columns remaining

InputField4 = 2 columns + 1 column remaining (that is, 3 columns in total) -> remainder = 1

InputField5 = 2 columns + 1 column remaining (that is, 3 columns in total) -> remainder = 0

InputField6 = 2 columns

=> InputField4 and InputField5 each get 3 columns and InputField6 gets 2 columns.

Implementation Details

Runtime Class

CL_WD_FORM_LAYOUT

Name	Type	Initial Value	Bindable
id	STRING	(automatic)	No

Other properties that can be inherited are defined in the related higher-level classes. The related UI elements are:

Dynamic Programming

For dynamic programming, the same properties, events, and aggregations as in the View Designer are available. But note that the spelling format and use of upper/lower case is different.

Example

You can find a test example in the system in components WDR_TEST_FORM_LAYOUT and DEMO_HRMNZDUI_EDIT_PAGE.