Power Apps 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 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!
Pingback: PowerApps PDF Viewer | @WonderLaura
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!
Thanks
Sandra
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)!
THANK YOU! You provide so much value in a short hour. I appreciate this so much.
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!
Thanks!! Fixed!
Pingback: How to use the Attachment control in PowerApps to send a file by mail – Technical Reminder
Hi Laura, does this work with On-Premise SharePoint installations, I cannot get the Attachments fields in the data source?
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.
Hi Laura, thanks for the response, after further investigation and even though the Microsoft Tutorial doesn’t mention it, I can confirm that the attachments are only available with SharePoint online.
https://powerapps.microsoft.com/en-us/blog/add-attachments-to-sharepoint-lists/
Hi,
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 Laura, Same issue.
I use your solution to view the first previously attached PDF when I load the form.I seems that the attachments collection are not always listed as quick as needed.
Any idee ?
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?#
Dan
Oh that’s interesting, I’ve never tried it, you would think it would work the same, though. I’m not sure.
When you get a minute, it would be worth a look, as that’s what it does for me. Maybe something strange is going on with how it needs to be called.
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?
Sorry, that is weird. I’ve never seen that happen.
Pingback: PowerApps: Sharepoint online list attachment preview gallery | Hao Chen GIS space
Hi, Thanks for your tutorial – very helpful. I am struggling to find where it states Sharepoint Integration (bottom left) as you state. Could you post a screenshot of this please?
Many thanks.
They moved it to the top left since I wrote this post, and you’ll only see this if you’re using a customized list form. I just added an “update” in red in the original post.
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.
Ur post is very useful and easy to use it in an application. Further to this, is there any implemention to preview documents (Word/Office) in Powerapps like we did for PDF Viewer? If you have some posts please share…
There’s a “thumbnail” field that you can use when viewing a doc library in a gallery, but I don’t know off the top of my head if that exists for attachments to a list item.
HI
Thank you for this video.
I have a problem, when i open in view my gallery is emthy
Is anyone having issues viewing the form with the photos displayed? Edit and New mode are great. View mode doesn’t display the pictures.
Yes, I am experiencing the same issue where the picture display on Edit and New mode but not View mode. this is on a custom list form. Any ideas?
Yes, I have the same issue. Did you find any solution ?
Solved the problem. Insert an image into the Datacard where the gallery is (but not in the gallery). Set it to the same source (gallery.selected.imgAttached). Turn the visibility to false. Seems to work. The main forms image now updates. Possibly a refresh issue when the gallery is in a datacard.
hello laura,
i follow ur posts in youtube on a regular basis… i started working in powerapps
need a solution.
i have a gallery… with fields say name, remarks and a child gallery where i m displaying attached files.
now i need to send mail from gallery with the above details. but i am facing issue with attach files… how can i pass those attached files through mail? please help.
Here’s a Power Hour where I show how to send an attachment from a Power App. I recommend just using a flow, though and not trying to send the list item attachments directly from the Power App. https://youtu.be/SKxTiHViH68?t=2258
On Edit and view event attachments are not displaying. Whenever we are doing attachment control events(like OnAdd,OnRemove) then only it displaying attachments
Hi Laura. Thank you for you tutorial. I manage to display the pictures, but when I open the application in a SharePoint web part, sometimes the image is blinking. Did you experience this also?
I was trying to implement an app like you did in this post. The problem I am having is the image in the large popup window does not show. Is there anyway you could give me some pointers about how I can fix this issue? Thanks.
Hi,
first i need to thank you for your article and the tutorial video (amazing job).
unfortunately i have a tiny problem which i am not able to solve for some reason……
my collect function is not collecting anything. I’ve tried everything,it’s just not working
any suggestions maybe ??
Much appreciated in advance
Hi Saeid, for your gallery’s items property, instead of collecting, just use this instead:
AttachmentBox.Attachments
Image property for the image control in the gallery: ThisItem.Value
Label’s text property: ThisItem.Name
Wow, thank you so much for this Laura!!! This is EXACTLY, EXACTLY what I was looking for. Love the way you explain things too.
This is great, however I find that the popup will not work when the screen is in View mode (I’m using a SharePoint list form). Is it possible to get a pop up to work if the user does not have Edit access?
Hi, yes that’s possible. The complexity of the logic isn’t something that I can quickly write in a note here, but it is definitely something achievable. There’s no such thing as view mode for a screen. The form control is the only thing that has a mode.
Thank you! – I think that you’ve just given me enough to think that through and perhaps work it out. 🙂
Hello Laura,
I am having an issue where SharePoint is not recognizing the images. I have everything set-up correctly and the gallery is populating the Title/URL of the images but it cannot seem to locate the image.
Would my only options be to use a workaround such as a flow to create the file converted to base64 then have PowerApps pull the ID/Name or is there some other work around available?
Thanks.
I’m not sure, it usually just works. I’m not sure what you mean by “SharePoint” since this is a Power Apps post and the images are displayed in Power Apps, and I’m not sure what you mean by “not recognizing”. Is there an error message in Power Apps?
After meticulously searching for entire day & not able to add attachments to gallery and then use the same gallery images for uploading to share point as attachments, reached this site, and thanks a ton to the author, this resolved my issues, and I was able to make the progress and give solution. Thanks again.