web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Apps
Unanswered

Gallery controls

(0) ShareShare
ReportReport
Posted on by

Hello,

 

I would like to insert a progress bar type control in my gallery. I see how to convert a number into a graphic in a PowerApps form, but can't seem to find a way to do it in a gallery. I don't recall a progress bar ever being part of the Insert > Controls drop down options, but you used to be able to insert things like star ratings. Does anyone know where the controls went? I no longer see it in the ribbon (see attached screenshot).

 

Thank you,

Teresa

Categories:
I have the same question (0)
  • mdevaney Profile Picture
    29,989 Moderator on at

    @tagustin2020 

    You can find Star Ratings on the Insert tab within the Input dropdown

     

    starrating.png

     

    ---
    Please click "Accept as Solution" if my response helped to solve your issue so that others may find it more quickly. If your thought the post was helpful please give it a "Thumbs Up."

  • tagustin2020 Profile Picture
    on at

    Thank you! I just wasn't scrolling down far enough to see the star rating. My real goal for this particular project is to display a progress bar type graphic in the gallery. The one available in Forms is perfect, but I'm not having any luck converting a number to a graphic in a Gallery the way you can in Forms (see attached screenshot). Is there a formula workaround for this?

     

    Kind regards,

    Teresa

  • Verified answer
    mdevaney Profile Picture
    29,989 Moderator on at

    @tagustin2020 

    We'll have to make a progress bar from scratch to be used in the Gallery.

     

    Step #1.  Insert a new rectangle shape.  Rename it progressBarBackground.  Change the Fill property to a dark color.  I chose dark blue.  Make the height 50 and the width 200.

     

    img1.png

     

    Step #2  Copy the rectangle you just created and paste directly on top.  Rename it progressBar.  Change the Fill property to a light color.  I chose light blue.   

     

    img2.png

     

    Step #3:  Insert a new label.  Rename it progressBarPerecent.  The change the Color to White and the Fill to transparent.  Resize the label so it is exactly as big as the rectangles.  Make the Text property of the label ThisItem.PercentComplete.  My assumption is you have a column named percent complete containing whole numbers from 0-100.

     

    img3.png

     

    Step #4:  Click on the progressBar.  Change the Width property to ThisItem.PercentComplete/2   

     

    img4.png

     

    Note:  your form elements must be in this order from top to bottom

     

    • progressBarPercent (label)
    • progressBar (rectangle)
    • progressBarBackground (rectangle)

     

    ---
    Please click "Accept as Solution" if my response helped to solve your issue so that others may find it more quickly. If your thought the post was helpful please give it a "Thumbs Up."

  • tagustin2020 Profile Picture
    on at

    Thank you so much for your prompt help. I can't wait to give this a try! I'll let you know if any more questions pop up asap.

  • mdevaney Profile Picture
    29,989 Moderator on at
    Great, it sounds like you are on the way to success!

    Please let me know if it worked for you once you have a chance to test.
  • tagustin2020 Profile Picture
    on at

    Hello again, I'm almost there, but not quite. I adjusted my Percent Complete column settings (see attached screenshot), refreshed the SharePoint site and the PowerApps connection to that SharePoint several times, but the label is not displaying correctly as you can see in the other screenshot. PowerApps wants to put apostrophes around my column name. Yours doesn't seem to have that so I tried removing them, but I got red squigglies. Any ideas how I can fix this?

  • Verified answer
    tagustin2020 Profile Picture
    on at

    OK, I think I got it figured out now by playing around with relative widths. The number 7 got me the closest to the halfway mark on the bar to represent a value of 50%.

    Here are the settings I used and I've attached a screenshot of the final outcome/Progress Bar formula.

     

    • Progress Bar Percent Label: Width=326, Height=50, Text property= ThisItem.'Percent Complete'
    • Progress Bar (Light Blue): Width=(ThisItem.'Percent Complete'/2)*7, Height=50
    • Progress Bar Background (Dark Blue): Width=326, Height=50

     

    I got the idea of playing with relative widths from Audrie Gordon's article.

    https://powerapps.microsoft.com/uk-ua/blog/fun-with-gallery-graphics-and-sharepoint-lists/

     

    Your approach coupled with a sprinkling of Audrie got me to where I needed to be. Thanks again for coming to the rescue.

    Teresa

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

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 759 Most Valuable Professional

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 310 Super User 2025 Season 2

#3
Power Platform 1919 Profile Picture

Power Platform 1919 228

Last 30 days Overall leaderboard