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
Title
orToolbar
control to start a new group (FormContainer
). - Add a
Label
control to start a new row (FormElement
). - Add controls as input fields, text fields or other as needed.
- Use
LayoutData
to influence the layout for special cases in the single controls. For example, if aResponsiveLayout
is 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.ResponsiveFlowLayoutData
to them viasetLayoutData
method. Ensure that the sum of the weights in theResponsiveFlowLayoutData
is 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 |