Page Comparison

Properties of Block Layout

1. Id - unique identifier of the control
2. Background - use the input help to select the background based from sap.ui.layout.BlockBackgroundType 
3. Visible - set a boolean value or a variable with type boolean from the Model to control the visibility property

Controls of Block Layout
Block Layout requires additional controls inside of it to make it functional. These controls are Block Layout Row and Block Layout Cell. These can be added by doing a right click from the Block Layout Control.
Image Modified

Properties of Block Layout Row
Image Modified

1. Id - unique identifier of the control
2. Scrollable - set a boolean value or a variable with type boolean from the Model to control the scrollable property
3. Accent Cells - Block Layout Cells that will be accented

Properties of Block Layout Cell
Image Modified

1. Id - unique identifier of the control
2. Title - title of the cell
3. Title Alignment - use the input help to select the alignment of the cell 
4. Width - width definition (e.g. 100px)
5. Style Class -  assign a predefined SAPUI5 CSS or a CSS class defined in the CSS of the App

Step-by-step guide

How to add an Block Layout

1. Right click on a Page or a Vertical Layout and select Add Layout-→ Add Block Layout
   
2. A Block Layout Control has been added
   
3. Right click on the Block Layout and select Add Block Layout Row
   
   Right click on the created Block Layout Row and select Add Block Layout Cell
   
   Right click on the created Block Layout Cell and select the relevant control to be added.
   
4. A control within the Block Layout has been created
   

Related articles

...