How to display a percentage in a form field?

(0) Share

Report

Posted on by WebPortal

2,295

My form is connected to a Sharepoint list.

One of the fields is a number, I want to display it as a percentage (it is a tax rate).

The DataCard Format property is set to:

TextFormat.Number

There isn't an option to display this as percentage.

So, a tax rate of 0.23 just looks terrible on the form.

How can I display it like 23%?

Thanks

Categories:

Building Power Apps

I have the same question (0)

All responses (10)

Answers (1)

Drrickryp Super User 2024 Season 1 on at

Like (1)

Report
Text(0.5,"0%")

Was this reply helpful? Yes No
WebPortal 2,295 on at

Like (0)

Report

@Drrickryp

Thanks, but Where do I type that? I mean, in which object and property?

Was this reply helpful? Yes No
Drrickryp Super User 2024 Season 1 on at

Like (0)

Report

@WebPortal ,

Here's an example of how it is used in a label

Was this reply helpful? Yes No
WebPortal 2,295 on at

Like (0)

Report

@Drrickryp
I'm using a Form and there seems to be no way I can format the fields, they just display raw numbers, like 0.23

For the user, this is annoying. It is better to type: 23%

How do I do that?

Was this reply helpful? Yes No
Drrickryp Super User 2024 Season 1 on at

Like (0)

Report

You can't easily format a textinput box but you can put "%" in a label next to it. You can format the result from the datasource later. A slider control is a slick way to input the number and you can put a % label next to it.

Was this reply helpful? Yes No
WebPortal 2,295 on at

Like (0)

Report

Ok...
I thought it was a trivial thing to do and I was missing something.

Was this reply helpful? Yes No
Verified answer

v-qiaqi@microsoft.com on at

Like (5)

Report
Hi@WebPortal,
Have you solved your problem?
Based on the issue that you mentioned, do you want to format the TextInput control when you typing within?
Could you please share a bit more about the scenario?
I have a test on my side, please take a try as below.
Set the OnChange property of the TextInput as follows:

Set(var3,Value(DataCardValue8.Text)*100&"%")

Set the Default property of the TextInput as follows:

var3

Note: Please do remember to set the Format of the TextInput as Number.
Please check the following gif.
Hope it could help.
Regards,
Qi

Was this reply helpful? Yes No
WebPortal 2,295 on at

Like (0)

Report

@v-qiaqi-msft
Thank you, that solution almost solves the problem.
It's not perfect, but it works.
Ideally, the input should have a "mask" that forces the user to type the value as a percentage. This would facilitate UX. It is easier to type 23 (and see the decimal separator and % in the field as the numbers are typed) than to type .23 (and only see the percentage after the numbers are typed).
Anyway, it will have to suffice.

BTW: the same goes for other input fields, like phone numbers, email addresses, etc.

Was this reply helpful? Yes No
Lawrence_Sprou1 42 on at

Like (0)

Report

This does not work for existing data. It only works when one types in new data to the field.
How can you get the current saved value to format properly? and save properly?
It displays properly in the SharePoint List as 5%, but in Powerapps is displays as 0.5.
When I follow the instructions from this answer, existing values do not display, but new values display correctly. I have not tried to save them, because I do not want to overwrite the existing data, and is suspect that it may cause problems for the list as currently set up.
In order to improve the above complex solution, you would need to convert the existing data in the OnSelect Property of the Gallery to the proper format and assign it to the variable, then use the Update Property of the DataCard to convert it back for storage in the SharePoint List. This worked for me, but there is a simpler solution that I used. I posted it as a separate answer.

Was this reply helpful? Yes No
Lawrence_Sprou1 42 on at

Like (2)

Report
The solution for me was to put this in the Default Property for the text input control:
Text(Parent.Default,"0.00%")
This is on a form control so the Parent of the text box is the DataCard.
If you are not using DataCards you could use whaterver your datasoucre item is. e.g. ThisItem

Was this reply helpful? Yes No