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.

image

Bonus: Click on each image to display a bigger size!

image

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.

  1. Customize your form with PowerApps, and make sure you’ve added the “Attachments” card to your form control.
  2. Unlock the card where the attachments are.  Name the attachment control attachmentBox.
  3. For the OnAddFile property of the attachmentBox, use this function:
    ClearCollect (colAttachments, attachmentBox.Attachments)
    image
  4. 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.
  5. 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.
  6. For the OnSave and OnCancel properties, add this function: Clear(colAttachments)
  7. Add a new gallery.  Name it galAttachments
  8. For the Items property of galAttachments, type colAttachments
  9. Put a label in the gallery, to show the file name, and set the Text property to ThisItem.Name
  10. Put an image control in the gallery, call it imgAttached, and set the Image property to:
    Text(ThisItem.Value)
    image

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.

  1. For the imgAttached image control, set the OnSelect property to this:
    Set( varShowImage, true)
  2. 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
  3. Insert an image control, and make it the exact same size, right on top of recBehindImage.  Call it imgBigAttach
  4. Insert an icon that is an X, and put it at the top right corner in front of imgBigAttach.  Call it icoCancel
  5. For the Image property of imgBigAttach, use this:
    galAttachments.Selected.imgAttached
    image
  6. 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.
    image
  7. 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.)
    image
  8. 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

FREE 5 day PowerApps Beginner Email Course

Here is the full video of SharePoint Power Hour, where I demonstrate this gallery of attachments, and make a few more discoveries!

3 comments

  • 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

    Like

    • 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.

      Like

Leave a reply or question

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.