Structuring the UI with Controls

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.

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.

The sap.m.Panel control provides a container for grouping and displaying information.

It consists of a title bar that can be used to display a header text, an optional header toolbar, an optional info toolbar, and a content area.

The expandable property (default value: false) can be used to specify whether the content and the info toolbar (if present) of the panel can be collapsed and expanded.

The expanded property (default value: false) specifies whether the panel is initially expanded or not.

The headerToolbar aggregation allows the use of a custom toolbar as header for the panel. The header toolbar is visible in both expanded and collapsed state. It can be used to add extra controls for user interactions in the header.

The infoToolbar aggregation allows the use of a custom toolbar as information bar for the panel. The info toolbar is placed below the header and is visible only in expanded state. It can be used to show extra information to the user.

The content aggregation determines the content of the panel. It can contain any number of controls of any type.

For more information about the panel, see the documentation.

The sap.m.Page control is a container control that holds one whole screen of an application. It is often used as the root control of a view (see the following figure).

The page has three distinct areas: a header, a content area, and a footer.

The topmost area of the page is occupied by the header. The title property of the page can be used to set a title that will appear in the header bar.

A navigation button is displayed on the left side of the header bar if the showNavButton property is set to true. When the navigation button is pressed, the navButtonPress event is fired. In the example in the figure, the event handler onNavPress is attached to the event to be able to react to the button click.

The content aggregation determines the content of the page. It occupies the main part of the page and can contain any number of controls of any type.

The footer is optional and occupies the bottom part of the page.

For more information about the page control, see the documentation.