How to Add Commas to a Number in PowerApps Form New Mode

power

If you didn't stumble upon this by mere curiosity, you've probably encountered the challenge of formatting numbers in a PowerApps form to include commas. This simple formatting can make data entry more accessible for both you, as the app creator, and anyone else who uses your system. It ensures that users don't need to worry about precision and can freely input numbers without the stress of counting zeros.

Now, let's swiftly delve into the problem and provide an immediate solution.

What you might have tried
You may have attempted various formatting methods like:

Text(NumberLabel.Text, "[$-en-US]#,###")   

 (Text(Parent.Default),"[$-en-US]###,###,###.00")

 or any other format you're familiar with.

Why it Didn't Work
While these methods should work in different form modes, the issue arises when users are making real-time changes without storing the data. These approaches are typically suitable when reading data from a source or collection.

The Solution
To make this work effectively, we need to track the user's changes. To do this, we make use of the OnChange property of your form DataCard.

In my scenario, as you can see in the form below, the Estimated hotel cost and Estimated airfare numbers aren't formatted as expected, despite being numbers..

To resolve this, locate the DataCardValue for the item, and in the OnChange property, enter the following formula:

Set(
   VarEstimatedHotelCostFormat,
   Text(
       Value(DataCardValue34_1.Text),
       "[$-en-US]###,###,###.00"
   )
);
Reset(DataCardValue34_1)

In this PowerApps formula, takes a number from the input field DataCardValue34_1 within the form, and converts it into a well-formatted number with commas for thousands separators and two decimal places. The formatted result is saved in the VarEstimatedHotelCostFormat variable.

Next, replace the Default property of the DataCardValue, from Parent.Default to the variable you just created. Now, when you enter the number, it formats as you type. Repeat this formula in all your number DataCardValues to provide a user-friendly number input experience. 

Note
Because this listens to a Variable set on the OnChange property, you need to reset it whenever a user accesses the form. On the OnVisible property of the page where your form is located, update the variable to be empty:

If(TravelRequestForm.Mode =FormMode.New,Set(VarEstimatedHotelCostFormat,"")

Hopefully, this makes things easy for you. Happy implementing, and see you in the next PowerApps QuickFixes post! 

Share this Post!