As far as I know at the time of this post PowerApps doesn’t have an Input Mask (currency mask in this particular case) feature. It is possible to mimic that feature using Text function but implementing it is not really straightforward and gets even more complicated if you are dealing with PowerApps integrated with SharePoint.
In this post I will show you 3 different ways of implementing a workaround for a currency input mask, each has its own pros and cons:
- The currency mask formatting is not visible until you submit the form (the simplest).
- You can see the mask formatting even before submitting your form but you need to click away from the field to see the formatting (medium complexity).
- The currency formatting is applied real time as you type in the numbers (the most complicated but the most natural way of working with currency).
Let’s create a testprice SharePoint list with all three columns being text columns – PriceText (Title column), Price, and Text.
Then we let PowerApps create a default app.
Applying the same workaround in a PowerApps form is trickier as those forms are very touchy and one would think things work the same way but they don’t.
DetailScreen1 screen OnVisible property:
Set( SPFormMode, "View" )
IconNewItem1 “+” button OnSelect property:
Set( SPFormMode, "New" ); NewForm(EditForm1); Navigate( EditScreen1, ScreenTransition.None ); Set( varPrice, Blank() ); Set( varTest, Blank() )
1) Title_DataCard2 card Update property:
Text( Value(DataCardValue4.Text), "[$-en-US]$###,###" )
2) Price_DataCard2 card Update property:
Several changes to DataCardValue5 text input. OnChange property:
Set( varPrice, Text( Value( Substitute( Substitute( DataCardValue5.Text, ",", "" ), "$", "" ) ), "[$-en-US]$###,###" ) )
If( SPFormMode="View", Parent.Default, varPrice )
3) We need to add a Timer1 control. OnTimerStart property:
Set( varTest, Text( Value( Substitute( Substitute( DataCardValue6.Text, ",", "" ), "$", "" ) ), "[$-en-US]$###,###" ) )
Test_DataCard2 card Update property:
Several changes to DataCardValue6 text input. Default property:
If( SPFormMode="View", Parent.Default, varTest )
One might have noticed I removed “Edit” button/action which is true; however, I wanted to focus on proving the concept rather than polishing the app.