Show TOC

FormLayoutLocate this document in the navigation structure

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 the FormLayout, 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 property FormTopData.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 Label Purchase 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 in FormLayout 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.

Note

If in a FormLayout with a Label in front of a UI element the required asterisk (property state.required) is displayed on the right side of the Label, and the browser window is too small (too narrow), the required asterisk will also be cut off as part of the truncation of contents function. We therefore recommend that in the FormLayout you use URL parameter WDUIGUIDELINE=GL20 to move the required asterisk to the left side of the Label.

Since texts in the FormLayout can be truncated, it is especially important to define Tooltips . We recommend you display the text again, for instance as a tooltip.

More information: Truncating Contents in the FormLayout

Restrictions

  • Note that only layout variants 8:1, 16:1 and 16:2 are presently supported.

  • In particular with dynamic programming, the width (property width) of UI elements in the FormLayout should always be 100%. 100% is also the default value for UI elements in the 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 s. The default value is top and this should not be changed.

  • Make sure you do not embed a Container with FormLayout in a FlowLayout. Automatic word wrapping is not supported in this combination.

Caution

Note that in particular with dynamic programming the first UI element in a FormLayout must always be of type FormTopData. If it is not, it will cause a short dump.

Calculation of the Column Division

Columns are divided in the FormLayout on the basis of the following formulas. The example component 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 hiddden (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.