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 27 Comments

  1. Amy Rockwood

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

    0
    1. Pavel Bludov

      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. Pavel Bludov

      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. Amy Rockwood

    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. Pavel Bludov

      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. Brandon Yeats

    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. Brandon Yeats

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

      0
        1. Brandon Yeats

          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. Pavel Bludov

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

            0
  4. Kristen Hartung

    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. Priya p

    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. Pavel Bludov

      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,
      “$”,
      “€”
      ) &
      “###,###”

      1+
  6. Priya p

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

    0
    1. Pavel Bludov

      Replied through email. Thanks!

      0
  7. Jarrod

    You are a boss.

    0
    1. Pavel Bludov

      Hi Jarrod,
      Thanks for visiting my website!

      0
  8. Bill

    Pavel – I’ve used one of your solutions before (combo box showing individual checkboxes). This is yet another great solution you provided! Thank you for taking time to share.

    0
    1. Pavel Bludov

      Thanks Bill!
      Happy to have a returning guest!

      0
  9. Filip Risteski

    Hi I think I found a more elegant solution. I would make the input field transparent when it is not edited and behind there is a label that has a currency format, when it is edited it is a number, but otherwise only the label can be seen. From user perspective nothing changes. This way you don’t risk messing up the data that goes into sharepoint list.

    0
    1. Pavel Bludov

      Hi Filip,
      I think I tried a similar approach but something was off. That was long time ago and I might have missed something. Didn’t really invest much time into it but maybe should have.
      If it does work for you, please let us know. It will be awesome if it’s simple and working.
      Thanks!

      0
  10. dorinda

    I am trying to use your third option for real time formatting and it is not working. I have double checked I followed the directions.

    Any idea why it would not be working?

    0
    1. Pavel Bludov

      Hi,
      It’s hard to tell but a few things you can check:
      1) Is you timer starting and working? – make it visible and check.
      2) Some things might not work when previewing from the PowerApps Designer – check if it’s working normally through you app/form.
      3) The only thing the timer is doing is recalculating a variable each moment. So try to create a button and make it recalculate that variable.
      Thanks!

      0
  11. Pratik

    Hi,
    I want for to accept amount in es-MX but as user’s default browser is pointing to es-ES.
    So whenever user put 2,000.00 as per the es-ES, comma’s are considered as decimal pointer so amount are getting saved as $2 instead of $2000. How can I make PowerApps to accept/convert amount value in es-MX for any default browser setting.

    0
    1. Pavel Bludov

      Hi Pratik,
      In my post and other posts people have out there – a number is converted into a format you would prefer to have. So 2000 entered becomes 2,000.00 or $2000 is up to you.

      0

Leave a Reply