Grid Layout

Owned by Charles Evans
Jul 03, 2020
2 min read

This FormLayout renders a Form using an HTML-table based grid. This can be a 16 column grid or an 8 column grid. The grid is stable, so the alignment of the fields is the same for all screen sizes or widths of the Form. Only the width of the single grid columns depends on the available width.

To adjust the appearance inside the GridLayout, you can use Layout Data and Grid Data for content fields.


Properties of Grid Layout

  1. Id - unique identifier of the control
  2. Default Span - A string type that represents Grid's default span values for large, medium and small screens for the whole Grid.
  3. Default Indent - Defines default for the whole Grid numbers of empty columns before the current span begins. It can be defined for large, medium and small screens.
  4. Model - Model to be used
  5. Entity Set - Entity set definition
  6. hSpacing - Horizontal spacing between the content in the Grid.
  7. vSpacing - Vertical spacing between the content in the Grid.
  8. Style Class - Assign a predefined SAPUI5 CSS or a CSS class defined in the CSS of the App
  9. 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 a Grid Layout:

  1. Right click on a Page, Form Element or from any elements → Add Layout → select Add Grid Layout.

        

     2. A Grid Layout control has been added. UI Elements including Model can be added under the Grid Layout Control by doing a Right click on it.