Vertical Layout

Owned by Charles Evans
Jul 03, 2020
2 min read

A Vertical Layout is a general-purpose container which can be handy for grouping controls. They:

  • do not affect the visual look of the app (unless you apply Styles to them).
  • have the xmlns Property, which allows the definition of a namespace declaration (such as xmlns="sap.ui.unified"), which can be used by the children elements.
  • are useful for grouping Controls which are to be included in a Widget.

Properties of Vertical Layout

Properties

  1. Id - unique identifier of the control
  2. Style Class - assign a predefined SAPUI5 CSS or a CSS class defined in the CSS of the App
  3. Width - width setting 
  4. Enabled - set a boolean value or a variable with type boolean from the Model to control the enable property
  5. Visible - set a boolean value or a variable with type boolean from the Model to control the visibility property
  6. xmlns - used to add an SAPUI5 namespace. e,g, xmlns="sap.ui.unified" will allow you to use a custom node with a type of Calendar which is of type sap.ui.unified.Calendar.  This is a way to add controls from other sap.ui namespaces.
  7. Advanced - Properties of the control not available in the above list can be added here.

Setting Additional Properties provides further information about the Advanced property

More Properties Screen

  1. No Auto Load – setting to prevent loading the  data into the table
  2. OnUpdateFinished - executes the javascript function assigned for this event
  3. rowHeight – controls the height
  4. Width – controls the width
  5. columnHeaderHeight - controls the header height
  6. columnHeaderVisible – shows/hides the column header
  7. firstVisibleRow – first visible row
  8. Editable - enables/disables the table
  9. Threshold - defines the number of entries to be requested from the model for each grow (e.g. setting it to 100 will request and show the first 100 entries)
  10. showColumnVisibilityMenu
  11. showNoData – shows the table when empty
  12. visibleRowCountMode, minAutoRowCount, fixedRowCount, rowActionCount and fixedBottomRowCount – Row count properties
  13. enableColumnFreeze, enableCellFilter, enableSelectAll, enableCustomFilter, enableBusyIndicator, enableColumnReordering and enableGrouping – enable additional table properties and funtionalities


Step-by-step guide

How to add an Vertical Layout

  1. Right click on a Page, Form Element or from any elements under Add Layout and select Add Vertical Layout

  2. An Vertical Layout control has been added
  3. UI Elements including Model can be added under the Vertical Layout Control by doing a Right click from it