How to format data card values in an edit form?

[Mahar92]

Hello there. I am going slightly insane.

All I want to do is apply a number format to a data entry field. So instead of "6000", it should say "6.000,00 €". However, it simply does not work. Changing the "Format" property is not having any effect. Using nested functions like Text+Value also does not work here. There must be a way?

Anyone please?

[RusselThomas]

Hi @Mahar92 ,

The Format: property for a text input is one of two values - Text or Number - and it relates to how input is controlled.

Unfortunately, there's no direct way to format input text as it is being entered - which is quite annoying, but unfortunately just the way the control works.

You can achieve this effect with a little smoke and mirrors though - it's not perfect, and sometimes it doesn't come off well, but I'll share the trick and you can decide whether its worth using or not.

Add an input control, set its Fill: to Transparent and its Color: to Transparent.

You can also set all the hover properties (Hover Fill, Hover Color, Hover Border etc.) to Self.Fill, Self.Color and Self.BorderColor respectively.

Add a label, place it on top of the input control then set it's it's order to be behind the control.

Set the label Text: property to

Text(Value(TextInput1.Text), "##,##.00 €")

You can read more about the Text() function here to figure out precisely how you want to format it. 

Note that this approach has a few drawbacks - you lose the cursor for one, which can be a bit off putting, and other things, but it's the closest I've come to emulating a formatted input.

Hope this helps,

RT

[v-qiaqi-msft · Accepted solution]

Hi @Mahar92,

Do you want to format the currency in a real time?

Actually, if you want to format the input as € currency as soon as you input within, I think you should reference to the OnChange property of the TextInput.

1). Set the OnChange property of the TextInput as below:

Set(VarCurrency,Text(Value(TextInput2.Text),"#,##.00€"))

2). Set the Default property of the TextInput as below:

VarCurrency

[RusselThomas]

Hi @Mahar92 ,

I assumed you wanted to restrict the user input to numbers only, so if not then @v-qiaqi-msft's answer is the better solution.  If you find that you're struggling to get Qi's solution to work, then make sure your text input Format: property is set to Text and not Number.

If you do want to restrict users to number inputs only, then the Input control Format: property can be set to Number - but then the Default: property of the input cannot contain any letters (including a currency symbol) - which is why I use the label trick for number formatted inputs.

Each approach has a trade-off in terms of user experience, but certainly I would favour Qi's simpler approach if you don't need to constrain input to numbers.

Kind regards,

RT