PowerApps – 3 different ways to implement currency input mask

0

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.


Code changes

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:

varPrice

Several changes to DataCardValue5 text input. OnChange property:

Set(
    varPrice,
    Text(
        Value(
            Substitute(
                Substitute(
                    DataCardValue5.Text,
                    ",",
                    ""
                ),
                "$",
                ""
            )
        ),
        "[$-en-US]$###,###"
    )
)

Default property:

If(
    SPFormMode="View",
    Parent.Default,
    varPrice
)

DelayOutput property:

false

3) We need to add a Timer1 control. OnTimerStart property:

Set(
    varTest,
    Text(
        Value(
            Substitute(
                Substitute(
                    DataCardValue6.Text,
                    ",",
                    ""
                ),
                "$",
                ""
            )
        ),
        "[$-en-US]$###,###"
    )
)

Duration property:

1

Repeat property:

true

AutoStart property:

true

AutoPause property:

true

Test_DataCard2 card Update property:

varTest

Several changes to DataCardValue6 text input. Default property:

If(
    SPFormMode="View",
    Parent.Default,
    varTest
)

DelayOutput property:

false

RESULT

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.

0

This Post Has 17 Comments

  1. This is really great. Wish I could figure out how to do it with a phone number (###) ###-####

    0
    1. Hi Amy,
      Thank you for visiting my website. I’ll take a look if it can be done the similar way. Though I kind of predict some complications already.

      0
    2. Amy,
      Looks like something like this is gonna work:
      Text(Value(DataCardValue2.Text),”[$-en-US](000) 000-0000″)
      You will need to take care of users’ input though (not allowing text) – it has to be digits.

      1+
  2. Thanks I figured it out! Now I’m having an issue opening the edit form and retaining the default value. I am hopeful to figure this out. Thanks so much for your help!

    0
    1. Amy,
      This is where all complications usually start 🙂 That’s why having it (masked input) out of the box some day would be nice.
      What I usually do to address such an issue:
      – if ID is null/empty (applies to new items only), then the formula, otherwise Parent.Default (which will read your formatted value)
      – if FormMode.New, then the formula, otherwise Parent.Default.
      Something likes this, basically monkeying around.

      0
  3. This almost does exactly what I need to do. I went for the behavior of the Price field. I am looking for a full currency format with two decimal places, but I can’t get it to work.

    This is the latest formula I attempted, but it appears to have stopped populating the variable. I also added Number which appears to keep letters out of the variable. I noticed that if I type in the decimal places that the period throws it off.

    Set(varAmnt,Text(Value(Substitute(Substitute(Substitute(DataCardValue13.Text,”.”,””),”,”,””),”$”,””)),Number,”[$-en-US]$###,###.00″))

    Any suggestion on how to get the decimal places working?

    0
    1. After some further testing it looks like your original code already leaves out letters. The only thing missing is the decimal places.

      0
        1. Hello Pavel,
          Thanks for getting back to me. As I mentioned in my reply, the field pretty much works as I need with the formula provided, except for adding two decimal places for the full currency format.

          Any suggestion on getting them to show up? Thanks!

          0
          1. Sent you an email, let’s continue there for now. Thanks!

            0
  4. Would love to she the sharepoint form version of this. I’ve tried implimenting this and it doesn’t seem to be taking.

    0
  5. Hi Pavel,
    Can you help me to achieve this for different currency inputs? The scenario is I have a dropdown with currency and if I select USD it should display $ in the price field then if select Euro then it should display € and so on.

    0
    1. Hi Priya P,
      Let’s say you have a Toggle1 (but it can be any control) that switches between “$” and “€”.
      So there are 2 ways:

      1) Either you update a variable when that Toggle1 is changed, then the formula is:
      “[$-en-US]” & varCurrency & “###,###”

      2) Or you put some conditions like this:
      “[$-en-US]” &
      If(
      Toggle1.Value=true,
      “$”,
      “€”
      ) &
      “###,###”

      0
  6. Thank You Pavel. The 1st approach worked for label but not for the text input.

    0
    1. Replied through email. Thanks!

      0

Leave a Reply

Close Menu