Usually, we have a Layout configuration that displays UI elements in a continuous row setting. On our first image below, you can see each pair of InputField and Label occupy one whole row of the Layout.
In order to modify a Web Dynpro ABAP application so the UI elements are displayed in two or more columns, you should do the following:
1) On the relevant Web Dynpro view, you should set the parent UI element (this could be the ROOTUIELEMENT or other) of the elements you wish to display in a different number of columns to 'GridLayout' with a 'ColCount' property of the number of total columns you wish. On this example, since each InputField has a matching Label, we will set it to 4:
2) Then, make sure each UI element to a 'ColSpan' property of 1. Thus, in this example the layout of the parent element will render everything with 4 columns, with each element occupying one column (each InputField and Label combination occupying two columns).
Please note that if there are more elements in the same parent node, these will affect their behavior also. To reduce this modifications only to a specific set of UI elements, consider inserting them in a TransparentContainer and setting its properties as mentioned before, considering the TransparentContainer is now their parent UI element.
Observation: There are other ways of achieving the same results, but in my experience this seems to be the most straightforward alternative. In the future I might update this blog with different methods.
Regards,
Felipe