Skip to main content

Notifications

Community site session details

Community site session details

Session Id :
Power Apps - Building Power Apps
Answered

How to create a progress bar based on number of selected items in combobox?

(0) ShareShare
ReportReport
Posted on by 65

Hi everyone, today I'm trying to create a progress bar that is linked to a combobox ('2023Goals_ComboBox') that lists my team's 2023 goals. I want the progress bar to increase each time another item (goal) is selected, and the bar to go from red to green when all the items are selected and the bar is at 100%.  

 

My app is a customized SharePoint list form (list is called 'AccessibilityReport'), and the combobox in question is attached to a choice column ('2023 Metrics'). 

 

I've been able to configure a toggle to go from "No" to "Yes" when all the items in the combobox are selected but it's just not nearly as satisfying. Any insight would be really appreciated! 

  • Verified answer
    jmathur Profile Picture
    65 on at
    Re: How to create a progress bar based on number of selected items in combobox?

    Well, in case anyone wants to know, I figured it out. I added a slider element and set the Min property to 0, and the Max property to:

    CountRows(Choices([@AccessibilityReport].'2023 Metrics'))

     where AccessibilityReport is the name of my list and 2023 Metrics is the name of my choice column. Then I set the Default to

    CountRows('2023Goals_ComboBox'.SelectedItems)

     

     To achieve the color portion of my goal, I entered the following code into the ValueFill field:

    If(
    IsBlank('2023Goals_ComboBox'.SelectedItems),
    RGBA(200, 200, 200, 100),
    Switch(
    true,
    CountRows('2023Goals_ComboBox'.SelectedItems) < Slider1.Max, RGBA(45, 49, 121, 1),
    CountRows('2023Goals_ComboBox'.SelectedItems) = 0, RGBA(200, 200, 200, 100),
    CountRows('2023Goals_ComboBox'.SelectedItems) = CountRows(Choices([@AccessibilityReport].'2023 Metrics')), RGBA(31, 81, 49, 1)
    )
    )

     Note that I ended up using blue and green as my indicator colors instead of red and green, per accessibility guidelines. 

     

    Also, so that no one would mess with it, I changed DisplayMode to DisplayMode.View. 

     

    Here's a picture of the progress bar when it's partially full (there are 7 items you can select from in the 2023 goals met combobox) : 

    jmathur_0-1681246616385.png

     

    Here's how it looks when all items are selected (I have an If function set on the 2023 goals progress text label so it updates if you've completed the goals):

    jmathur_1-1681246668834.png

     

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

🌸 Community Spring Festival 2025 Challenge 🌸

WIN Power Platform Community Conference 2025 tickets!

Markus Franz – Community Spotlight

We are honored to recognize Markus Franz as our April 2025 Community…

Kudos to the March Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 146,618 Most Valuable Professional

#2
RandyHayes Profile Picture

RandyHayes 76,287 Super User 2024 Season 1

#3
Pstork1 Profile Picture

Pstork1 65,957 Most Valuable Professional

Leaderboard