Web Dynpro ABAP – Layout options

Within a Container the Layout UI element property defines how the lower level UI elements are assigned.

Matrix

• Elements are arranged in columns
• …
  

Grid

• Elements are arranged in columns
• …
  

Flow

• Layout (FlowLayout)
  • Elements are arranged in rows
  • Default layout for containers
  • Wrapping: 
    • if set to true, elements will wrap based on display area
    • if set to false, elements will not wrap but a scrollbar will appear is display area too small
• Layout data (FlowData)
  • CellDesign property:  controls the UI element spacing in a cell to the cell border (lPad, rPad, lrPad, lrNoPad, padless)
    • SAP recommendation:  rPad
  • vGutter property:  to add more spacing to the left edge of the cell, you can also determine whether a vertical line (rule) to be shown. (large, largeWithRule, medium, mediumWithRule, none, xLarge, xLargeWithRule)
    

Row

• Elements are arranged in row
• Referred to as a “ragged setting” because UI elements are not aligned in columns.