Class sap.ui.layout.form.ResponsiveGridLayoutModule: sap/ui/layout/form/ResponsiveGridLayout
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.
sap.ui.layout.form.ResponsiveGridLayout.sClassName and enriches it with the information contained in oClassInfo.singleContainerFullSize.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.
| {string} | sId? | ID for the new control, generated automatically if no ID is given |
| {object} | mSettings? | Initial settings for the new control |
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.
| {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 |
| {function} | Created class / constructor function |
| {sap.ui.base.Metadata} | Metadata object describing this class |
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
| {boolean} | Value of property adjustLabelSpan |
breakpointL. Breakpoint (in pixel) between Medium size and Large size.
Default value is 1024.
- Since:
- 1.16.3
| {int} | Value of property breakpointL |
breakpointM. Breakpoint (in pixel) between Small size and Medium size.
Default value is 600.
- Since:
- 1.16.3
| {int} | Value of property breakpointM |
breakpointXL. Breakpoint (in pixel) between large size and extra large (XL) size.
Default value is 1440.
- Since:
- 1.34.0
| {int} | Value of property breakpointXL |
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
| {int} | Value of property columnsL |
columnsM. Number of columns for medium size.
Default value is 1.
- Since:
- 1.16.3
| {int} | Value of property columnsM |
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
| {int} | Value of property columnsXL |
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
| {int} | Value of property emptySpanL |
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
| {int} | Value of property emptySpanM |
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
| {int} | Value of property emptySpanS |
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
| {int} | Value of property emptySpanXL |
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
| {int} | Value of property labelSpanL |
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
| {int} | Value of property labelSpanM |
labelSpanS. Default span for labels in small size.
Default value is 12.
- Since:
- 1.16.3
| {int} | Value of property labelSpanS |
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
| {int} | Value of property labelSpanXL |
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
| {boolean} | Value of property singleContainerFullSize |
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.
| {boolean} | bAdjustLabelSpan | New value for property adjustLabelSpan |
- Since:
- 1.34.0
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {int} | iBreakpointL | New value for property breakpointL |
- Since:
- 1.16.3
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {int} | iBreakpointM | New value for property breakpointM |
- Since:
- 1.16.3
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {int} | iBreakpointXL | New value for property breakpointXL |
- Since:
- 1.34.0
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {int} | iColumnsL | New value for property columnsL |
- Since:
- 1.16.3
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {int} | iColumnsM | New value for property columnsM |
- Since:
- 1.16.3
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {int} | iColumnsXL | New value for property columnsXL |
- Since:
- 1.34.0
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {int} | iEmptySpanL | New value for property emptySpanL |
- Since:
- 1.16.3
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {int} | iEmptySpanM | New value for property emptySpanM |
- Since:
- 1.16.3
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {int} | iEmptySpanS | New value for property emptySpanS |
- Since:
- 1.16.3
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {int} | iEmptySpanXL | New value for property emptySpanXL |
- Since:
- 1.34.0
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {int} | iLabelSpanL | New value for property labelSpanL |
- Since:
- 1.16.3
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {int} | iLabelSpanM | New value for property labelSpanM |
- Since:
- 1.16.3
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {int} | iLabelSpanS | New value for property labelSpanS |
- Since:
- 1.16.3
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {int} | iLabelSpanXL | New value for property labelSpanXL |
- Since:
- 1.34.0
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |
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.
| {boolean} | bSingleContainerFullSize | New value for property singleContainerFullSize |
- Since:
- 1.34.0
| {sap.ui.layout.form.ResponsiveGridLayout} | Reference to this in order to allow method chaining |