UI5 brings with it many exciting features, such as type binding.

Today we will take a closer look at this concept and demonstrate how the format of a currency input can be customized to your needs. UI5 offers its own unique data type named Currency which can be used to achieve this.

First, let’s take a closer look at what type binding is in order to understand how it generally works and how to apply this knowledge on when using other data types like Date, Boolean and String (see a complete list of available types here: https://sapui5.hana.ondemand.com/#/api/sap.ui.model.type) later on

Type binding refers to the “binding” of model values to data types of the class sap.ui.model.Type and the classes inheriting from it, such as sap.ui.model.SimpleType or our sap.ui.model.type.Currency. By “binding” the values, they are automatically formatted by UI5, depending on what you use.

Type binding can be used when you want to format values existing in your model before displaying them in your UI, as is the case in our example.

Binding syntax for the type sap.ui.model.type.Currency

{
  parts:[{
     path:'modelname>variablepath' -> the model path pointing to the value which we want to format. Please keep in mind whether that path is absolute or relative.
     },{
     path:'modelname>/variablepath' -> model path pointing to the currency identifier. Can be a currency symbol like '€' for Euro or an ISO code ('EUR') as specified by CLDR
  }],
  type:'sap.ui.model.type.Currency', -> Specifies the Currency data type to be used for the value formatting in your binding
  formatOptions:{
     /// Optional, this object provides a set of fields to customize the formatting behavior, find the complete list of available fields here
  }
}

Since we now have our binding syntax ready, the only thing left to do is to apply it on our widget in Simplifier.

To do this, we simply open the UI Designer of our application, select the widget on the respective screen and then click on the paper clip icon next to the property to be bound and formatted. This will open up the binding expression editor where we can insert our binding syntax. Finally, we can confirm and then deploy the application to activate the binding and its formatting