Class sap.ui.layout.form.SimpleFormModule: sap/ui/layout/form/SimpleForm
The SimpleForm provides an easy-to-use API to create simple forms. Inside a SimpleForm, a Form control is created along with its FormContainers and FormElements, but the complexity in the API is removed.
- A new title starts a new group (
FormContainer) in the form. - A new label starts a new row (
FormElement) in the form. - All other controls will be assigned to the row (
FormElement) started with the last label.
LayoutData to influence the layout for special cases in the Input/Display controls. Note: If a more complex form is needed, use Form instead.Since: 1.16.0.
sClassName and enriches it with the information contained in oClassInfo.ariaLabelledBy.ariaLabelledBy.singleContainerFullSize. 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
- maxContainerCols : int (default: 2)
- minWidth : int (default: -1)
- width : sap.ui.core.CSSSize
- editable : boolean
- labelMinWidth : int (default: 192)
- layout : sap.ui.layout.form.SimpleFormLayout (default: ResponsiveLayout)
- 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)
- backgroundDesign : sap.ui.layout.BackgroundDesign (default: Translucent)
- Aggregations
In addition, all settings applicable to the base type sap.ui.core.Control 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.core.Control.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 |
ariaLabelledBy. | {string|sap.ui.core.Control} | vAriaLabelledBy | the ariaLabelledBy to add; if empty, nothing is inserted |
- Since:
- 1.32.0
| {sap.ui.layout.form.SimpleForm} | Reference to this in order to allow method chaining |
content. | {sap.ui.core.Element} | oContent | the content to add; if empty, nothing is inserted |
| {sap.ui.layout.form.SimpleForm} | Reference to this in order to allow method chaining |
content. | {sap.ui.layout.form.SimpleForm} | Reference to this in order to allow method chaining |
title. - Since:
- 1.16.3
| {sap.ui.layout.form.SimpleForm} | Reference to this in order to allow method chaining |
toolbar. - Since:
- 1.36.0
| {sap.ui.layout.form.SimpleForm} | Reference to this in order to allow method chaining |
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.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
Default value is true.
- Since:
- 1.34.0
| {boolean} | Value of property adjustLabelSpan |
ariaLabelledBy. - Since:
- 1.32.0
| {sap.ui.core.Control[]} |
backgroundDesign. Specifies the background color of the SimpleForm content.
The visualization of the different options depends on the used theme.
Default value is Translucent.
- Since:
- 1.36.0
| {sap.ui.layout.BackgroundDesign} | Value of property backgroundDesign |
breakpointL. Breakpoint between Medium size and Large size.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
Default value is 1024.
- Since:
- 1.16.3
| {int} | Value of property breakpointL |
breakpointM. Breakpoint between Small size and Medium size.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
Default value is 600.
- Since:
- 1.16.3
| {int} | Value of property breakpointM |
breakpointXL. Breakpoint between Medium size and Large size.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
Default value is 1440.
- Since:
- 1.34.0
| {int} | Value of property breakpointXL |
columnsL. Form columns for large size. The number of columns for large size must not be smaller than the number of columns for medium size.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
Default value is 2.
- Since:
- 1.16.3
| {int} | Value of property columnsL |
columnsM. Form columns for medium size.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
Default value is 1.
- Since:
- 1.16.3
| {int} | Value of property columnsM |
columnsXL. Form 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: This property is only used if a ResponsiveGridLayout is used as a layout.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 |
content. The content of the form is structured in the following way:
- Add a
TitleorToolbarcontrol to start a new group (FormContainer). - Add a
Labelcontrol to start a new row (FormElement). - Add controls as input fields, text fields or other as needed.
- Use
LayoutDatato influence the layout for special cases in the single controls. For example, if aResponsiveLayoutis used as a layout, the form content is weighted using weight 3 for the labels and weight 5 for the fields part. By default the label column is 192 pixels wide. If your input controls should influence their width, you can addsap.ui.layout.ResponsiveFlowLayoutDatato them viasetLayoutDatamethod. Ensure that the sum of the weights in theResponsiveFlowLayoutDatais not more than 5, as this is the total width of the input control part of each form row.
TextField takes 4 and the TextView takes 1 weight (using ResponsiveLayout):
new sap.ui.commons.Label({text:"Label"});
new sap.ui.commons.TextField({value:"Weight 4",
layoutData:new sap.ui.layout.ResponsiveFlowLayoutData({weight:4})}),
new sap.ui.commons.TextView({text:"Weight 1",
layoutData: new sap.ui.layout.ResponsiveFlowLayoutData({weight:1})}),
Note: Do not put any layout controls in here. This could destroy the visual layout, keyboard support and screen-reader support.
| {sap.ui.core.Element[]} |
editable. Applies a device-specific and theme-specific line-height to the form rows if the form has editable content. If set, all (not only the editable) rows of the form will get the line height of editable fields. The accessibility aria-readonly attribute is set according to this property. Note: The setting of the property has no influence on the editable functionality of the form's content.
| {boolean} | Value of property editable |
emptySpanL. Number of grid cells that are empty at the end of each line on large size.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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: This property is only used if a ResponsiveGridLayout is used as a layout. If the default value -1 is not overwritten with the meaningful one then the emptySpanL value is used (from the backward compatibility reasons).
Default value is -1.
- Since:
- 1.34.0
| {int} | Value of property emptySpanXL |
labelMinWidth. Specifies the min-width in pixels of the label in all form containers. Note: This property is only used if a ResponsiveLayout is used as a layout.
Default value is 192.
| {int} | Value of property labelMinWidth |
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.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
Default value is 2.
- Since:
- 1.16.3
| {int} | Value of property labelSpanM |
labelSpanS. Default span for labels in small size. Note: This property is only used if a ResponsiveGridLayout is used as a layout.
Default value is 12.
- Since:
- 1.16.3
| {int} | Value of property labelSpanS |
labelSpanXL. Default span for labels in extra large size.
Note: This property is only used if a ResponsiveGridLayout is used as a layout. If the default value -1 is not overwritten with the meaningful one then the labelSpanL value is used (from the backward compatibility reasons).
Default value is -1.
- Since:
- 1.34.0
| {int} | Value of property labelSpanXL |
layout. The FormLayout that is used to render the SimpleForm. We suggest using the ResponsiveGridLayout for rendering a SimpleForm, as its responsiveness uses the space available in the best way possible.
Default value is ResponsiveLayout.
| {sap.ui.layout.form.SimpleFormLayout} | Value of property layout |
maxContainerCols. The maximum amount of groups (FormContainers) per row that is used before a new row is started. Note: If a ResponsiveGridLayout is used as a layout, this property is not used. Please use the properties ColumnsL and ColumnsM in this case.
Default value is 2.
| {int} | Value of property maxContainerCols |
minWidth. The overall minimum width in pixels that is used for the SimpleForm. If the available width is below the given minWidth the SimpleForm will create a new row for the next group (FormContainer). The default value is -1, meaning that inner groups (FormContainers) will be stacked until maxCols is reached, irrespective of whether a maxWidth is reached or the available parents width is reached. Note: This property is only used if a ResponsiveLayout is used as a layout.
Default value is -1.
| {int} | Value of property minWidth |
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 columnsL and columnsM are ignored.
In all other cases the FormContainer is displayed in the size of one column.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
Default value is true.
- Since:
- 1.34.0
| {boolean} | Value of property singleContainerFullSize |
title. Title element of the SimpleForm. Can either be a Title control, or a string.
- Since:
- 1.16.3
| {sap.ui.core.Title|string} |
toolbar. Toolbar of the SimpleForm.
Note: If a Toolbar is used, the Title is ignored. If a title is needed inside the Toolbar it must be added at content to the Toolbar. In this case add the Title to the ariaLabelledBy association.
- Since:
- 1.36.0
| {sap.ui.core.Toolbar} |
width. Width of the form.
- Since:
- 1.28.0
| {sap.ui.core.CSSSize} | Value of property width |
sap.ui.core.Element in the aggregation content. and returns its index if found or -1 otherwise. | {sap.ui.core.Element} | oContent | The content whose index is looked for |
| {int} | The index of the provided control in the aggregation if found, or -1 otherwise |
content. | {sap.ui.core.Element} | oContent | the content to insert; if empty, nothing is inserted |
| {int} | iIndex | the 0-based index the content should be inserted at; for a negative value of iIndex, the content is inserted at position 0; for a value greater than the current size of the aggregation, the content is inserted at the last position |
| {sap.ui.layout.form.SimpleForm} | Reference to this in order to allow method chaining |
ariaLabelledBy. - Since:
- 1.32.0
| {sap.ui.core.Control[]} | An array of the removed elements (might be empty) |
content. Additionally, it unregisters them from the hosting UIArea.
| {sap.ui.core.Element[]} | An array of the removed elements (might be empty) |
ariaLabelledBy. | {int|string|sap.ui.core.Control} | vAriaLabelledBy | The ariaLabelledByto be removed or its index or ID |
- Since:
- 1.32.0
| {sap.ui.core.Control} | the removed ariaLabelledBy or null |
content. | {int|string|sap.ui.core.Element} | vContent | The contentto remove or its index or id |
| {sap.ui.core.Element} | The removed content or null |
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.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.SimpleForm} | Reference to this in order to allow method chaining |
backgroundDesign. Specifies the background color of the SimpleForm content.
The visualization of the different options depends on the used theme.
When called with a value of null or undefined, the default value of the property will be restored.
Default value is Translucent.
| {sap.ui.layout.BackgroundDesign} | sBackgroundDesign | New value for property backgroundDesign |
- Since:
- 1.36.0
| {sap.ui.layout.form.SimpleForm} | Reference to this in order to allow method chaining |
breakpointL. Breakpoint between Medium size and Large size.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.SimpleForm} | Reference to this in order to allow method chaining |
breakpointM. Breakpoint between Small size and Medium size.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.SimpleForm} | Reference to this in order to allow method chaining |
breakpointXL. Breakpoint between Medium size and Large size.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.SimpleForm} | Reference to this in order to allow method chaining |
columnsL. Form columns for large size. The number of columns for large size must not be smaller than the number of columns for medium size.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.SimpleForm} | Reference to this in order to allow method chaining |
columnsM. Form columns for medium size.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.SimpleForm} | Reference to this in order to allow method chaining |
columnsXL. Form 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: This property is only used if a ResponsiveGridLayout is used as a layout.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.SimpleForm} | Reference to this in order to allow method chaining |
editable. Applies a device-specific and theme-specific line-height to the form rows if the form has editable content. If set, all (not only the editable) rows of the form will get the line height of editable fields. The accessibility aria-readonly attribute is set according to this property. Note: The setting of the property has no influence on the editable functionality of the form's content.
When called with a value of null or undefined, the default value of the property will be restored.
| {boolean} | bEditable | New value for property editable |
| {sap.ui.layout.form.SimpleForm} | 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.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.SimpleForm} | 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.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.SimpleForm} | 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.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.SimpleForm} | 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: This property is only used if a ResponsiveGridLayout is used as a layout. If the default value -1 is not overwritten with the meaningful one then the emptySpanL 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} | iEmptySpanXL | New value for property emptySpanXL |
- Since:
- 1.34.0
| {sap.ui.layout.form.SimpleForm} | Reference to this in order to allow method chaining |
labelMinWidth. Specifies the min-width in pixels of the label in all form containers. Note: This property is only used if a ResponsiveLayout is used as a layout.
When called with a value of null or undefined, the default value of the property will be restored.
Default value is 192.
| {int} | iLabelMinWidth | New value for property labelMinWidth |
| {sap.ui.layout.form.SimpleForm} | 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.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.SimpleForm} | 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.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.SimpleForm} | Reference to this in order to allow method chaining |
labelSpanS. Default span for labels in small size. Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.SimpleForm} | Reference to this in order to allow method chaining |
labelSpanXL. Default span for labels in extra large size.
Note: This property is only used if a ResponsiveGridLayout is used as a layout. If the default value -1 is not overwritten with the meaningful one then the labelSpanL 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} | iLabelSpanXL | New value for property labelSpanXL |
- Since:
- 1.34.0
| {sap.ui.layout.form.SimpleForm} | Reference to this in order to allow method chaining |
layout. The FormLayout that is used to render the SimpleForm. We suggest using the ResponsiveGridLayout for rendering a SimpleForm, as its responsiveness uses the space available in the best way possible.
When called with a value of null or undefined, the default value of the property will be restored.
Default value is ResponsiveLayout.
| {sap.ui.layout.form.SimpleFormLayout} | sLayout | New value for property layout |
| {sap.ui.layout.form.SimpleForm} | Reference to this in order to allow method chaining |
maxContainerCols. The maximum amount of groups (FormContainers) per row that is used before a new row is started. Note: If a ResponsiveGridLayout is used as a layout, this property is not used. Please use the properties ColumnsL and ColumnsM in this case.
When called with a value of null or undefined, the default value of the property will be restored.
Default value is 2.
| {int} | iMaxContainerCols | New value for property maxContainerCols |
| {sap.ui.layout.form.SimpleForm} | Reference to this in order to allow method chaining |
minWidth. The overall minimum width in pixels that is used for the SimpleForm. If the available width is below the given minWidth the SimpleForm will create a new row for the next group (FormContainer). The default value is -1, meaning that inner groups (FormContainers) will be stacked until maxCols is reached, irrespective of whether a maxWidth is reached or the available parents width is reached. Note: This property is only used if a ResponsiveLayout is used as a layout.
When called with a value of null or undefined, the default value of the property will be restored.
Default value is -1.
| {int} | iMinWidth | New value for property minWidth |
| {sap.ui.layout.form.SimpleForm} | 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 columnsL and columnsM are ignored.
In all other cases the FormContainer is displayed in the size of one column.
Note: This property is only used if a ResponsiveGridLayout is used as a layout.
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.SimpleForm} | Reference to this in order to allow method chaining |
title. | {sap.ui.core.Title|string} | vTitle | The title to set |
- Since:
- 1.16.3
| {sap.ui.layout.form.SimpleForm} | Reference to this in order to allow method chaining |
toolbar. | {sap.ui.core.Toolbar} | oToolbar | The toolbar to set |
- Since:
- 1.36.0
| {sap.ui.layout.form.SimpleForm} | Reference to this in order to allow method chaining |
width. Width of the form.
When called with a value of null or undefined, the default value of the property will be restored.
| {sap.ui.core.CSSSize} | sWidth | New value for property width |
- Since:
- 1.28.0
| {sap.ui.layout.form.SimpleForm} | Reference to this in order to allow method chaining |