Format number in VBCS page using functions

You can use oj-input-number tag for showing formatted number and use convertor options

But when using above component only for read-only purpose to show some values in grid or table, it doesn’t make sense to use input fields.

Instead we can use oj-bind-text field and pass data using following javascript function.

The JavaScript function will add necessary formatting to the number and return the value as string.

We can use number convertor functions to format the number in required format

Live code preview

JavaScript function

define(["ojs/ojconverter-number"], (numberConverter) => {
  "use strict";

  class PageModule {
    convertNumberToStr(amount) {
      var numberConvertor = new numberConverter.IntlNumberConverter({
        maximumFractionDigits: 2,
        useGrouping: true,
        currency: "USD",
        currencyDisplay: "symbol",
        style: "currency",
      });

      return numberConvertor.format(amount.rate);
    }
  }

  return PageModule;
});

Config options

Commonly used config options

to show currency amount like $12,324,599.38 or €12,324,599.38

{
  "maximumFractionDigits": 2,
  "useGrouping": true,
  "currency": "USD",
  "currencyDisplay": "symbol",
  "style": "currency",
}

to show percentage like 60% or 80.4%

{
  "maximumFractionDigits": 2,
  "useGrouping": false,
  "style": "percent",
}

to show whole number values

{
  "maximumFractionDigits": 0,
  "useGrouping": true,
  "style": "decimal"
}

References –

oj-input-number convertor related code

https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=inputNumber&demo=inputNumberConverter#

jsDoc for IntlNumberConverter ( to view all convertor options like useGrouping, currency )

https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.IntlNumberConverter.html

Live application URL ( to try out few configs )

https://khalil232.com/apps/ojet-apps/?ojr=number-format-sample