How to Calculate Percentage in Power Apps?

A while ago, someone asked me how to calculate percentages in Power Apps. It’s a common question, and the good news is that it’s pretty easy to do!

In this article, I’ll show you how to calculate percentage in Power Apps canvas app, so you can use them for things like progress bars, scores, or any other data that needs percentage values.

Calculate Percentage in Power Apps

Let’s start by learning how to perform Power Apps percentage calculations in a Label, Form, and Data Table control.

Example – 1: [Power Apps Percentage Format in Label]

In this example, there’s a text input box and a label, as shown below. When you type a number into the box, the app calculates its percentage and displays it in the label.

For example, if you enter 0.7 in the text box, the label will display 70%.

1. To achieve this, change the Format property of the Text input control to Number (Properties -> Format -> Number).

2. Next, select the Label control and apply the below code on its Text property as:

Text = Text(
    txtValue.Text * 100,
    "[$-en-US]0%"
)

Where,

txtValue = Text input control name

3. Save and preview the app. Enter any decimal number inside the text box. The percentage calculation result will display in the label.

Example – 2: [Calculate Percentage in Power Apps Form]

The screenshot below shows a Power Apps Edit form that retrieves all its fields from a SharePoint list named Products.

This list has a ‘Number‘ field named ’Product Discount‘. When I enter a number like 0.3, it doesn’t look very clear in the form. Instead, I want it to show as 30% to make it easier to understand. You can see this in the screenshot below.

1. To workaround this, select the text input field of the Product Discount Data Card and apply the code below on its OnChange property as:

OnChange = Set(
    varDisValue,
    Value(DataCardValue14.Text) * 100 & "%"
)

Where,

• varDisValue = Specify a variable name
• DataCardValue14 = SharePoint list Number column

2. Now, set the specified variable on the Product Discount Data Card Text box’s Default property as:

Default = varDisValue

3. After making the changes, save and preview the app. Enter a decimal number in the Product Discount field, and when you move out of the field, you’ll see it automatically convert to a percentage, just like in the image above.

Example – 3: [Calculate Percentage Value in Power Apps Data Table]

In this example, we’ll learn how to calculate a percentage value when a button is clicked and show the result in a Data table.

The Data table contains books and their price lists. When the user presses the button, the app calculates the percentage based on the book price and displays it in the table, as shown below.

1. To work around this, we need to create a Collection where you can store the Book Details (Book name and Price). I have created this collection on Screen’s OnVisible property as:

OnVisible = ClearCollect(
    bookCollection,
    {
        Book: "Power Apps",
        Price: 1550
    },
    {
        Book: "Power BI",
        Price: 1200
    },
    {
        Book: "Power Automate",
        Price: 1800
    },
    {
        Book: "SharePoint",
        Price: 3500
    }
);

Where,

• bookCollection = Collection name
• Book, Price = These are the headers of the collection
• “Power Apps”, “Power BI”, and so on = These are the values that will be presented under the Book column
• 1550, 1200, and so on = These are the values that will be presented under the Price column

2. Next, insert a Button control (Hit Me!) and set the below code on its OnSelect property as:

OnSelect = ClearCollect(
    bookPercentage,
    AddColumns(
        bookCollection,
        "Percentage",
        Text(
            Price / Sum(
                bookCollection,
                Price
            ) * 100,
            "[$-en-US]0.0%"
        )
    )
);

Where,

• bookPercentage = Collection name where you can add a new column to display the percentage value
• AddColumns = PowerApps AddColumns function helps to add a column to a table. To know more details about this function, click on this link: Power Apps AddColumns Function with Examples
• bookCollection = Main collection name
• “Percentage” = Specify a new column name that you want to add to the collection
• Price = Specify the collection header name based on what you want to calculate the percentage

3. At last, select the Data table control -> Go to Properties pane -> Add the Data source to the created percentage collection name (bookPercentage).
4. Select the Edit fields from the Fields section -> click on +Add field -> add all the collection fields. Once you add those columns, you can see the percentage values in the data table control.

This way, we can calculate the percentage value in Power Apps Data table control.

I hope this guide helped you understand how to calculate and display percentages in Power Apps using different controls like Text label, Edit form, and a Data table control.

Also, you may like some more Power Apps tutorials:

• Create Hyperlink Button in Power Apps
• Calculate Age in Power Apps
• Change Power Apps Dropdown to Radio button
• Power Apps LastSubmit()
• Power Apps Gallery Row Number