An example of Fiori Globalization implementation - the number format mistery

[JerryWang]

You might observe the same number value but displayed with different format if you log on the same system with different user.



The user with Decimal Notation setting " " will see the format "1.880,00" and setting "Y" will see "1 880,00". What has happened under the hood?



If you monitor the network tab in Chrome development tool when Fiori launchpad is initialized for the very beginning, you can find the http request below:



The response contains the Defaults user setting stored in ABAP backend. The attribute "numberFormat" is related to the number format being displayed.



In Configuration.js, the corresponding enumeration variable is defined for each type of number format.



The main logic for number format is implemented in file NumberFormat.js. As the variable name has already given a good hint, the integer part and fraction part of 1880.00 are parsed and stored into the two variables separately.

The logic of the following code:

1. Since a number is displayed as several groups and each group consists of THREE digits, so in code 627, the position of group is calculated by MOD operation against 3.

2. For user setting "Y", the group separator character is " " and decimal separator is "," , stored in corresponding attribute in variable oOptions.

3. You can debug the NumberFormat.format in the run time to have a better understanding on the logic above. Suppose you do not the exact location of NumberFormat.js, just switch to debug mode, open Chrome development tool and go to Sources tab,

press Ctrl+O and type "NumberF" and then there is auto-complete function which lists all potential results.

Click the second one (  ) and you will navigate to NumberFormat.js. Hover the mouse and you can see its absolute path in tooltip.

Now you can set breakpoint and debug.

For more tips about Chrome development tool used in my daily work, please refer to this blog.

Enjoy debugging!