Power Apps Create Custom Progress Bar Using SharePoint Choice Values

I worked on the Employee Satisfaction Survey Application on Power Apps a few days ago. For this application, we took data sources as a SharePoint list, which stores all the employee survey results.

In the app for HR people, I was required to display the survey results for each question in percentages on the progress bar.

In this article, I will explain how to create a custom Power Apps progress bar using SharePoint list choice values.

Create a Custom Progress Bar in Power Apps

In the example below, the gallery on the right side displays questions. When I select any question on the right side, it shows the full details of that question, like values, the number of employees who chose those options, their percentages, and color indication. At the same time, the top progress bar indicates the percentages of each value.

Power Apps Create Custom Progress Bar Using SharePoint Choice Values

Here is the SharePoint list named Employee Satisfaction Survey that stores employee survey results.

Follow the steps below to achieve this!

1. Connect the SharePoint list to the Power Apps application. Then, add the code below to the OnSelect property of a button control.

ClearCollect(
    colQuestions,
    {Questions: "Job Satisfaction"},
    {Questions: "Is Job Challenging"},
    {Questions: "Need Any Trainings"},
    {Questions: "Medical Benifits"}
);

The above code creates a collection named colQuestions, containing employee survey questions.
And Questions is the column name in the collection.

2. Add a gallery control and provide the code below on the items property.

colQuestions

Now, to display the questions within the gallery, add a label and provide ThisItem.Questions

3. To get the job satisfaction values and calculate percentages of each value based on the employee’s selection. Add the below code on the previous buttons OnSelect property.

ClearCollect(colEmpSatisfactionSurvey,'Employee Satisfaction Survey');

ClearCollect(
    ColJobSatisfactionRatings,
    AddColumns(
        AddColumns(
            GroupBy(
                AddColumns(
                    ShowColumns(
                        'Employee Satisfaction Survey',
                        'Job Satisfaction'
                    ),
                    JobSatisfactionValues,
                    JobSatisfaction.Value
                ),
                JobSatisfactionValues,
                grp_jobSatisfactionValues
            ),
            Count,
            CountRows(ThisRecord.grp_jobSatisfactionValues)
        ),
        Percentage,
        Round(
            (CountRows(ThisRecord.grp_jobSatisfactionValues) / CountRows(colEmpSatisfactionSurvey)) * 100,
            0
        )
    )
);

Look at the functionality of the above code:

• colEmpSatisfactionSurvey = Collection stores ‘Employee Satisfaction Survey’ list details.
  • To avoid delegation warnings while calculating percentages, we created this collection.
• ShowColumns(‘Employee Satisfaction Survey’,’Job Satisfaction’) = This ShowColumns() function will get only the specified field values from the SharePoint list.
  • However, the field is a choice data type in the SharePoint list, so it won’t display the values; instead, it shows [records].
• We added a custom column named JobSatisfactionValues to get the choice values using the AddColumns() function.
  • Then, this column contains all the values the employee chose for this question. if employees are 50 members, this field includes 50 values. Now, we are required to group those values such as
    • Very satisfied
    • Somewhat satisfied
    • Neutral
    • Somewhat dissatisfied
    • Very dissatisfied
• I used the GroupBy() function to group all responses, and the group by field name is grp_jobSatisfactionValues.
• I created another custom column named Count to get the count of grouped values. Using the CountRows() function, we’re getting a count.
• Also, the percentage of each value from the job satisfaction field must be calculated. I added another field named Percentage.
• Percentage =((Number each job satisfaction value)/ (Count of total responses))* 100
• To avoid decimal values, I used Round().

Look at the output of the above code, which contains the fields I mentioned above.

Provide code in OnSelect property like in below.

4. To display the job satisfaction details, such as the percentage of employees who chose those values, add a gallery control and provide the code below on its items property.

ColJobSatisfactionRatings

Add four text labels within the gallery, and for each label’s Text property, add the codes below.

Choice Value label Text property:

ThisItem.JobSatisfactionValues

Count label Text property:

ThisItem.Count

Percentage label Text property:

ThisItem.Percentage & "%"

Color Indicator label’s Fill property:

If(
    ThisItem.JobSatisfactionValues = "Very satisfied", Color.Green,
    ThisItem.JobSatisfactionValues = "Somewhat satisfied", Color.LightGreen,
    ThisItem.JobSatisfactionValues= "Neutral", Color.Yellow,
    ThisItem.JobSatisfactionValues = "Somewhat dissatisfied", Color.Orange,
    ThisItem.JobSatisfactionValues ="Not Selected",Color.LightCoral,
    ThisItem.JobSatisfactionValues = "Very dissatisfied",Color.Red
)

Then, to display this gallery when the job satisfaction question is selected, add the code below to the Visible property of the current gallery.

If(Gal_Questions.Selected.lbl_Question.Text="Job Satisfaction",true,false)

5. Now, to display the percentages of job satisfaction values on the custom progress bar. Add a container, take five button controls within that, and add the code below to each button’s given property.

Very dissatisfied button properties:

Text = LookUp(ColJobSatisfactionRatings,JobSatisfactionValues = "Very dissatisfied " ).Percentage & "%"

X = 0

Width = (LookUp(ColJobSatisfactionRatings,JobSatisfactionValues="Very  dissatisfied").Percentage/ 100) * Parent.Width

Fill = Color.Red

Text: Using the LookUp function, we display the Very dissatisfied value percentage on the Text property of the button control.

Width: The width we’re getting from the percentage of the Very dissatisfied value, in case the sum of each value’s width is beyond the parent’s control. To avoid that, we divide by 100, and the return value is multiplied by Parent.Width value.

Somewhat dissatisfied button properties:

Text = LookUp(ColJobSatisfactionRatings,JobSatisfactionValues= "Somewhat dissatisfied").Percentage & "%"

X = (LookUp(ColJobSatisfactionRatings,JobSatisfactionValues="Very dissatisfied").Percentage/ 100) * Parent.Width

Width =  (LookUp(ColJobSatisfactionRatings,JobSatisfactionValues="Somewhat dissatisfied").Percentage/ 100) * Parent.Width

Fill = Color.Orange

Here, the X position will be the width of the Very dissatisfied value.

Neutral button properties:

Text = LookUp(ColJobSatisfactionRatings,JobSatisfactionValues= "Neutral" ).Percentage & "%"

X=  (LookUp(ColJobSatisfactionRatings,JobSatisfactionValues="Very dissatisfied").Percentage/ 100) * Parent.Width + 
(LookUp(ColJobSatisfactionRatings,JobSatisfactionValues="Somewhat dissatisfied").Percentage/ 100) * Parent.Width

Width = (LookUp(ColJobSatisfactionRatings,JobSatisfactionValues="Neutral").Percentage/ 100) * Parent.Width

Fill = Color.Yellow

Here, the X position will sum the width of the previous two values [Very dissatisfied+Somewhat dissatisfied].

Somewhat satisfied button properties:

Text = LookUp(ColJobSatisfactionRatings,JobSatisfactionValues= "Somewhat satisfied").Percentage & "%"

X = (LookUp(ColJobSatisfactionRatings,JobSatisfactionValues= "Very dissatisfied").Percentage / 100) * Parent.Width + 
(LookUp(ColJobSatisfactionRatings,JobSatisfactionValues = "Somewhat dissatisfied").Percentage / 100) * Parent.Width + 
(LookUp(ColJobSatisfactionRatings,JobSatisfactionValues= "Neutral").Percentage / 100) * Parent.Width

Width = (LookUp(ColJobSatisfactionRatings,JobSatisfactionValues = "Somewhat satisfied").Percentage / 100) * Parent.Width

Fill = Color.LightGreen

Here, the X position value will be the sum of the width of the previous three values [Very dissatisfied+Somewhat dissatisfied + Neutral]

Very satisfied button properties:

Text = LookUp(ColJobSatisfactionRatings,JobSatisfactionValues="Very satisfied").Percentage & "%"

X= (LookUp(ColJobSatisfactionRatings,JobSatisfactionValues = "Very dissatisfied").Percentage / 100) * Parent.Width + 
(LookUp(ColJobSatisfactionRatings,JobSatisfactionValues = "Somewhat dissatisfied").Percentage / 100) * Parent.Width + 
(LookUp(ColJobSatisfactionRatings,JobSatisfactionValues = "Neutral").Percentage / 100) * Parent.Width +
(LookUp(ColJobSatisfactionRatings,JobSatisfactionValues = "Somewhat satisfied").Percentage / 100) * Parent.Width


Width = (LookUp(ColJobSatisfactionRatings,JobSatisfactionValues= "Very satisfied").Percentage / 100) * Parent.Width

Fill = Color.Green

Here, the X position value will be the sum of the width of the previous four values [Very dissatisfied+Somewhat dissatisfied + Neutral + Somewhat satisfied]

And finally, for the Container, add the below code to its Visible property:

If(Gal_Questions.Selected.lbl_Question.Text="Job Satisfaction",true,false)

This formula will return true if we select that Job Satisfaction question from the questions gallery. Otherwise false.

Up to now, we have seen calculating percentages for the choice field and displaying them in the custom progress bar and on the gallery control.

Now, I will explain how to calculate percentages for the Yes/No field in the SharePoint list and display those values on the custom progress bar and in gallery control. The Yes/No field here we’re taking is IsJobChallenging?

6. Add the code below to the previous button OnSelect property where we created a collection of job satisfaction values.

ClearCollect(
    colJobChallenging,
    AddColumns(
        AddColumns(
            GroupBy(
                ShowColumns(
                    'Employee Satisfaction Survey',
                    'Is Job Challenging?'
                ),
                IsJobChallenging_x003f_,
                grp_jobChallenging
            ),
            Count,
            CountRows(ThisRecord.grp_jobChallenging)
        ),
        Percentage,
        Round(
            (CountRows(ThisRecord.grp_jobChallenging) / CountRows(colEmpSatisfactionSurvey)) * 100,
            0
        )
    )
);

Like in the above, this collection colJobChallenging also has fields with data like the below:

• IsJobChallenging_x003f_ = Here _x003f_ is present because of the space and ? question mark in the field name.
• This field contains yes or no values from the employees’ responses in the SharePoint list.
• grp_jobChallenging = groups the yes and no values.
• Count = Contains the count of grouped values.
• Percentage = Contains the percentage of group values.

7. To display the details of the Is job challenging? question. Add a gallery control and provide the name of the above-created collection on its items property.

colJobChallenging

To display yes or no values within gallery control, add a text label and provide the code below in its Text property:

If(ThisItem.IsJobChallenging_x003f_=true,"Yes","No")

For No. of Emp, add the below code to its Text property:

ThisItem.Count

For percentage:

ThisItem.Percentage & "%"

For color indicator, add a label and provide the code below to its Fill property:

If(
    ThisItem.IsJobChallenging_x003f_= true, Color.Red,
    ThisItem.IsJobChallenging_x003f_ = false, Color.Green
)

For the gallery’s Visible property, add the code below.

If(Gal_Questions.Selected.lbl_Question.Text="Is Job Challenging",true,false)

So this gallery will be only visible if we select the Is Job Challenging question in the questions gallery on the left side.

8. To display the percentages on the custom progress bar, add a container, and within that, add two button controls and provide the below formulas for the given properties.

For the No value button:

Text = LookUp(colJobChallenging,IsJobChallenging_x003f_=false).Percentage & "%"

X = 0

Width = (LookUp(colJobChallenging,IsJobChallenging_x003f_=false).Percentage/ 100) * Parent.Width

Fill = Color.Green

For the Yes value button:

Text = LookUp(colJobChallenging,IsJobChallenging_x003f_=true).Percentage & "%"

X = (LookUp(colJobChallenging,IsJobChallenging_x003f_=false).Percentage/ 100) * Parent.Width

Width = (LookUp(colJobChallenging,IsJobChallenging_x003f_=true).Percentage/ 100) * Parent.Width

Fill = Color.Red

Finally, for the container Visible property, add the code below:

If(Gal_Questions.Selected.lbl_Question.Text="Is Job Challenging",true,false)

Note:

Use the above codes for another question Need Any Trainings. Just replace the question name remaining all codes are the same.

Also, for Medical Benifits Chocie column, take reference from the job satisfaction codes, there also replace the question and choice values.

This way, we can create a custom progress bar and display the percentages.

I hope you understand how to create a custom progress bar and display its percentages. In this article, I have also explained how to calculate percentages and get the count of each choice, yes or no field values, displaying those values on the gallery control.

Along with these, display and hide the progress bar and gallery control based on our selected question. Follow this article if you are also trying to create a custom bar like in the above.\

Also, you may like:

• Create a calculator in Power Apps
• Power Apps Container Control
• Power Apps Pie Chart
• Power Apps Line Chart
• Power Apps Column Chart
• Create a Login Page in Power Apps

Preeti Sahu

Preeti Sahu is an expert in Power Apps and has over six years of experience working with SharePoint Online and the Power Platform. She is the co-author of Microsoft Power Platform: A Deep Dive book. As a Power Platform developer, she has worked on developing various tools using Power Apps and Power Automate. She also makes Microsoft 365 videos and shares them on YouTube.