Column number allocation problem under SAP UI5 Form form Column Layout

The ColumnLayout control renders groups of forms in a responsive column-based manner. Depending on its size, the group is divided into one or more columns.

• XL – max. 6 columns
• L – max. 3 columns
• M – max. 2 columns
• S – 1 column

For XL size, SAP recommends using the full 6 columns for large forms with a lot of content. This gives users more flexibility when organizing content and form groups.​

To better utilize screen space and provide users with a better overview without scrolling, we can balance form groups across multiple columns. Based on the number of group elements and their size, group elements are spread out into columns.

Sound a little abstract?

See a specific example:

• 4 columns and 2 groups: Each group will use 2 columns.
• 3 Columns 2 Groups: Larger uses 2 columns, smaller uses 1 column.

The size of a group element will be determined by the number of visible elements assigned to it. If there are more groups than columns, only one column is used per group. So the last row of the form control won't be fully used. This will result in blanks.

Form elements are spread out into columns of groups arranged in a newspaper-like order. The placement of labels and fields depends on the size of the columns used. If there is enough space, the label is next to the field, otherwise above the field.

If the default form settings are used, each form group will be displayed in a separate column. Depending on the size of the form group, this may mean that the user needs to scroll down to view the full form, even if there is unused space on the right side of the screen.

The following figure is the layout of a default form group:

A form group, based on balanced column layout:

2 form groups, using the default layout:

2 form groups, using a balanced column layout:

In Dynamicforms, the content, behavior, and style of a form are defined by JSON. To create a form, developers need to add form controls and define their properties, such as control type, name, label, etc.