Format number in the number-field

[nook]

Hi Guy,

I am not sure we support format any number like input money $ 4,500,00 of number-field?
I try to config like this but it did not show

• type: component.number-field
  instanceId: contructionCostsMny
  options:
  icon: currency-dollar-circle
  label: Construction Costs
  minimum: 0
  initialValue: =@ctx.datasources.tempDealFormDatasource.contructionCostsMny
  format:
  signDisplay: always
  currency: USD
  currencyDisplay: symbol

[LeeG]

Hi Nook
Because you using a component.form with a component.number-field you need to add the style: isDisabled: true to allow the formatting of the number. You also need to remove signDisplay: always otherwise you will get a + in front of the number. Let me know if this works for you. You can also see this information in the following topic jc-number-field in the developer reference section on the documentation.

    children:
        - type: component.number-field
          instanceId: contructionCostsMny
          options:
            icon: currency-dollar-circle
            label: Construction Costs
            style:
              isDisabled: true
            format: 
              numberStyle: decimal
              currency: USD
            value: =@ctx.datasources.tempDealFormDatasource.contructionCostsMny

[DeWet]

Hi @nook ,

To expand on what @LeeG has posted.
Here are 2 examples of adding currency into a jig.
One method using a component.entity with an entity-field and one using a component.form with a number-field (similar to your scenario on top)

A few things to take note of. In both cases you will see we use numberStyle: currency to define the number style, as well as then specifying the currency: USD
This will pass the USD symbol in front of the number.

datasources:
  contructionCostsMny: 
    type: datasource.static
    options:
      data:
        - value: 7550000
       

children:
  - type: component.entity
    options:
      children:
        - type: component.entity-field
          options:
            label: Construction Costs - Entity field
            value:
              text: =@ctx.datasources.contructionCostsMny.value
              format:
                numberStyle: currency
                currency: USD
  
  
  - type: component.form
    instanceId: test
    options:
      children:
        - type: component.number-field
          instanceId: contructionCostsMny
          options:
            icon: currency-dollar-circle
            label: Construction Costs - Form number field
            style:
              isDisabled: true
            format: 
              numberStyle: currency
              currency: USD
            value: =@ctx.datasources.contructionCostsMny.value

 
 

Visual for both of the samples above.

Let us know if you need anything else

[nook]

So we still cannot use the format for input right?

like

[DeWet]

Hi Nook,
I have passed the request on to our development team.
Currently I dont think this is possible to add formatting like this on input focus like you have shown above.
I will reach out once I have feedback on this.