Skip to Content

The Layout Property of UI Elements


When I was starting playing around with Web Dynpro ABAP I wondered about the different setting one could do for the layout property of ui elements. I going to document here, what I found out and hope this will be useful also for other beginners.

Four Layouts to choose from

The following four layout’s are available for arranging the UI elements in a view:

Flow Layout

A flow layout sequentially arranges the container children. This means that you cannot describe defined line breaks, for example. A flow layout depends on the client technology and the size of the browser window.


Grid Layout

A grid layout arranges the container children in a two-dimensional grid with a defined column number and any number of rows. Line breaks can be defined. Line breaks are automatically inserted when a UI element is too long to be displayed within one row.


Matrix Layout

A matrix layout arranges the container children in a tabular format, similar to the grid layout. You can use the properties stretchedHorizontally and stretchedVertically to specify whether or not the UI elements match the container size. You cannot explicitly define the number of columns. Instead you assign MatrixHeadData to a UI element so this UI element is wrapped.


Row Layout

A row layout has a similar behavior as the matrix layout. However, it sequentially assigns the UI elements to exactly one column. If you assign RowHeadData to a UI element, it is exactly this UI element that is wrapped.


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