Change or format user input in TextField<BigDecimal> field


I want to have a custom TextField component which can change the use input as follows:

  1. Based on a setting, it round up the final field value to the nearest 100.
    e.g. 123456789 => 123,456,800

  2. Convert K to '000, M to '000,000, B to '000,000,000
    e.g. If the user enters 123.4M, the field will change to 123,400,000

How can I pre-process the text/value input into the TextField, before firing the valueChangeEvent and saving the final value ?



I’d recommend using DataTypes mechanism. Depending on your needs you have 2 options:

  1. Replace default BigDecimalDatatype if you need such behaviour globally for all BigDecimal fields, e.g.:
public class BigDecimalDatatypeExt extends BigDecimalDatatype {

    public BigDecimalDatatypeExt(Element element) {

    protected Number parse(String value, NumberFormat format) throws ParseException {
        // custom parsing logic

register custom datatype in metadata.xml:

    <datatype id="decimal" class=""
              format="0.####" decimalSeparator="." groupingSeparator=""/>
  1. if you need such behaviour for certain fields, you can create a new datatype and assign it to an entity attribute. You can find example in the doc. The rest is the same, you parse String value according to your rules.