Explanation of label and input assignment of SAP UI5 SimpleForm M and L-shaped forms

This article introduces the layout principle of SAP UI5 Responsive Grid Layout.

By default, size M for forms and simple forms also has 单列布局 in responsive grid layouts. However, in the case of size M, the labels are located 同一行 with the corresponding input fields or values, and the form groups are located below each other.

By default, the label field scale is 2:10:0:

• Labels use 2 of the responsive grid layouts 网格列 .
• The fields use a responsive grid layout with 10 grid columns.
• Column 0 of responsive grid layout is used by empty columns.

Please change the default 2:10:0 according to your application needs.

Be careful not to confuse the above grid column with the concept of columns .

See a concrete example: Form in size M (2:10:0)

In the example above, label and Input together occupy the entire column of the form layout. As mentioned earlier, the M type is a single-column layout.

size L

By default, size L forms and simple forms use a two-column layout in a responsive grid layout. This means that form groups are placed next to each other in order to display all the information on one screen and avoid scrolling. In these columns, the labels are on the same row as the corresponding input field or value. So the form group is in Z layout (orientation is read by row instead of column).

The label field scale defaults to 4:8:0:

• The labels use 4 grid columns of a responsive grid layout.
• The fields use 8 grid columns of a responsive grid layout.
• 0 grid columns of responsive grid layout are used by empty columns.

Example: Form in size L (4:8:0)

sap.ui.core.CSSSize: String type representing the CSS size value.

The CSS specification calls this the <length> type. Allowed values are CSS sizes, such as "1px" or "2em" or "50%". The special values auto and inherit and mathematical expressions using the CSS3 calc(expression) operator are also accepted. Additionally, length units that represent a percentage of the current viewport size: width (vw), height (vh), the smaller of the two (vmin), or the larger of the two (vmax) can also be defined as CSS sizes.