Instantly format user number input before saving

Have you had the need to show a user the immediate formatted result before they save the input? Also after saving to a number field, existing data is displayed and saved in the same format, able to be edited again with a number.

All of this is possible with a simple Text Input (example below is a Classic control, but will work with a Modern item using .Value instead of .Text ).

Firsly, put this OnChange of the Text control.

UpdateContext(
   {
      varInput: Text(
         Value(Self.Text),
         "$#,###.00"
      )
   }
);
Reset(Self)

and the Format to

TextFormat.Text

Set the DelayOutput to

true

Now the Default of the Text control (assuming an existing value needs to be displayed)

Coalesce(
   varInput,
   Text(
      ThisItem.YourNumberField,
      "$#,###.00"
   )
)

If the Form is only used for new records

varInput

and the Update of the Data Card

Value(
   Substitute(
      YourTextInput.Text,
      "$",
      ""
   )
)

Also Reset varInput after you save (OnSuccess of your Form) and at Screen OnVisible

UpdateContext({varInput: Blank()})