en en en fi en fi en fi fi et fi fi fi fi fi fi fi pl id fi fi fi fi eu fi fi fi fi fi fi de fi fi fi fi fi fi fi fi fi fi fi fi en en en en fi en en en en en en en en en en en en en en ca en en en es en en en ceb en en en en en en es ca en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en fr en en fi fi fi fi fi en en en en en en en en en ca en en lt en en en en en en en kn fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi fi de fi fi fi fi fi fi en fi ms en en en en fi vo fi fi fi fi en en zh pl fi fi fi de id fi en fi fi sv fi fi da
Fun with Gallery Graphics and SharePoint Lists | Microsoft Power Apps
Audrie Gordon, Solution Architect, Power CAT, torstai 9. helmikuuta 2017
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:
CategoryIcon (transparent png picture link in OneDrive)
[OneDrive for Business Prefix Preceeding /_Layouts]/Documents/CategoryIcons/cures.png
[OneDrive for Business Prefix Preceeding /_Layouts]/Documents/CategoryIcons/education.png
[OneDrive for Business Prefix Preceeding /_Layouts]/Documents/CategoryIcons/wildlife.png
[OneDrive for Business Prefix Preceeding /_Layouts]/Documents/CategoryIcons/education.png
[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:
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:
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:
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!
Mikä on Power Apps?
Power Apps on palvelu, jonka avulla voi luoda ja käyttää mukautettuja yrityssovelluksia tietoihin yhdistämistä sekä verkko- ja mobiilityöskentelyä varten – ilman mukautetun ohjelmistokehityksen ajankäyttövaatimuksia ja kustannuksia.
Application Lifecycle Management (ALM)
Power Platform Admin Center
Aloita antamalla työ- tai opiskelukäyttäjätunnuksesi.
Rekisteröitymällä hyväksyt palvelun käyttöehdot.
čeština dansk Deutsch (Österreich) Deutsch (Schweiz) Deutsch (Deutschland) Eλλnvιkά English (Australia) English (Canada) English (Cyprus) English (UK) English (Ireland) English (India) English (Malaysia) English (New Zealand) English (Singapore) English (US) English (South Africa) español (España) español (México) français (Belgique) français (Canada) français (Suisse) français (France) suomi magyar italiano (Svizzera) italiano (Italia) 日本語 한국어 norsk bokmål Nederlands (België) Nederlands (Nederland) polski português (Brasil) português (Portugal) pycckий svenska ไทย Türkçe 中文(简体) 中文(繁體) العربية עברית