ResponsiveGridLayout

extends FormLayout

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 standalone, it only renders a Form, so it must be assigned to a Form.

Since: 1.16.0.

Constructor Summary

new sap.ui.layout.form.ResponsiveGridLayout(sId?, mSettings?)Constructor for a new sap.ui.layout.form.ResponsiveGridLayout.

Events borrowed from class sap.ui.core.Control

validateFieldGroup

Events borrowed from class sap.ui.base.ManagedObject

formatError, modelContextChange, parseError, validationError, validationSuccess

Method Summary

sap.ui.layout.form.ResponsiveGridLayout.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.ui.layout.form.ResponsiveGridLayout with name sClassName and enriches it with the information contained in oClassInfo.

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

getAdjustLabelSpan()Gets current value of property adjustLabelSpan.

getBreakpointL()Gets current value of property breakpointL.

getBreakpointM()Gets current value of property breakpointM.

getBreakpointXL()Gets current value of property breakpointXL.

getColumnsL()Gets current value of property columnsL.

getColumnsM()Gets current value of property columnsM.

getColumnsXL()Gets current value of property columnsXL.

getEmptySpanL()Gets current value of property emptySpanL.

getEmptySpanM()Gets current value of property emptySpanM.

getEmptySpanS()Gets current value of property emptySpanS.

getEmptySpanXL()Gets current value of property emptySpanXL.

getLabelSpanL()Gets current value of property labelSpanL.

getLabelSpanM()Gets current value of property labelSpanM.

getLabelSpanS()Gets current value of property labelSpanS.

getLabelSpanXL()Gets current value of property labelSpanXL.

getSingleContainerFullSize()Gets current value of property singleContainerFullSize.

setAdjustLabelSpan(bAdjustLabelSpan)Sets a new value for property adjustLabelSpan.

setBreakpointL(iBreakpointL)Sets a new value for property breakpointL.

setBreakpointM(iBreakpointM)Sets a new value for property breakpointM.

setBreakpointXL(iBreakpointXL)Sets a new value for property breakpointXL.

setColumnsL(iColumnsL)Sets a new value for property columnsL.

setColumnsM(iColumnsM)Sets a new value for property columnsM.

setColumnsXL(iColumnsXL)Sets a new value for property columnsXL.

setEmptySpanL(iEmptySpanL)Sets a new value for property emptySpanL.

setEmptySpanM(iEmptySpanM)Sets a new value for property emptySpanM.

setEmptySpanS(iEmptySpanS)Sets a new value for property emptySpanS.

setEmptySpanXL(iEmptySpanXL)Sets a new value for property emptySpanXL.

setLabelSpanL(iLabelSpanL)Sets a new value for property labelSpanL.

setLabelSpanM(iLabelSpanM)Sets a new value for property labelSpanM.

setLabelSpanS(iLabelSpanS)Sets a new value for property labelSpanS.

setLabelSpanXL(iLabelSpanXL)Sets a new value for property labelSpanXL.

setSingleContainerFullSize(bSingleContainerFullSize)Sets a new value for property singleContainerFullSize.

Methods borrowed from class sap.ui.layout.form.FormLayout

getBackgroundDesign, setBackgroundDesign

Methods borrowed from class sap.ui.core.Control

Methods borrowed from class sap.ui.core.Element

Methods borrowed from class sap.ui.base.ManagedObject

addAggregation, addAssociation, applySettings, attachFormatError, attachModelContextChange, attachParseError, attachValidationError, attachValidationSuccess, bindAggregation, bindContext, bindObject, bindProperty, destroyAggregation, detachFormatError, detachModelContextChange, detachParseError, detachValidationError, detachValidationSuccess, findAggregatedObjects, fireFormatError, fireModelContextChange, fireParseError, fireValidationError, fireValidationSuccess, getAggregation, getAssociation, getBinding, getBindingContext, getBindingInfo, getBindingPath, getEventingParent, getId, getModel, getObjectBinding, getOriginInfo, getParent, getProperty, hasModel, indexOfAggregation, insertAggregation, isBound, isInvalidateSuppressed, isTreeBinding, propagateMessages, removeAggregation, removeAllAggregation, removeAllAssociation, removeAssociation, setAggregation, setAssociation, setBindingContext, setModel, setProperty, unbindAggregation, unbindContext, unbindObject, unbindProperty, validateAggregation, validateProperty

Methods borrowed from class sap.ui.base.EventProvider

attachEvent, attachEventOnce, detachEvent, hasListeners

Constructor Detail

new sap.ui.layout.form.ResponsiveGridLayout(sId?, mSettings?)

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 for a general description of the syntax of the settings object.

The supported settings are:

Properties
- labelSpanXL : int (default: -1)
- labelSpanL : int (default: 4)
- labelSpanM : int (default: 2)
- labelSpanS : int (default: 12)
- adjustLabelSpan : boolean (default: true)
- emptySpanXL : int (default: -1)
- emptySpanL : int (default: 0)
- emptySpanM : int (default: 0)
- emptySpanS : int (default: 0)
- columnsXL : int (default: -1)
- columnsL : int (default: 2)
- columnsM : int (default: 1)
- singleContainerFullSize : boolean (default: true)
- breakpointXL : int (default: 1440)
- breakpointL : int (default: 1024)
- breakpointM : int (default: 600)

In addition, all settings applicable to the base type sap.ui.layout.form.FormLayout can be used as well.

Parameters:

{string}	sId?	ID for the new control, generated automatically if no ID is given
{object}	mSettings?	Initial settings for the new control

Method Detail

sap.ui.layout.form.ResponsiveGridLayout.extend(sClassName, oClassInfo?, FNMetaImpl?): function

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.

Parameters:

{string}	sClassName	Name of the class being created
{object}	oClassInfo?	Object literal with information about the class
{function}	FNMetaImpl?	Constructor function for the metadata object; if not given, it defaults to `sap.ui.core.ElementMetadata`

Returns:

{function}

Created class / constructor function

sap.ui.layout.form.ResponsiveGridLayout.getMetadata(): sap.ui.base.Metadata

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

Returns:

{sap.ui.base.Metadata}

Metadata object describing this class

getAdjustLabelSpan(): boolean

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.

Since:: 1.34.0

Returns:

{boolean} Value of property adjustLabelSpan

getBreakpointL(): int

Gets current value of property breakpointL.

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

Default value is 1024.

Since:: 1.16.3

Returns:

{int} Value of property breakpointL

getBreakpointM(): int

Gets current value of property breakpointM.

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

Default value is 600.

Since:: 1.16.3

Returns:

{int} Value of property breakpointM

getBreakpointXL(): int

Gets current value of property breakpointXL.

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

Default value is 1440.

Since:: 1.34.0

Returns:

{int} Value of property breakpointXL

getColumnsL(): int

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.

Since:: 1.16.3

Returns:

{int} Value of property columnsL

getColumnsM(): int

Gets current value of property columnsM.

Number of columns for medium size.

Default value is 1.

Since:: 1.16.3

Returns:

{int} Value of property columnsM

getColumnsXL(): int

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.

Since:: 1.34.0

Returns:

{int} Value of property columnsXL

getEmptySpanL(): int

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.

Since:: 1.16.3

Returns:

{int} Value of property emptySpanL

getEmptySpanM(): int

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.

Since:: 1.16.3

Returns:

{int} Value of property emptySpanM

getEmptySpanS(): int

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.

Since:: 1.16.3

Returns:

{int} Value of property emptySpanS

getEmptySpanXL(): int

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.

Since:: 1.34.0

Returns:

{int} Value of property emptySpanXL

getLabelSpanL(): int

Gets current value of property labelSpanL.

Default span for labels in large size.

Note: If adjustLabelSpanThis 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.

Since:: 1.16.3

Returns:

{int} Value of property labelSpanL

getLabelSpanM(): int

Gets current value of property labelSpanM.

Default span for labels in medium size.

Note: If adjustLabelSpanThis 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.

Since:: 1.16.3

Returns:

{int} Value of property labelSpanM

getLabelSpanS(): int

Gets current value of property labelSpanS.

Default span for labels in small size.

Default value is 12.

Since:: 1.16.3

Returns:

{int} Value of property labelSpanS

getLabelSpanXL(): int

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.

Since:: 1.34.0

Returns:

{int} Value of property labelSpanXL

getSingleContainerFullSize(): boolean

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.

Since:: 1.34.0

Returns:

{boolean} Value of property singleContainerFullSize

setAdjustLabelSpan(bAdjustLabelSpan): sap.ui.layout.form.ResponsiveGridLayout

Sets a new value for property adjustLabelSpan.

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.

Parameters:

{boolean} bAdjustLabelSpan New value for property adjustLabelSpan

Since:: 1.34.0

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setBreakpointL(iBreakpointL): sap.ui.layout.form.ResponsiveGridLayout

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.

Parameters:

{int} iBreakpointL New value for property breakpointL

Since:: 1.16.3

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setBreakpointM(iBreakpointM): sap.ui.layout.form.ResponsiveGridLayout

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.

Parameters:

{int} iBreakpointM New value for property breakpointM

Since:: 1.16.3

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setBreakpointXL(iBreakpointXL): sap.ui.layout.form.ResponsiveGridLayout

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.

Parameters:

{int} iBreakpointXL New value for property breakpointXL

Since:: 1.34.0

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setColumnsL(iColumnsL): sap.ui.layout.form.ResponsiveGridLayout

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.

Parameters:

{int} iColumnsL New value for property columnsL

Since:: 1.16.3

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setColumnsM(iColumnsM): sap.ui.layout.form.ResponsiveGridLayout

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.

Parameters:

{int} iColumnsM New value for property columnsM

Since:: 1.16.3

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setColumnsXL(iColumnsXL): sap.ui.layout.form.ResponsiveGridLayout

Sets a new value for property columnsXL.

Number of columns for extra large size.

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

Default value is -1.

Parameters:

{int} iColumnsXL New value for property columnsXL

Since:: 1.34.0

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setEmptySpanL(iEmptySpanL): sap.ui.layout.form.ResponsiveGridLayout

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.

Parameters:

{int} iEmptySpanL New value for property emptySpanL

Since:: 1.16.3

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setEmptySpanM(iEmptySpanM): sap.ui.layout.form.ResponsiveGridLayout

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.

Parameters:

{int} iEmptySpanM New value for property emptySpanM

Since:: 1.16.3

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setEmptySpanS(iEmptySpanS): sap.ui.layout.form.ResponsiveGridLayout

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.

Parameters:

{int} iEmptySpanS New value for property emptySpanS

Since:: 1.16.3

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setEmptySpanXL(iEmptySpanXL): sap.ui.layout.form.ResponsiveGridLayout

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.

Parameters:

{int} iEmptySpanXL New value for property emptySpanXL

Since:: 1.34.0

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setLabelSpanL(iLabelSpanL): sap.ui.layout.form.ResponsiveGridLayout

Sets a new value for property labelSpanL.

Default span for labels in large size.

Note: If adjustLabelSpanThis 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.

Parameters:

{int} iLabelSpanL New value for property labelSpanL

Since:: 1.16.3

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setLabelSpanM(iLabelSpanM): sap.ui.layout.form.ResponsiveGridLayout

Sets a new value for property labelSpanM.

Default span for labels in medium size.

Note: If adjustLabelSpanThis 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.

Parameters:

{int} iLabelSpanM New value for property labelSpanM

Since:: 1.16.3

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setLabelSpanS(iLabelSpanS): sap.ui.layout.form.ResponsiveGridLayout

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.

Parameters:

{int} iLabelSpanS New value for property labelSpanS

Since:: 1.16.3

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setLabelSpanXL(iLabelSpanXL): sap.ui.layout.form.ResponsiveGridLayout

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.

Parameters:

{int} iLabelSpanXL New value for property labelSpanXL

Since:: 1.34.0

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining

setSingleContainerFullSize(bSingleContainerFullSize): sap.ui.layout.form.ResponsiveGridLayout

Sets a new value for property singleContainerFullSize.

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.

Parameters:

{boolean} bSingleContainerFullSize New value for property singleContainerFullSize

Since:: 1.34.0

Returns:

{sap.ui.layout.form.ResponsiveGridLayout} Reference to this in order to allow method chaining