Working with 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.

In the next lesson, 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.

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.

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

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