class sap.ui.layout.form.ResponsiveGridLayout

Visiblity: public
UX Guidelines:
Implements:
Available since: N/A
Module: sap/ui/layout/form/ResponsiveGridLayout
Application Component: CA-UI5-CMP

The ResponsiveGridLayout control renders a Form using a responsive grid. Internally the Grid control is used for rendering. Using this layout, the Form is rendered in a responsive way. Depending on the available space, the FormContainers are rendered in one or different columns and the labels are rendered in the same row as the fields or above the fields. This behavior can be influenced by the properties of this layout control.

On the FormContainers, labels and content fields, GridData can be used to change the default rendering. GridData is not supported for FormElements.

Note: If GridData is used, this may result in a much more complex layout than the default one. This means that in some cases, the calculation for the other content may not bring the expected result. In such cases, GridData should be used for all content controls to disable the default behavior.

This control cannot be used stand-alone, it just renders a Form, so it must be assigned to a Form using the layout aggregation.


Constructor

Constructor for a new sap.ui.layout.form.ResponsiveGridLayout.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject#constructor for a general description of the syntax of the settings object.

new sap.ui.layout.form.ResponsiveGridLayout(sId?, mSettings?)
Param Type Default Value Description
sId? string

ID for the new control, generated automatically if no ID is given

mSettings? object

Initial settings for the new control


Properties

Name Type Default Value Description
adjustLabelSpan boolean true

If set, the usage of labelSpanL and labelSpanM are dependent on the number of FormContainers in one row. If only one FormContainer is displayed in one row, labelSpanM is used to define the size of the label. This is the same for medium and large Forms. This is done to align the labels on forms where full-size FormContainers and multiple-column rows are used in the same Form (because every FormContainer has its own Grid inside).

If not set, the usage of labelSpanL and labelSpanM are dependent on the Form size. The number of FormContainers doesn't matter in this case.

Since: 1.34.0.

Visibility: public
breakpointL int 1024

Breakpoint (in pixel) between Medium size and Large size.

Since: 1.16.3.

Visibility: public
breakpointM int 600

Breakpoint (in pixel) between Small size and Medium size.

Since: 1.16.3.

Visibility: public
breakpointXL int 1440

Breakpoint (in pixel) between large size and extra large (XL) size.

Since: 1.34.0.

Visibility: public
columnsL int 2

Number of columns for large size.

The number of columns for large size must not be smaller than the number of columns for medium size.

Since: 1.16.3.

Visibility: public
columnsM int 1

Number of columns for medium size.

Since: 1.16.3.

Visibility: public
columnsXL int -1

Number of columns for extra large size.

The number of columns for extra large size must not be smaller than the number of columns for large size. Note: If the default value -1 is not overwritten with the meaningful one then the columnsL value is used (from the backward compatibility reasons).

Since: 1.34.0.

Visibility: public
emptySpanL int 0

Number of grid cells that are empty at the end of each line on large size.

Since: 1.16.3.

Visibility: public
emptySpanM int 0

Number of grid cells that are empty at the end of each line on medium size.

Since: 1.16.3.

Visibility: public
emptySpanS int 0

Number of grid cells that are empty at the end of each line on small size.

Since: 1.16.3.

Visibility: public
emptySpanXL int -1

Number of grid cells that are empty at the end of each line on extra large size.

Note: If the default value -1 is not overwritten with the meaningful one then the emptySpanL value is used.

Since: 1.34.0.

Visibility: public
labelSpanL int 4

Default span for labels in large size.

Note: If adjustLabelSpan is set, this property is only used if more than 1 FormContainer is in one line. If only 1 FormContainer is in the line, then the labelSpanM value is used.

Since: 1.16.3.

Visibility: public
labelSpanM int 2

Default span for labels in medium size.

Note: If adjustLabelSpan is set this property is used for full-size FormContainers. If more than one FormContainer is in one line, labelSpanL is used.

Since: 1.16.3.

Visibility: public
labelSpanS int 12

Default span for labels in small size.

Since: 1.16.3.

Visibility: public
labelSpanXL int -1

Default span for labels in extra large size.

Note: If the default value -1 is not overwritten with the meaningful one then the labelSpanL value is used.

Since: 1.34.0.

Visibility: public
singleContainerFullSize boolean true

If the Form contains only one single FormContainer and this property is set, the FormContainer is displayed using the full size of the Form. In this case the properties columnsXL, columnsL and columnsM are ignored.

In all other cases the FormContainer is displayed in the size of one column.

Since: 1.34.0.

Visibility: public

Borrowed Properties

Name Type Default Value Description
backgroundDesign sap.ui.layout.BackgroundDesign Translucent

Specifies the background color of the Form content.

Note: The visualization of the different options depends on the theme used.

Since: 1.36.0.

Visibility: public

Methods Overview

Method Description
sap.ui.layout.form.ResponsiveGridLayout.extend

Creates a new subclass of class sap.ui.layout.form.ResponsiveGridLayout with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.layout.form.FormLayout.extend.

getAdjustLabelSpan

Gets current value of property adjustLabelSpan.

If set, the usage of labelSpanL and labelSpanM are dependent on the number of FormContainers in one row. If only one FormContainer is displayed in one row, labelSpanM is used to define the size of the label. This is the same for medium and large Forms. This is done to align the labels on forms where full-size FormContainers and multiple-column rows are used in the same Form (because every FormContainer has its own Grid inside).

If not set, the usage of labelSpanL and labelSpanM are dependent on the Form size. The number of FormContainers doesn't matter in this case.

Default value is true.

getBreakpointL

Gets current value of property breakpointL.

Breakpoint (in pixel) between Medium size and Large size.

Default value is 1024.

getBreakpointM

Gets current value of property breakpointM.

Breakpoint (in pixel) between Small size and Medium size.

Default value is 600.

getBreakpointXL

Gets current value of property breakpointXL.

Breakpoint (in pixel) between large size and extra large (XL) size.

Default value is 1440.

getColumnsL

Gets current value of property columnsL.

Number of columns for large size.

The number of columns for large size must not be smaller than the number of columns for medium size.

Default value is 2.

getColumnsM

Gets current value of property columnsM.

Number of columns for medium size.

Default value is 1.

getColumnsXL

Gets current value of property columnsXL.

Number of columns for extra large size.

The number of columns for extra large size must not be smaller than the number of columns for large size. Note: If the default value -1 is not overwritten with the meaningful one then the columnsL value is used (from the backward compatibility reasons).

Default value is -1.

getEmptySpanL

Gets current value of property emptySpanL.

Number of grid cells that are empty at the end of each line on large size.

Default value is 0.

getEmptySpanM

Gets current value of property emptySpanM.

Number of grid cells that are empty at the end of each line on medium size.

Default value is 0.

getEmptySpanS

Gets current value of property emptySpanS.

Number of grid cells that are empty at the end of each line on small size.

Default value is 0.

getEmptySpanXL

Gets current value of property emptySpanXL.

Number of grid cells that are empty at the end of each line on extra large size.

Note: If the default value -1 is not overwritten with the meaningful one then the emptySpanL value is used.

Default value is -1.

getLabelSpanL

Gets current value of property labelSpanL.

Default span for labels in large size.

Note: If adjustLabelSpan is set, this property is only used if more than 1 FormContainer is in one line. If only 1 FormContainer is in the line, then the labelSpanM value is used.

Default value is 4.

getLabelSpanM

Gets current value of property labelSpanM.

Default span for labels in medium size.

Note: If adjustLabelSpan is set this property is used for full-size FormContainers. If more than one FormContainer is in one line, labelSpanL is used.

Default value is 2.

getLabelSpanS

Gets current value of property labelSpanS.

Default span for labels in small size.

Default value is 12.

getLabelSpanXL

Gets current value of property labelSpanXL.

Default span for labels in extra large size.

Note: If the default value -1 is not overwritten with the meaningful one then the labelSpanL value is used.

Default value is -1.

sap.ui.layout.form.ResponsiveGridLayout.getMetadata

Returns a metadata object for class sap.ui.layout.form.ResponsiveGridLayout.

getSingleContainerFullSize

Gets current value of property singleContainerFullSize.

If the Form contains only one single FormContainer and this property is set, the FormContainer is displayed using the full size of the Form. In this case the properties columnsXL, columnsL and columnsM are ignored.

In all other cases the FormContainer is displayed in the size of one column.

Default value is true.

setAdjustLabelSpan

Sets a new value for property adjustLabelSpan.

If set, the usage of labelSpanL and labelSpanM are dependent on the number of FormContainers in one row. If only one FormContainer is displayed in one row, labelSpanM is used to define the size of the label. This is the same for medium and large Forms. This is done to align the labels on forms where full-size FormContainers and multiple-column rows are used in the same Form (because every FormContainer has its own Grid inside).

If not set, the usage of labelSpanL and labelSpanM are dependent on the Form size. The number of FormContainers doesn't matter in this case.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

setBreakpointL

Sets a new value for property breakpointL.

Breakpoint (in pixel) between Medium size and Large size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 1024.

setBreakpointM

Sets a new value for property breakpointM.

Breakpoint (in pixel) between Small size and Medium size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 600.

setBreakpointXL

Sets a new value for property breakpointXL.

Breakpoint (in pixel) between large size and extra large (XL) size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 1440.

setColumnsL

Sets a new value for property columnsL.

Number of columns for large size.

The number of columns for large size must not be smaller than the number of columns for medium size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 2.

setColumnsM

Sets a new value for property columnsM.

Number of columns for medium size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 1.

setColumnsXL

Sets a new value for property columnsXL.

Number of columns for extra large size.

The number of columns for extra large size must not be smaller than the number of columns for large size. Note: If the default value -1 is not overwritten with the meaningful one then the columnsL value is used (from the backward compatibility reasons).

When called with a value of null or undefined, the default value of the property will be restored.

Default value is -1.

setEmptySpanL

Sets a new value for property emptySpanL.

Number of grid cells that are empty at the end of each line on large size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 0.

setEmptySpanM

Sets a new value for property emptySpanM.

Number of grid cells that are empty at the end of each line on medium size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 0.

setEmptySpanS

Sets a new value for property emptySpanS.

Number of grid cells that are empty at the end of each line on small size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 0.

setEmptySpanXL

Sets a new value for property emptySpanXL.

Number of grid cells that are empty at the end of each line on extra large size.

Note: If the default value -1 is not overwritten with the meaningful one then the emptySpanL value is used.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is -1.

setLabelSpanL

Sets a new value for property labelSpanL.

Default span for labels in large size.

Note: If adjustLabelSpan is set, this property is only used if more than 1 FormContainer is in one line. If only 1 FormContainer is in the line, then the labelSpanM value is used.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 4.

setLabelSpanM

Sets a new value for property labelSpanM.

Default span for labels in medium size.

Note: If adjustLabelSpan is set this property is used for full-size FormContainers. If more than one FormContainer is in one line, labelSpanL is used.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 2.

setLabelSpanS

Sets a new value for property labelSpanS.

Default span for labels in small size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 12.

setLabelSpanXL

Sets a new value for property labelSpanXL.

Default span for labels in extra large size.

Note: If the default value -1 is not overwritten with the meaningful one then the labelSpanL value is used.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is -1.

setSingleContainerFullSize

Sets a new value for property singleContainerFullSize.

If the Form contains only one single FormContainer and this property is set, the FormContainer is displayed using the full size of the Form. In this case the properties columnsXL, columnsL and columnsM are ignored.

In all other cases the FormContainer is displayed in the size of one column.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

sap.ui.layout.form.ResponsiveGridLayout.extend

Creates a new subclass of class sap.ui.layout.form.ResponsiveGridLayout with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.layout.form.FormLayout.extend.

Param Type DefaultValue Description
sClassName string

Name of the class being created

oClassInfo object

Object literal with information about the class

FNMetaImpl function

Constructor function for the metadata object; if not given, it defaults to the metadata implementation used by this class

getAdjustLabelSpan

Gets current value of property adjustLabelSpan.

If set, the usage of labelSpanL and labelSpanM are dependent on the number of FormContainers in one row. If only one FormContainer is displayed in one row, labelSpanM is used to define the size of the label. This is the same for medium and large Forms. This is done to align the labels on forms where full-size FormContainers and multiple-column rows are used in the same Form (because every FormContainer has its own Grid inside).

If not set, the usage of labelSpanL and labelSpanM are dependent on the Form size. The number of FormContainers doesn't matter in this case.

Default value is true.

getBreakpointL

Gets current value of property breakpointL.

Breakpoint (in pixel) between Medium size and Large size.

Default value is 1024.

getBreakpointM

Gets current value of property breakpointM.

Breakpoint (in pixel) between Small size and Medium size.

Default value is 600.

getBreakpointXL

Gets current value of property breakpointXL.

Breakpoint (in pixel) between large size and extra large (XL) size.

Default value is 1440.

getColumnsL

Gets current value of property columnsL.

Number of columns for large size.

The number of columns for large size must not be smaller than the number of columns for medium size.

Default value is 2.

getColumnsM

Gets current value of property columnsM.

Number of columns for medium size.

Default value is 1.

getColumnsXL

Gets current value of property columnsXL.

Number of columns for extra large size.

The number of columns for extra large size must not be smaller than the number of columns for large size. Note: If the default value -1 is not overwritten with the meaningful one then the columnsL value is used (from the backward compatibility reasons).

Default value is -1.

getEmptySpanL

Gets current value of property emptySpanL.

Number of grid cells that are empty at the end of each line on large size.

Default value is 0.

getEmptySpanM

Gets current value of property emptySpanM.

Number of grid cells that are empty at the end of each line on medium size.

Default value is 0.

getEmptySpanS

Gets current value of property emptySpanS.

Number of grid cells that are empty at the end of each line on small size.

Default value is 0.

getEmptySpanXL

Gets current value of property emptySpanXL.

Number of grid cells that are empty at the end of each line on extra large size.

Note: If the default value -1 is not overwritten with the meaningful one then the emptySpanL value is used.

Default value is -1.

getLabelSpanL

Gets current value of property labelSpanL.

Default span for labels in large size.

Note: If adjustLabelSpan is set, this property is only used if more than 1 FormContainer is in one line. If only 1 FormContainer is in the line, then the labelSpanM value is used.

Default value is 4.

getLabelSpanM

Gets current value of property labelSpanM.

Default span for labels in medium size.

Note: If adjustLabelSpan is set this property is used for full-size FormContainers. If more than one FormContainer is in one line, labelSpanL is used.

Default value is 2.

getLabelSpanS

Gets current value of property labelSpanS.

Default span for labels in small size.

Default value is 12.

getLabelSpanXL

Gets current value of property labelSpanXL.

Default span for labels in extra large size.

Note: If the default value -1 is not overwritten with the meaningful one then the labelSpanL value is used.

Default value is -1.

sap.ui.layout.form.ResponsiveGridLayout.getMetadata

Returns a metadata object for class sap.ui.layout.form.ResponsiveGridLayout.

getSingleContainerFullSize

Gets current value of property singleContainerFullSize.

If the Form contains only one single FormContainer and this property is set, the FormContainer is displayed using the full size of the Form. In this case the properties columnsXL, columnsL and columnsM are ignored.

In all other cases the FormContainer is displayed in the size of one column.

Default value is true.

setAdjustLabelSpan

Sets a new value for property adjustLabelSpan.

If set, the usage of labelSpanL and labelSpanM are dependent on the number of FormContainers in one row. If only one FormContainer is displayed in one row, labelSpanM is used to define the size of the label. This is the same for medium and large Forms. This is done to align the labels on forms where full-size FormContainers and multiple-column rows are used in the same Form (because every FormContainer has its own Grid inside).

If not set, the usage of labelSpanL and labelSpanM are dependent on the Form size. The number of FormContainers doesn't matter in this case.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

Param Type DefaultValue Description
bAdjustLabelSpan boolean true

New value for property adjustLabelSpan

setBreakpointL

Sets a new value for property breakpointL.

Breakpoint (in pixel) between Medium size and Large size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 1024.

Param Type DefaultValue Description
iBreakpointL int 1024

New value for property breakpointL

setBreakpointM

Sets a new value for property breakpointM.

Breakpoint (in pixel) between Small size and Medium size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 600.

Param Type DefaultValue Description
iBreakpointM int 600

New value for property breakpointM

setBreakpointXL

Sets a new value for property breakpointXL.

Breakpoint (in pixel) between large size and extra large (XL) size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 1440.

Param Type DefaultValue Description
iBreakpointXL int 1440

New value for property breakpointXL

setColumnsL

Sets a new value for property columnsL.

Number of columns for large size.

The number of columns for large size must not be smaller than the number of columns for medium size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 2.

Param Type DefaultValue Description
iColumnsL int 2

New value for property columnsL

setColumnsM

Sets a new value for property columnsM.

Number of columns for medium size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 1.

Param Type DefaultValue Description
iColumnsM int 1

New value for property columnsM

setColumnsXL

Sets a new value for property columnsXL.

Number of columns for extra large size.

The number of columns for extra large size must not be smaller than the number of columns for large size. Note: If the default value -1 is not overwritten with the meaningful one then the columnsL value is used (from the backward compatibility reasons).

When called with a value of null or undefined, the default value of the property will be restored.

Default value is -1.

Param Type DefaultValue Description
iColumnsXL int -1

New value for property columnsXL

setEmptySpanL

Sets a new value for property emptySpanL.

Number of grid cells that are empty at the end of each line on large size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 0.

Param Type DefaultValue Description
iEmptySpanL int 0

New value for property emptySpanL

setEmptySpanM

Sets a new value for property emptySpanM.

Number of grid cells that are empty at the end of each line on medium size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 0.

Param Type DefaultValue Description
iEmptySpanM int 0

New value for property emptySpanM

setEmptySpanS

Sets a new value for property emptySpanS.

Number of grid cells that are empty at the end of each line on small size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 0.

Param Type DefaultValue Description
iEmptySpanS int 0

New value for property emptySpanS

setEmptySpanXL

Sets a new value for property emptySpanXL.

Number of grid cells that are empty at the end of each line on extra large size.

Note: If the default value -1 is not overwritten with the meaningful one then the emptySpanL value is used.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is -1.

Param Type DefaultValue Description
iEmptySpanXL int -1

New value for property emptySpanXL

setLabelSpanL

Sets a new value for property labelSpanL.

Default span for labels in large size.

Note: If adjustLabelSpan is set, this property is only used if more than 1 FormContainer is in one line. If only 1 FormContainer is in the line, then the labelSpanM value is used.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 4.

Param Type DefaultValue Description
iLabelSpanL int 4

New value for property labelSpanL

setLabelSpanM

Sets a new value for property labelSpanM.

Default span for labels in medium size.

Note: If adjustLabelSpan is set this property is used for full-size FormContainers. If more than one FormContainer is in one line, labelSpanL is used.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 2.

Param Type DefaultValue Description
iLabelSpanM int 2

New value for property labelSpanM

setLabelSpanS

Sets a new value for property labelSpanS.

Default span for labels in small size.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is 12.

Param Type DefaultValue Description
iLabelSpanS int 12

New value for property labelSpanS

setLabelSpanXL

Sets a new value for property labelSpanXL.

Default span for labels in extra large size.

Note: If the default value -1 is not overwritten with the meaningful one then the labelSpanL value is used.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is -1.

Param Type DefaultValue Description
iLabelSpanXL int -1

New value for property labelSpanXL

setSingleContainerFullSize

Sets a new value for property singleContainerFullSize.

If the Form contains only one single FormContainer and this property is set, the FormContainer is displayed using the full size of the Form. In this case the properties columnsXL, columnsL and columnsM are ignored.

In all other cases the FormContainer is displayed in the size of one column.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

Param Type DefaultValue Description
bSingleContainerFullSize boolean true

New value for property singleContainerFullSize