SAP ui5 data type learning notes


In sapui5data typeUsed as a mechanism to validate user input (for example, “hello” is not an acceptable value for the order quantity) and to ensure that the data is correctly formatted and displayed on the UI (for example, displaying 1234567 as 1234567 when needed). When and supportBidirectional bindingWhen used in conjunction with data models – which is the best way to use them – the data type ensures that the data in the model is updated only when the user provides valid values.

User input verification can also be completed by writing verification logic for each input field in the event handler; You can format the displayed value by writing and using a formatter anywhere the value is displayed. But obviously, this approach is not scalable — as applications grow, the amount of work required to maintain the development done with this approach will increase rapidly.

The sapui5 framework comes with some common data types that can be used in applications. These include Boolean values, dates, and floating point numbers. You can adjust the behavior of bindings that use data types by specifying constraints and formatting options. Constraints, such as the minimum and maximum values of float, can be used to limit the range of values considered valid. Any user input that violates the constraint is considered invalid, and the corresponding path in the model will not be updated. On the other hand, specify formatting options to configure how specific values should be displayed on the UI (such as float’s groupingseparator and decimalseparator). The value of the corresponding path in the model will be formatted according to the format options of the type before being displayed. In addition, the user can also enter input with format (such as 12345) or without format (12345), both of which are considered valid.

The following figure shows the sap ui5 standardIntegerData types and theirconstraintsUsage in XML view:

SAP ui5 data type learning notes

How to create a sap ui5 custom data type?

To start creating custom data types, we extendedsap.ui.model.SimpleTypeClass and overridesSimpleTypeThree methods defined in the parent class — parsevalue, validatevalue and formatvalue

SAP ui5 data type learning notes


This method receives user input as a parameter. The work of this method is to convert the user’s input value (external format) into an appropriate internal representation of the value (internal format).


This method receives the parsed value (that is, the internal representation of the value determined by the parsevalue method) and must determine whether the value is valid. If it is determined that the input is invalid, SAP should be thrown in this method ui. model. An exception of type validateexception.


The method receives the parsed value (internal value) as a parameter and must return a formatted value (i.e. the corresponding external value). This formatted value is displayed on the UI.

Before we start implementing our custom data types, let’s take a quick look at when the framework calls each of these three methods. From the figure, we can see that the order in which the framework triggers these three methods is parsevalue() – > validatevalue() – > formatvalue().

SAP ui5 data type learning notes