“I know how to show number as currency in a display mode, but what about edit mode in the Power Apps text input control?”
It’s quite easy to format a number you’re just showing in Power Apps. You take the number, apply the Text(…) function on it and define the desired format. But it gets a bit more complicated once you start working on an edit form. When you type in a number in the text input control, it’ll stay as a number for the whole time. No spaces, no decimal places, a number that might be harder to read the longer it gets. Wouldn’t it be nice if you could add some kind of formatting also on the edit form?
Before we get to the solution, I should mention that it’s not a real time formatting. You’ll have to click outside of the control to format the number, but I still think it’s worth it.
Add format to the text input control
To format a number, you must connect it to some action – in this case it’s the OnChange property of the text input. Once you type in the number and change focus from the control, it’ll trigger the function.
Start with the text input control and set it to Text format. It can’t be just a number as you want to use the Text(…) function for the formatting.
As already mentioned, the format will be applied once you change focus from the control – on OnChange. But since you can’t self reference a control, use a context variable as a workaround.
In the example below I’m taking the contents of the control (Self.Text – the number), formatting it to separate thousands by a comma (US formatting) and adding “Kฤ” (representation of the Czech crown currency). Since in Czech we use spaces to separate thousands and not commas, I format it once more into the “cs” locale. You can find your locale in this list.
UpdateContext(
{
varFormat: Text(
Value(Self.Text),
"[$-en-US]#,### Kฤ",
"cs"
)
}
)
Apply the format
But as of now it won’t do anything visible, it just sets the context variable to the desired text. I still have to tell the control that it should show this variable content via Default.
Now, if you type in a number in such a field and deselect the control, it’ll format it.
Note: when storing the value in a SharePoint / Dataverse column, make sure that you store it in the right format! That could mean removing the formatting before you Patch(…) it.
Reset the value
Since you’re now using a variable in the Default of the text field, and the variable is set only OnChange, you should also take care of clearing it when needed. By clearing I mean setting the variable to Blank() or a specific value, e.g. in OnVisible property of the screen.
UpdateContext(
{
varFormat: Blank()
}
)
Summary
It’s possible to make number in Power Apps more readable also in the edit mode of the text input, even include the currency sign. You can’t self reference the control to apply the formatting directly on the value, but you can use a small workaround with a context variable. Update the variable when users change the value in the field. Use the variable as the control’s Default. And don’t forget to reset it when needed.