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.
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
core, respectively, are used for the mapping.
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.Titleelement (or Toolbar control) to start a new group (
- Add a Label control to start a new row (
- 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.
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
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.