Working with SAPUI5 smart controls

Occasionally, implementing SAPUI5 applications can become a repetitive task. Some applications may have a different use case and OData service but have exactly the same UI. Moreover, a lot of metadata comes with the backend OData service, for example, internationalization or field length, and if these metadata could be used from SAPUI5 controls, it would save a lot of developing time.

Smart Controls do use these metadata to provide powerful functionality. They are a specific category of SAPUI5 controls that have some special features in addition to the standard SAPUI5 features and thus make it easier to use the control in certain scenarios. Smart controls are part of the sap.ui.comp library and are focusing strongly on SAP Fiori elements.

The namespace sap.ui.comp contains the following control types:

• SmartField
• SmartTable and SmartList
• SmartFilterBar
• SmartChart and SmartMicrochart
• SmartVariants
• SmartGroup

SAP will continue to maintain the library and all of its controls in the future. However, there will be no development of new features unless specifically requested by SAP Fiori elements.

OData Service can be implemented using the SAP Gateway Builder or ABAP CDS (for example, leveraging the SAP RESTful Application Programming Model).

The figure shows the properties of an entity with the name Flight. As you can see, each property of the entity has various attributes. As the figure shows for some attributes, the attribute Sortable and Filterable is ticked. The property Currency is bound to the currency-code semantic. This information can be used at runtime in the application to provide certain features - for example, a value help at the Currency field.

Navigate through the following simulation to learn how to check the OData service implementation.

Now, we will take a closer look at smart controls, starting with SmartForms.

The SmartForm control displays form content and can be used in combination with SmartField controls and OData metadata annotations along with additional configuration. The control allows you to create a form with minimal effort. Depending on their user authorizations, the form enables users to do the following:

• Switch from display to edit mode
• Add and group fields
• Rename field labels
• Implement a user input check

SmartForms only define the layout, that is, the form. In order to be able to display data, we have to use sap.ui.comp.smartfield.SmartField controls.

SmartForm Controls consist of

• groups (sap.ui.comp.smartform.Group)
• group elements (sap.ui.comp.smartform.GroupElement)

The SmartForm control aggregates groups, and a group aggregates group elements. The group elements themselves aggregate elements of type sap.ui.core.Control

Group Elements are

collections of controls that are displayed along with a label.

Typically, a group element consists of exactly one control and the respective label.

The figure shows the implementation of a SAPUI5 view using SmartControls. As you can see inside the sap.ui.core.mvc.View implementation, we have XML-Aliases for the SAPUI5 namespaces of sap.ui.comp.smartfield and sap.ui.comp.smartform. The SmartField-Controls are bound to fields of the underlying OData service.

At runtime, the above view looks as follows. Take note that you have the above implementation in mind, especially the Price andPaymentsum fields.

As you can see from this figure, the Airfare and the Total fields do not simply show the price, they also display the currency. These values are displayed because the semantic information of the OData-service is used. The switch-to-edit button is visible in the UI. This is because the editTogglable was set to true in the view implementation.

When you select the button, the UI will provide the possibility to change data.

In the display above, not all fields are editable in the form. The information about what field can be changed is also fetched from the OData Service.

SmartField Controls

• Provide an efficient way to add input-enabled fields.
• Automatically adjust to the metadata of the underlying OData service, for example, by doing the following:
  • Hosting controls for editing and displaying the values of OData properties.
  • Providing value help automatically.
  • Performing input checks.
• Implement field control and support message handling.

SmartField controls can be used in different scenarios:

• As a standalone control, for example, in XML views.
• In combination with a SmartForm control.
• In combination with a SmartTable control.

They are used in particular as cell editor in editing scenarios.

Navigate through the following simulation to learn how to use smartfield controls.

The SmartTable control

• Is a wrapper control around any SAPUI5 table.
• Analyzes the $metadata document of an OData service and renders a table for a specific entitySet.
• Allows the consuming application to build list patterns in an efficient and consistent way and therefore makes it easy for the user to create tables without much effort.

The SmartTable control offers you additional built-in features, such as a row count and the ability to export to a spreadsheet application.

Navigate through the following simulation to learn how to implement a smart table