If you’d like to add a bunch of photo attachments to an item in SharePoint, and then have the ability to view them all as a gallery of images on the item, here’s how to do it.
This is using a SharePoint list, and the attachments control in the form. This solution is just for images, not documents or other types of attachments. Other types of attachments will simply show as a filename in the gallery, with no image. Also, I mention the SharePointIntegration properties a lot in this post. Here is my other blog post that tells you more about those if you’re not familiar.
Bonus: Click on each image to display a bigger size!
Here’s how to build it.
First of all, we need to collect the attachments into a collection. This needs to be done when attachments are added, removed, and when the form is opened. There is a way to directly show the attachments in a gallery without collecting them first, but with a collection, you have more control over it. I noticed some weirdness when going back and forth through a bunch of different SharePoint items and viewing and editing them. Every now and then, the images simply didn’t show. With a collection, we can provide a button to view the attachments if they are ever not showing. Make sure that attachments are enabled in the advanced settings of your SharePoint list.
- Customize your form with PowerApps, and make sure you’ve added the “Attachments” card to your form control.
- Unlock the card where the attachments are. Name the attachment control attachmentBox.
- For the OnAddFile property of the attachmentBox, use this function:
ClearCollect (colAttachments, attachmentBox.Attachments)
- You’ll need to use this same function in multiple places in the form. Go to the OnRemoveFile property and do the same thing. This function grabs all the attachments and puts them in a collection. This collection is what you’ll display in the gallery.
- Also, go to the SharePointIntegration property (bottom left), and add this function to the OnNew, OnEdit, and OnView properties. If you’re doing this on a standalone app (not a customized list form), put this function in the first screen’s OnStart property.
- For the OnSave and OnCancel properties, add this function: Clear(colAttachments)
- Add a new gallery. Name it galAttachments
- For the Items property of galAttachments, type colAttachments
- Put a label in the gallery, to show the file name, and set the Text property to ThisItem.Name
- Put an image control in the gallery, call it imgAttached, and set the Image property to:
Text(ThisItem.Value)
Now you should see your images in the gallery once you start attaching pictures.
Would you like to be able to click through the images in the gallery, and have them pop out into a box to view them bigger? Follow these steps. This doesn’t have to just be done with SharePoint list attachments, it can be done with any gallery full of images.
- For the imgAttached image control, set the OnSelect property to this:
Set( varShowBigImage, true) - Insert a large rectangle on top of your form. This will be the size that you want the image to show, and make it whatever color you’d like. I made mine gray. Just make it as big as you want, and don’t cover up the gallery. You want to be able to click through to select each image. Call it recBehindImage
- Insert an image control, and make it the exact same size, right on top of recBehindImage. Call it imgBigAttach
- Insert an icon that is an X, and put it at the top right corner in front of imgBigAttach. Call it icoCancel
- For the Image property of imgBigAttach, use this:
galAttachments.Selected.imgAttached
- Now, it’s time to make those show and hide when you open and close images. A variable is used for this, I call it varShowBigImage. Go to the SharePointIntegration control, and add this to the OnEdit and OnView properties.
Basically, as soon as the form is opened, we want to set the variable to false.
Set ( varShowBigImage, false )
Here’s an example of what the NewForm property will look like now. The EditForm property is almost identical, except instead of NewForm, it’s the EditForm command at the beginning.
Update 7/12/2019: Since this post was written, Microsoft has moved the SharePointIntegration setting to the top left instead of bottom left:
- To make the controls show and hide, change the Visible property of icoCancel, imgBigAttach, and recBehindImage (you can select them all at once):
Visible property = varShowBigImage
(basically since visible accepts a boolean, and this is a boolean variable, all we have to do is put the name of the variable in here.)
- Finally, for the OnSelect property of icoCancel, it should be
Set(varShowBigImage, false)
That will make the icon, rectangle, and image disappear when you click the X.
You can now add attachments, and click each attachment in the gallery, to see the big one, and even click from image to image through the gallery quickly.
Are you brand new to PowerApps, and interested in getting started learning some fundamentals? Try out my
Here is the full video of SharePoint Power Hour, where I demonstrate this gallery of attachments, and make a few more discoveries!
