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.

/wp-content/uploads/2016/06/2016_06_07_09_32_40_969612.png

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:

/wp-content/uploads/2016/06/2016_06_07_09_28_08_969618.png

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).

/wp-content/uploads/2016/06/2016_06_07_09_30_32_969617.png

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

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply