The Art of Format – SAPUI5 Formatters – Part 1

Introduction

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.

Basics

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:
2.0

Format Options

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.

Model Type Currency
Model Type Currency

We can see that the currency type accepts two optional parameters, which is oFormatOptions and oConstraints.

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 sap.ui.model.type.Currency.

Then, we added some formatOptions, this will control how the text will be displayed on the screen using the options we provided (e.g. minIntergerDigits).

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.

Currency Type
Currency Type

Exploring the API, we can see that there are many options under NumberFormat available to us. Below are some of these options:

  • minIntegerDigits
  • maxIntegerDigits
  • minFractionDigits
  • maxFractionDigits
  • decimals
  • precision
  • groupingSeparator

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.

Constraints

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.

Currency Type Constraints
Currency Type Constraints

Based on the constructor definition, we can use the constraints to have a minimum and a maximum value for the control:

This will automatically limit the control to accept values that are not within the range of the constraint parameter.

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.

String Type
String Type

Conclusion

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:

To-do List App
To-do List App

Leave a Reply