SAPUI5 allows you to format text in different ways to suit your application need. In this post, we will cover several ways to format text depending on the complexity and application logic.
Ordinary text can be bound like this, given we have a float number (e.g. 2.0) from a data source:
this will output an ordinary text:
However, if the currency format of the locale uses a different format, for example in Germany.
Germany (DE): 10.000.000
This is troublesome and may send a different impression to the user. SAPUI5 have some formatting options available, depending on the property data type of the control.
Since we are dealing with currency in this example, let’s look at the currency class.
We can see that the currency type accepts two optional parameters, which is
So how are we gonna use this to format our text?
We can directly use the model type for our data binding on the control in this manner:
First, we indicated the
path to which this property will get its data.
Secondly, we added the data type of the property, which is
Then, we added some
formatOptions, this will control how the text will be displayed on the screen using the options we provided (e.g.
What are my options?
Options are subjected to the model type used, in this case, currency. Going thru the constructor definition of currency type, we saw that it uses NumberFormat.
Exploring the API, we can see that there are many options under NumberFormat available to us. Below are some of these options:
Note: The model type will follow the default locale of the application.
So if you want to change the formatted text, make sure to apply the correct locale to your application or it will default to the browser’s locale.
So far, we have control how the data will be displayed on the control. How about controlling the user input? and preventing malformed input? This is where constraints come into play.
Based on the constructor definition, we can use the constraints to have a
minimum and a
maximum value for the control:
Note: Constraints vary based on the model type.
Always remember to check the constraints of the model type. For example, in String type, the constraints are very different and offers a lot of options.
In formatting basic text to appropriate types, it is recommended to check the model type. This helps eliminate unnecessary custom functions or development. Utilize as many standard classes and helper functions so that you can focus on business logic.
Also, please let me know what you think of this post and share your learnings in the comment section below.
I also created a run through of SAPUI5 basic application development on the link below: