Before implementing a form, let's first try to understand the structure of a form.
Watch the video to understand the structure of a form.
Implementing a Simple Form
Now that you have understood the overall structure of a form, we will look at the implementation of a form using the SimpleForm control.

The libraries sap.ui.layout.form
and sap.ui.core
are required for working with the SimpleForm
control. The names of these libraries must therefore be mapped to XML namespaces in an XML view. In the example in the figure, Using the SimpleForm Control
, the prefixes f
and core
, respectively, are used for the mapping.
The layout
property of the <f:SimpleForm>
tag specifies the form layout that is used to render the form content. There are several layouts available. It is recommended to use the ColumnLayout
, as its responsiveness uses the space available in the best way possible.
If editable controls are used as content, the editable
property of the <f:SimpleForm>
tag must be set to true
, otherwise to false
. If the editable
property is set incorrectly, there will be visual issues like wrong label alignment or wrong spacing between the controls.
The content of the form is specified via the content
aggregation. It is structured in the following way:
- Add a
sap.ui.core.Title
element (or Toolbar control) to start a new group (FormContainer
). - Add a Label control to start a new row (
FormElement
). - Add controls such as input and text fields as needed. They will be assigned to the row (
FormElement
) that started with the last label.
Adding a Toolbar
Let's look at how to add a toolbar to a form.

The toolbar
aggregation can be used to optionally add a toolbar to the SimpleForm
control. In the example shown in the figure, Adding a Toolbar, a sap.m.Toolbar
control is added to this aggregation. The controls to be displayed in the toolbar are placed in its content
aggregation.
The ToolbarSpacer
used adds horizontal spacing between the elements of a sap.m.Toolbar
. This will cause the button to be displayed at the end of the line.
In addition to the text Create Customer, an icon is also displayed on the button. The prefix sap-icon://
indicates that the icon comes from the icon font delivered with SAPUI5. It contains more than 500 icons.
For more details about the SimpleForm
control, see the documentation.