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

Id - unique identifier of the control
Default Span - A string type that represents Grid's default span values for large, medium and small screens for the whole Grid.
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.
Model - Model to be used
Entity Set - Entity set definition
hSpacing - Horizontal spacing between the content in the Grid.
vSpacing - Vertical spacing between the content in the Grid.
Style Class - Assign a predefined SAPUI5 CSS or a CSS class defined in the CSS of the App
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

No Auto Load – setting to prevent loading the data into the table
OnUpdateFinished - executes the javascript function assigned for this event
rowHeight – controls the height
Width – controls the width
columnHeaderHeight - controls the header height
columnHeaderVisible – shows/hides the column header
firstVisibleRow – first visible row
Editable - enables/disables the table
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)
showColumnVisibilityMenu
showNoData – shows the table when empty
visibleRowCountMode, minAutoRowCount, fixedRowCount, rowActionCount and fixedBottomRowCount – Row count properties
enableColumnFreeze, enableCellFilter, enableSelectAll, enableCustomFilter, enableBusyIndicator, enableColumnReordering and enableGrouping – enable additional table properties and funtionalities

Step-by-step guide

How to add a Grid Layout:

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.

Page:

2.2.10.46 Grid Layout
Page:

2.2 UI Elements, Layout and Properties

Step-by-step guide

Related articles

Browser not supported