Menu

PowerApps Gallery of Attachments

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 beSet(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

23 comments

Hi Laura, I read your blog and saw your video, and this was the thing I was looking for for a long time (seeing previews of the images attached)! Very clear and interesting to watch!

Where I get stuck at the moment is that I am trying to get this to work for an app with 4 screens (Browse, Detail, Edit and New). But so far I can only get it to work for the New screen. I am very very new to PowerApps, and I have tried looking up online how to do this, but unfortunately with no result. What I thought might help was adding all the attachmentBoxes in Onstart in ClearCollect (as every screen has its own Attachmentbox), but obviously I need to do more.

Would you be able to help me get further? I would really appreciate this!

First of all, why do you have 3 different form screens? Is there a reason? In PowerApps, you don’t need different screens or forms for new/edit/display. You can just use a single form, and when you go to the form, you just use the command NewForm, EditForm, ViewForm, just in the button you’re clicking to get to the form. Maybe just having one screen and one form would simplify what you’re doing, and then it would work correctly.

Sorry for the delay in reply, the answer came to my spam box. Thanks for replying to me! I have multiple screens as I am creating an app not a form. In the meantime I got it to work (combined your answer with another answer I found online)!

Hey, I am trying to imitate this blog post, but I have it set up a little differently. I have different screens and forms for Browse gallery (Screen 1), new/edit (Screen 2), and detail (Screen 3).

I have put ClearCollect(colAttachments,BrowseGallery1.Selected.Attachments) on the OnSelect of the BrowseScreen Gallery. The Attachments show up in the new/edit screen new gallery, GalAttahcments, by adding a gallery to the attachments data card and setting the gallery item to colAttachments. Then I set the OnSelect of the gallery to Set(varPopUp,true).

I then created a image and set the visible to : varPopUp and set the Image to: GalAttachments.Selected.Image. But my image does not appear. When I go to the collection I also cannot see the image.

I followed all directions to the letter… and had a bug… then I went through and found a typo in the instructions… Set( varShowImage, true) should be Set( varShowBigImage, true). Just sharing for the next person. Thanks for posting these Wonder Laura – you’re awesome!

You’ve created a gateway, and are using a PowerApp in Office 365, pointing to SharePoint on-premises as your back end data source? Sorry, but I’ve never worked with on-premises data in PowerApps, but it doesn’t surprise me that it wouldn’t be fully compatible with PowerApps functionality.

Great instruction, but I have the issue that the gallery refreshes first after I open the item a second time.
I have added
ClearCollect(colAttachments,attachmentBox.Attachments) to OnEdit, Onview, OnStart and
Clear(colAttachments) to OnSave, and OnCancel…
When i add a button to with ClearCollect(colAttachments,attachmentBox.Attachments), the gallery refreshes…

Hi, Excellent Tutorial. Do you know if it’s possible to do this if the gallery is on a datacard inside a form? I can’t seam to get that to work, when you call the image for the enlarged version it just gives a blank box, no image loads. IF I move the gallery out of the form it works fine, perhaps I am using the wrong code for form use?#

Hi, the gallery seems to be working correctly, but only the first and last images are populating. No matter how many images are attached, it only shows the first and last image. The correct labels are populating but no the images. Any ideas why?

Piggybacking on Scott’s question above, I am assuming that if we do a customized list form, this will only show up on Sharepoint and not on PowerApps. I want my app to be deployed through the PowerApps mobile app only. If the answer is ‘yes’, is there a way to render attached photos that does NOT require the use of the customized list form? I can limit the user to one attachment if needed.

You can still use a SharePoint list as a back end, and a form control with attachments whether or not it’s a standalone or a customized list form. I agree, I never use customized list forms. Nothing that I can thing of *requires* a customized list form, the only thing you gain from those is the ability to have users click on items in the list to edit with PowerApps as the interface.