Format Text as Currency in Power Apps

One of the greatest things about Power Apps is that app development is more accessible to process owners and process workers. Whoever may be closest to a problem or inefficiency has an opportunity to make something better. There is a learning curve and sometimes documentation is not available and straight forward features are not a part of Power Platform tools and a vision of how to put an idea into existence is hard to do. That realization is really the driving force of each post on this blog.

With that in mind, let’s review the idea of currency formatted text in Power Apps. It is pretty easy to apply currency formatting to text in some controls, like a label. It is a bit more difficult to apply currency formatting to text in a text input control while a user is actively interacting with the control but there are viable options that yield good results.

Today, we will look at two methods for formatting currency. I call them Formatting after typing and formatting while typing, respectively. In my example, I have two fields (along with some labels).

In the Currency formatted after typing text input control, the format is applied after the user moves on to another part of the form or another control.

In the Currency formatted while typing text input control, the format is immediately applied to the label that appears “in” the field in green text.

Apply currency formatting after typing in Power Apps in four easy steps

1. Start with a text input control. This can be a new blank text input control or one that exists in a data card from a data source.
2. With the text input control selected, click the Advanced pane. (If your control is from a data source, unlock the Advanced pane.)
3. In the OnChange property in the Advanced pane enter the following code:
   
   Set(varCurrency,Text(RoundUp(Value(TextInput3.Text),2),"[$-en-US]$#,###.00"))
   
   In the code above, I set a variable named varCurrency but you can call your variable whatever you want. Then I use the Text function to pass in the value, (RoundUp(Value(TextInput3.Text),2), that needs formatting, followed by the format “[$-en-US]$#,###.00”). This is a good option because I would want the currency value rounded up if someone entered 123.131 in the field. This would round up to $123.14 which is expected with currency. In my case I have .00 in the format because I always want cents displayed even if there are no cents. If there are cents, whatever the user enters will be displayed.
4. Next, set the Default property for the text input control to the name of your variable. In my case that is varCurrency. Now when I type a number in the text input control and then press tab or click a different control the value in the text input control is displayed as currency.

Apply currency formatting while typing in Power Apps in two easy steps

Maybe I don’t need to get that involved with rounding and variables and I want to do is simply assure my app’s users that their input is currency. I can display their input in a label and format the label text as currency as they type.

1. Start with the text input control and add a label and position the label so that it is on top of the text input control and off to the right. Make the label a little less than half the width of the text input control. If you are working with a data card from a data source, first select the text input control and with the control selected, add a label so that appears within the data card.
2. With the label selected, go to the Advanced pane and set the Text property for the label to the following code:
   
   Text(Value(TextInput2.Text),"[$-en-US],$#,###.00")
   
   That’s it. This is how the text input control and label looks:
   

Notes on applying currency formatting

Notice how in the first example, I used the RoundUp function but in the second example I did not use the RoundUp function.

I did not have to use the RoundUp function in the first example and I could have used the RoundUp function in the second example. In reality, I use the RoundUp function whenever I know a user will physically type in a value. If someone happens to enter 123.142, I need the value to be rounded up to 123.15. If I do not use the round up function the value will be 123.14 which is not customary for monetary values.

In any case, both methods shown in examples 1 and 2 are interchangeable between Formatting after typing and Formatting while typing.

Make the controls more user-friendly

Consider toggling on the Clear button property for the input fields. This will add a little X (clear icon) within the input field that end users may click or tap to clear what they have typed in the field.