Class sap.ui.layout.form.FormModule: sap/ui/layout/form/Form

extends Control
known direct subclasses: Form

A Form control arranges labels and fields (like input fields) into groups and rows. There are different ways to visualize forms for different screen sizes.

A Form is structured into FormContainers. Each FormContainer consists of FormElements. The FormElements consists of a label and the form fields. A Form doesn't render its content by itself. The rendering is done by the assigned FormLayout. This is so that the rendering can be adopted to new UI requirements without changing the Form itself.

For the content of a Form, VariantLayoutData are supported to allow simple switching of the FormLayout. LayoutData on the content can be used to overwrite the default layout of the Form.

The Form (and its sub-controls) automatically add label and field assignment to enable screen reader support. It also adds keyboard support to navigate between the fields and groups inside the form.

Note: Do not put any layout controls into the FormElements. This could destroy the visual layout, keyboard support and screen-reader support.


Since: 1.16.0.
Constructor Summary
new sap.ui.layout.form.Form(sId?, mSettings?)Constructor for a new sap.ui.layout.form.Form.
Events borrowed from class sap.ui.core.Control
Method Summary
sap.ui.layout.form.Form.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.ui.layout.form.Form with name sClassName and enriches it with the information contained in oClassInfo.
sap.ui.layout.form.Form.getMetadata()Returns a metadata object for class sap.ui.layout.form.Form.
addAriaLabelledBy(vAriaLabelledBy)Adds some ariaLabelledBy into the association ariaLabelledBy.
addFormContainer(oFormContainer)Adds some formContainer to the aggregation formContainers.
destroyFormContainers()Destroys all the formContainers in the aggregation formContainers.
destroyLayout()Destroys the layout in the aggregation layout.
destroyTitle()Destroys the title in the aggregation title.
destroyToolbar()Destroys the toolbar in the aggregation toolbar.
getAriaLabelledBy()Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
getEditable()Gets current value of property editable.
getFormContainers()Gets content of aggregation formContainers.
getLayout()Gets content of aggregation layout.
getTitle()Gets content of aggregation title.
getToolbar()Gets content of aggregation toolbar.
getWidth()Gets current value of property width.
indexOfFormContainer(oFormContainer)Checks for the provided sap.ui.layout.form.FormContainer in the aggregation formContainers.
insertFormContainer(oFormContainer, iIndex)Inserts a formContainer into the aggregation formContainers.
removeAllAriaLabelledBy()Removes all the controls in the association named ariaLabelledBy.
removeAllFormContainers()Removes all the controls from the aggregation formContainers.
removeAriaLabelledBy(vAriaLabelledBy)Removes an ariaLabelledBy from the association named ariaLabelledBy.
removeFormContainer(vFormContainer)Removes a formContainer from the aggregation formContainers.
setEditable(bEditable)Sets a new value for property editable.
setLayout(oLayout)Sets the aggregated layout.
setTitle(vTitle)Sets the aggregated title.
setToolbar(oToolbar)Sets the aggregated toolbar.
setWidth(sWidth)Sets a new value for property width.
Constructor Detail
new sap.ui.layout.form.Form(sId?, mSettings?)

Constructor for a new sap.ui.layout.form.Form.

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

  • Aggregations

    • formContainers : sap.ui.layout.form.FormContainer[] (default)
    • title : sap.ui.core.Title|string
    • toolbar : sap.ui.core.Toolbar
    • layout : sap.ui.layout.form.FormLayout

  • Associations

In addition, all settings applicable to the base type sap.ui.core.Control can be used as well.

Parameters:
stringsId?ID for the new control, generated automatically if no ID is given
objectmSettings?initial settings for the new control
Method Detail
sap.ui.layout.form.Form.extend(sClassName, oClassInfo?, FNMetaImpl?): function

Creates a new subclass of class sap.ui.layout.form.Form 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.core.Control.extend.

Parameters:
stringsClassNameName of the class being created
objectoClassInfo?Object literal with information about the class
functionFNMetaImpl?Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata
Returns:
functionCreated class / constructor function
sap.ui.layout.form.Form.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.ui.layout.form.Form.
Returns:
sap.ui.base.MetadataMetadata object describing this class
addAriaLabelledBy(vAriaLabelledBy): sap.ui.layout.form.Form
Adds some ariaLabelledBy into the association ariaLabelledBy.
Parameters:
sap.ui.core.ID|sap.ui.core.ControlvAriaLabelledBythe ariaLabelledBy to add; if empty, nothing is inserted
Returns:
sap.ui.layout.form.FormReference to this in order to allow method chaining
Since:
1.28.0
addFormContainer(oFormContainer): sap.ui.layout.form.Form
Adds some formContainer to the aggregation formContainers.
Parameters:
sap.ui.layout.form.FormContaineroFormContainerthe formContainer to add; if empty, nothing is inserted
Returns:
sap.ui.layout.form.FormReference to this in order to allow method chaining
destroyFormContainers(): sap.ui.layout.form.Form
Destroys all the formContainers in the aggregation formContainers.
Returns:
sap.ui.layout.form.FormReference to this in order to allow method chaining
destroyLayout(): sap.ui.layout.form.Form
Destroys the layout in the aggregation layout.
Returns:
sap.ui.layout.form.FormReference to this in order to allow method chaining
destroyTitle(): sap.ui.layout.form.Form
Destroys the title in the aggregation title.
Returns:
sap.ui.layout.form.FormReference to this in order to allow method chaining
destroyToolbar(): sap.ui.layout.form.Form
Destroys the toolbar in the aggregation toolbar.
Returns:
sap.ui.layout.form.FormReference to this in order to allow method chaining
Since:
1.36.0
getAriaLabelledBy(): sap.ui.core.ID[]
Returns array of IDs of the elements which are the current targets of the association ariaLabelledBy.
Returns:
sap.ui.core.ID[]
Since:
1.28.0
getEditable(): boolean

Gets current value of property 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.

Default value is false.

Returns:
booleanValue of property editable
Since:
1.20.0
getFormContainers(): sap.ui.layout.form.FormContainer[]

Gets content of aggregation formContainers.

Containers with the content of the form. A FormContainer represents a group inside the Form.

Returns:
sap.ui.layout.form.FormContainer[]

Gets content of aggregation layout.

Layout of the Form. The assigned Layout renders the Form. We recommend using the ResponsiveGridLayout for rendering a Form, as its responsiveness allows the available space to be used in the best way possible.

Returns:
sap.ui.layout.form.FormLayout
getTitle(): sap.ui.core.Title|string

Gets content of aggregation title.

Title of the Form. Can either be a Title element or a string. If a Title element it used, the style of the title can be set.

Note: If a Toolbar is used, the Title is ignored.

Returns:
sap.ui.core.Title|string
getToolbar(): sap.ui.core.Toolbar

Gets content of aggregation toolbar.

Toolbar of the Form.

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.

Returns:
sap.ui.core.Toolbar
Since:
1.36.0
getWidth(): sap.ui.core.CSSSize

Gets current value of property width.

Width of the Form.

Returns:
sap.ui.core.CSSSizeValue of property width
indexOfFormContainer(oFormContainer): int
Checks for the provided sap.ui.layout.form.FormContainer in the aggregation formContainers. and returns its index if found or -1 otherwise.
Parameters:
sap.ui.layout.form.FormContaineroFormContainerThe formContainer whose index is looked for
Returns:
intThe index of the provided control in the aggregation if found, or -1 otherwise
insertFormContainer(oFormContainer, iIndex): sap.ui.layout.form.Form
Inserts a formContainer into the aggregation formContainers.
Parameters:
sap.ui.layout.form.FormContaineroFormContainerthe formContainer to insert; if empty, nothing is inserted
intiIndexthe 0-based index the formContainer should be inserted at; for a negative value of iIndex, the formContainer is inserted at position 0; for a value greater than the current size of the aggregation, the formContainer is inserted at the last position
Returns:
sap.ui.layout.form.FormReference to this in order to allow method chaining
removeAllAriaLabelledBy(): sap.ui.core.ID[]
Removes all the controls in the association named ariaLabelledBy.
Returns:
sap.ui.core.ID[]An array of the removed elements (might be empty)
Since:
1.28.0
removeAllFormContainers(): sap.ui.layout.form.FormContainer[]

Removes all the controls from the aggregation formContainers.

Additionally, it unregisters them from the hosting UIArea.

Returns:
sap.ui.layout.form.FormContainer[]An array of the removed elements (might be empty)
removeAriaLabelledBy(vAriaLabelledBy): sap.ui.core.ID
Removes an ariaLabelledBy from the association named ariaLabelledBy.
Parameters:
int|sap.ui.core.ID|sap.ui.core.ControlvAriaLabelledByThe ariaLabelledBy to be removed or its index or ID
Returns:
sap.ui.core.IDThe removed ariaLabelledBy or null
Since:
1.28.0
removeFormContainer(vFormContainer): sap.ui.layout.form.FormContainer
Removes a formContainer from the aggregation formContainers.
Parameters:
int|string|sap.ui.layout.form.FormContainervFormContainerThe formContainer to remove or its index or id
Returns:
sap.ui.layout.form.FormContainerThe removed formContainer or null
setEditable(bEditable): sap.ui.layout.form.Form

Sets a new value for property 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.

Default value is false.

Parameters:
booleanbEditableNew value for property editable
Returns:
sap.ui.layout.form.FormReference to this in order to allow method chaining
Since:
1.20.0
setLayout(oLayout): sap.ui.layout.form.Form
Sets the aggregated layout.
Parameters:
sap.ui.layout.form.FormLayoutoLayoutThe layout to set
Returns:
sap.ui.layout.form.FormReference to this in order to allow method chaining
setTitle(vTitle): sap.ui.layout.form.Form
Sets the aggregated title.
Parameters:
sap.ui.core.Title|stringvTitleThe title to set
Returns:
sap.ui.layout.form.FormReference to this in order to allow method chaining
setToolbar(oToolbar): sap.ui.layout.form.Form
Sets the aggregated toolbar.
Parameters:
sap.ui.core.ToolbaroToolbarThe toolbar to set
Returns:
sap.ui.layout.form.FormReference to this in order to allow method chaining
Since:
1.36.0
setWidth(sWidth): sap.ui.layout.form.Form

Sets a new value for property width.

Width of the Form.

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

Parameters:
sap.ui.core.CSSSizesWidthNew value for property width
Returns:
sap.ui.layout.form.FormReference to this in order to allow method chaining