Fun with Gallery Graphics and SharePoint Lists

PowerApps makes it very easy to design custom galleries and forms that include graphics; both images and graphs. In this business sceanario we have a list tracking contributions to 5 causes. Our PowerApp allows us to contribute to a cause, as well as track progress to goals. 

This blog shows how to combine three fun tactics into one gallery control:

1. Pick up images from the SharePoint List Picture Column HyperLink (images are stored in my OneDrive for Business Folder named "CategoryIcons")
2. Create my own Bar Graphic based on List Data
3. (Optional) Filter the Data Using Images in the Group Legend

Tip: I used the new "Icons" on the Insert Menu in Microsoft PowerPoint to create my icons. Learn more about those here.

Today we are going to focus on Gallery customiztions firstly, next week I'll expand upon this in the display and new forms as well.

Let's start with how I did the gallery customization using a SharePoint List called "ContributionTargets" which I pre-populated with the data shown below:

Title  (string)	Goal (number)	Current (number)	CategoryIcon (transparent png picture link in OneDrive)
Cause 1	10000	9000	[OneDrive for Business Prefix Preceeding /_Layouts]/Documents/CategoryIcons/cures.png
Cause 2	20000	15000	[OneDrive for Business Prefix Preceeding /_Layouts]/Documents/CategoryIcons/education.png
Cause 3	20000	13500	[OneDrive for Business Prefix Preceeding /_Layouts]/Documents/CategoryIcons/wildlife.png
Cause 4	20000	5000	[OneDrive for Business Prefix Preceeding /_Layouts]/Documents/CategoryIcons/education.png
Cause 5	50000	22134	[OneDrive for Business Prefix Preceeding /_Layouts]/Documents/CategoryIcons/cures.png

 

Notes on the URL for the Icons:
Some people have said it's not possible to use hyperlinks in a picture column in SharePoint Lists, well I disagree. There is one way to do it without any help from coders; and the key is the path format. Here are the tips for how to build that URL string, if you follow my instructions you won't have a problem:

1. Create a new Sub Folder in OneDrive for Business (recommended over OneDrive) and share the folder with everyone that needs to see the pictures

2. Upload short-named png files to the folder (1 for each icon)

3. Create the URL rather than copy and paste it from the Browser Address Bar.  Here is how you create the URL yourself:

• First copy the adress bar from the root of your OneDrive for Business location (use the waffle in Office 365 and select OneDrive - this will bring you to the right place). Delete everything after, and including _layouts on the right of the address
• Now, add Documents to the end after the last /
• Now, add / and [the name of the sub folder] you created
• Now, add / and the [file name including extension]

Mine looks like this: 
https://microsoft-my.sharepoint.com/personal/audrie_microsoft_com/Documents/CategoryIcons/cures.png

In an upcoming blog, I will show you how Flow will help us to create this path using automation....but please add them manually for this blog. (I think it's a good way for you to learn how to do that, and automation is always best when you understand what you're automating-LOL)

OK, now that all the pieces are in place - let's do this!

Step 1: Create a New PowerApp from the SharePoint List using the Ribbon "Create an App" command from PowerApps on the ribbon. Let PowerApps do your work and create the gallery, item display form, and new item form for you!

Step 2: On the Home Tab, Change the Theme for the Gallery the the one called "Dark"

Step 3: On the right BrowseScreen1 panel (don't select anything first) choose the layout with the images on the Left Hand Side (1st one on the second row of layouts)

Step 4: Click on the Image control on the left side of the 1st Data Card, then use the right property options panel to change "SampleImage" to CategoryIcon

Step 5: Click on the Top Text control on the 1st Data Card, then use the right property options panel to change "Text" to Title

Step 6: Select the final control on the 1st Data Card, then use the right property options panel to change "Text" to (ThisItem.Current/ThisItem.Goal)*100 & "% Collected", and name that Control PercentComplete
(This will indicate what percent of complete our contributions are, current divided by goal times 100)

Step 7: Select the PercentComplete control on the 1st Data Card, then copy and paste another copy of it onto the data card, and name the copy TargetValue, then use the right property options panel to change "Text" to 
Text(ThisItem.Goal, "[$-en-US]$ #,###" ) & " Goal" (This will indicate what the target contributions are for this item, formatted in U.S. Dollars)

Step 8: Move things around on the 1st Data Card making room for the progress bar as shown in the image above
(the background rounded corner rectangle is optional - I made it in PowerPoint too)

Step 9: Select Data Card #1, and then add a rectangle shape, name is "GoalIndicator" and fill it with white or black (depending on background), and then size it to have a height of 15, and a width of:
(ThisItem.Goal/4000)*15 

I use a random common denominator of 4000 (if I had smaller targets the number would be smaller) which helps to scale the bar down to the space in my Data Card.

Step 10: Select "GoalIndicator" and copy and paste it on top of itself, renaming the copy "ProgressIndicator", and fill it with green, then size it to have a width of:
(ThisItem.Current/4000)*15 
Feel free to use the HOME>ALIGN command to align these to bars left and top if you have any problems lining things up. The "Reorder" button is helpful to get the ProgressIndicator on top of the GoalIndicator if you did this in a different order than I suggested.

Voila! Your custom gallery is done! Come back next Monday: I'll show you how I made a sub-form that submits individual contributions to a separate list, and a Flow that does all the calculations and paths for us too!

Leave a comment below if you need help creating the legend on the bottom, or if you need help setting your legend up as a filter too!

Enjoy your PowerApp accomplishment! It's gorgeous!

Audrie
Twitter: @ArtsyPowerApper