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 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 |
Name | Type | Default Value | Description |
---|---|---|---|
adjustLabelSpan | boolean | true | If set, the usage of If not set, the usage of |
breakpointL | int | 1024 | Breakpoint (in pixel) between Medium size and Large size. |
breakpointM | int | 600 | Breakpoint (in pixel) between Small size and Medium size. |
breakpointXL | int | 1440 | Breakpoint (in pixel) between large size and extra large (XL) size. |
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. |
columnsM | int | 1 | Number of columns for medium size. |
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 |
emptySpanL | int | 0 | Number of grid cells that are empty at the end of each line on large size. |
emptySpanM | int | 0 | Number of grid cells that are empty at the end of each line on medium size. |
emptySpanS | int | 0 | Number of grid cells that are empty at the end of each line on small size. |
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 |
labelSpanL | int | 4 | Default span for labels in large size. Note: If |
labelSpanM | int | 2 | Default span for labels in medium size. Note: If |
labelSpanS | int | 12 | Default span for labels in small size. |
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 |
singleContainerFullSize | boolean | true | If the In all other cases the |
Name | Type | Default Value | Description |
---|---|---|---|
backgroundDesign | sap.ui.layout.BackgroundDesign | Translucent | Specifies the background color of the Note: The visualization of the different options depends on the theme used. |
Method | Description |
---|---|
sap.ui.layout.form.ResponsiveGridLayout.extend |
Creates a new subclass of class sap.ui.layout.form.ResponsiveGridLayout with name
|
getAdjustLabelSpan |
Gets current value of property adjustLabelSpan. If set, the usage of If not set, the usage of Default value is |
getBreakpointL |
Gets current value of property breakpointL. Breakpoint (in pixel) between Medium size and Large size. Default value is |
getBreakpointM |
Gets current value of property breakpointM. Breakpoint (in pixel) between Small size and Medium size. Default value is |
getBreakpointXL |
Gets current value of property breakpointXL. Breakpoint (in pixel) between large size and extra large (XL) size. Default value is |
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 |
getColumnsM |
Gets current value of property columnsM. Number of columns for medium size. Default value is |
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 Default value is |
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 |
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 |
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 |
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 Default value is |
getLabelSpanL |
Gets current value of property labelSpanL. Default span for labels in large size. Note: If Default value is |
getLabelSpanM |
Gets current value of property labelSpanM. Default span for labels in medium size. Note: If Default value is |
getLabelSpanS |
Gets current value of property labelSpanS. Default span for labels in small size. Default value is |
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 Default value is |
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 In all other cases the Default value is |
setAdjustLabelSpan |
Sets a new value for property adjustLabelSpan. If set, the usage of If not set, the usage of When called with a value of Default value is |
setBreakpointL |
Sets a new value for property breakpointL. Breakpoint (in pixel) between Medium size and Large size. When called with a value of Default value is |
setBreakpointM |
Sets a new value for property breakpointM. Breakpoint (in pixel) between Small size and Medium size. When called with a value of Default value is |
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 Default value is |
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 Default value is |
setColumnsM |
Sets a new value for property columnsM. Number of columns for medium size. When called with a value of Default value is |
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 When called with a value of Default value is |
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 Default value is |
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 Default value is |
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 Default value is |
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 When called with a value of Default value is |
setLabelSpanL |
Sets a new value for property labelSpanL. Default span for labels in large size. Note: If When called with a value of Default value is |
setLabelSpanM |
Sets a new value for property labelSpanM. Default span for labels in medium size. Note: If When called with a value of Default value is |
setLabelSpanS |
Sets a new value for property labelSpanS. Default span for labels in small size. When called with a value of Default value is |
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 When called with a value of Default value is |
setSingleContainerFullSize |
Sets a new value for property singleContainerFullSize. If the In all other cases the When called with a value of Default value is |
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 |
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
.
Gets current value of property breakpointL.
Breakpoint (in pixel) between Medium size and Large size.
Default value is 1024
.
Gets current value of property breakpointM.
Breakpoint (in pixel) between Small size and Medium size.
Default value is 600
.
Gets current value of property breakpointXL.
Breakpoint (in pixel) between large size and extra large (XL) size.
Default value is 1440
.
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
.
Gets current value of property columnsM.
Number of columns for medium size.
Default value is 1
.
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
.
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
.
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
.
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
.
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
.
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
.
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
.
Gets current value of property labelSpanS.
Default span for labels in small size.
Default value is 12
.
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
.
Returns a metadata object for class sap.ui.layout.form.ResponsiveGridLayout.
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
.
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |