MatrixLayout

Introduction and Overview

The MatrixLayout can be used to bring multiple controls to one place. There are two different modes how the cell size is determined. If the layoutFixed is false, the cells are sized to fit the content. If the value is true, the cell size must be defined by the caller. For the columns, you can make width settings, for the rows height settings. If you would like to provide scrollbars inside the matrix cells, embed a container inside the cell. For performance reasons it is better to provide the number of columns to the columns property. Otherwise, the number of columns must be calculated by the system.

See also: sap.ui.commons.layout

Examples

MatrixLayout With Variable Cell Size

This example shows a simple MatixLayout with layoutFixed = false.




MatrixLayout With Fixed Cell Sizes

This example shows a simple MatrixLayout with layoutFixed = true. If the content of a cell is larger than the size, the cell content is cut off.




Cell Concatenation

This example shows the usage of colSpan and rowSpan. If you would like to use the concatenation feature, the MatrixLayout's cells need to be defined as own controls. By doing this, they can have different style options like for example background colors. In the example you also can see that a MatrixLayout can contain empty cells. These are useful if you need placeholders, for example. Depending on the use case, they also can be used for purely visual reasons.




MatrixLayout Used to Create a Form




API Documentation

See API documentation