Gallery controls

[tagustin2020]

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

[mdevaney]

@tagustin2020 

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

---
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]

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

[mdevaney · Accepted solution]

@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.

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.   

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.

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

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]

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]

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]

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?

[tagustin2020 · Accepted solution]

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