@WonderLaura – Laura Rogers

The Progress Bar Control in Power Apps is a powerful way to visually represent the status or progress of tasks and processes. In this post and video, I’ll show you how to configure and implement a dynamic progress bar in your Power Apps.

---

Getting Started with the Progress Bar Control

Basics of the Power Apps Progress Bar

First of all, the Progress Bar Control has two key properties that are important to know about, for functionality:

• Value – Displays the current progress. Adjust this property to change how far the progress bar extends.
• Max – Defines the maximum possible progress (default is 100).

Customization Options

You can modify the progress bar’s appearance using:

• Progress Color:
  • Brand (based on the app’s theme)
  • Success (green)
  • Warning (yellow/orange)
  • Error (red)
• Thickness: Medium or Large
• Shape: Rounded or Square edges

---

Power Apps Progress Bar in a Form

A progress bar can visually show a dynamic form status during different approval stages. In my example, I have a travel request form in a Power App. The list is in SharePoint, and I have created a choice column called Status in this list. My approach involves mapping status verbiage to numerical values.

1. Create a Collection for Status Mapping

A collection acts as a temporary database inside Power Apps. I use ClearCollect in my app’s OnStart property.

ClearCollect(
    colStatusMapping,
    {Status: "New", ProgressNum: 0},
    {Status: "In Progress", ProgressNum: 1},
    {Status: "Manager Approval", ProgressNum: 2},
    {Status: "VP Approval", ProgressNum: 3},
    {Status: "Completed", ProgressNum: 4}
)

2. Insert the Progress Bar Control

In the video below, I show methods of adding a Power Apps progress bar to both a form and a gallery. Here’s what it looks like in the form. I added simple, colored text labels below it, to display the status verbiage.

3. Use the Lookup Function for the Value

Remember that the value property of the progress bar always needs to be a number, which is why the collection was created. According to the form’s current status, that number needs to be the value that is used. To dynamically display the progress bar based on the status. This lookup function finds the current form’s status and returns the associated progress number. We are going to build upon this, so it is not the final formula. Check out the “handling new forms” section below.

LookUp(colStatusMapping, Status = varRecord.Status.Value, ProgressNum)

• Source: colStatusMapping
• Condition: Match the Status
• Result: Return the Progress Number

Would you like to learn more about the varRecord mentioned above?
Check out my video: Set a Record Variable in Power Apps – Connect a Gallery to a Form

---

4. Set the Maximum Value

Ensure the Max property of the progress bar equals the highest status number. In my example, the largest status number is 4.

---

Alternatives to the Power Apps Progress Bar

SVG Images for Smooth Rendering

• SVGs scale smoothly and can be used for gradient progress bars.
• Create an SVG gradient in PowerPoint and import it into Power Apps.

Alternative Methods

• Overlaying a rectangle on top of a gradient image to reveal progress in a creative way.
• Using a Slider Control as a progress bar:
  • Max: Set to the number of statuses (e.g., 4).
  • Value: Use the same logic and formula that I showed you for the progress bar’s value
  • Set the control’s mode to Disabled so that end users can’t change it manually.

---

📊 Displaying Progress in a Gallery

To display a progress bar in a Gallery:

• Use the exact same progress bar I showed you for the form, and paste it inside the first template item.
• Adjust data references:
  • In a form: varRecord.Status.Value
  • In a gallery: ThisItem.Status.Value

---

🔄 Handling New Forms

For a new form, the varRecord isn’t something that will be used. New forms always need to have a progress of zero. Ensure the progress bar starts at 0 for new forms, using this IF function:

If(frmTravel.Mode = FormMode.New, 0, LookUp(colStatusMapping, Status = varRecord.Status.Value, ProgressNum))

This prevents errors when loading new records. Use this in the Value property of the progress bar.

---

🚀 Curb Appeal & Responsiveness

Making Labels Responsive

• Use horizontal containers to line up labels, and set each label to have a flexible width.
• To center something on the screen dynamically, set X: (Parent.Width - Self.Width) / 2

---

Here is the associated video, where I walk you through all of these steps:

🌟 Power Apps Resources

📢 Join Power Hour: Participate in live discussions & Q&A sessions during Power Hour at IWmentor.com.

📩 Stay Updated: Join my newsletter and vote for future topics!

🚨 Microsoft’s official documentation on the Lookup function

💡 Want to Learn More? Check out my Power Apps Training Courses!