@WonderLaura

There is a control in PowerApps called the PDF Viewer.  This lets you preview PDF files.  In my last blog post, PowerApps Gallery of Attachments I showed how to preview image attachments in a gallery.  Today in SharePoint Power Hour, I did a demo of that solution, and also figured out a way to do previews of PDF files as well.  Although the PDF viewer control cannot be placed inside of a gallery, we can still set it up so that as you click the name of each attachment, it shows the big preview in the middle of the screen.  Here’s how to do it with the PDF Viewer.  Some of these instructions are the same as the ones in my previous post about the image gallery.

(Note that this same thing cannot currently be done with Word or Excel files, there is no viewer for them.  You can just directly link to them, which would open them in another window.)

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)
   
4. Go to the OnRemoveFile property and do the same thing.  This function grabs all the attachments and puts them in a collection.  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)
   
   
5. Add a new gallery.  Name it galAttachments
   For the Items property of galAttachments, type colAttachments
6. For the OnSelect property of galAttachments, set it to this:
   Set(varShowBigImage,true)
7. Put a label in the gallery, to show the file name, and set the Text property to ThisItem.Name
8. Insert a large rectangle right in the middle of your form, you can cover most of it up except for the gallery you just added.  You want to be able to click through the items.  Call it recBehindImage
9. Insert a PDF Viewer control, right on top and the same size as recBehindImage.  Call it pdfViewFile.
10. For the Document property of pdfViewFile, use this:
    galAttachments.Selected.Value
    
11. Insert an icon that is an X, and put it at the top right corner in front of your PDF viewer control.  Call it icoCancel
12. 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.
    
13. To make the controls show and hide, change the Visible property of icoCancel, pdfViewFile, and recBehindImage (you can select them all at once):
    Visible property = varShowBigImage
14. 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.
15. Now, you’ll want the PDF viewer to only show if a PDF file is clicked, especially if you’re using this in conjunction with my previous post, for showing images as you click each one.  There needs to be logic to determine the file type.  Unfortunately, the attachments control does not provide us with the attachment type, such as whether it’s an image.  There could be lots of different image file types, like PNG, JPG, JPEG, etc.  I did figure out how to look at the file extension, so here’s how to show the PDF viewer only if a PDF file is clicked.
    For the pdfViewFile control, set the Visible property to this:
    varShowBigImage  &&  EndsWith( galAttachments.Selected.Name, “pdf“)
    
16. If you’ve combined this solution with the one from my previous post, then on the imgBigAttach control, set the Visible property to this.  The exclamation mark means the opposite.  So it will show this control if the selected item is NOT a PDF.
    varShowBigImage  &&  !EndsWith( galAttachments.Selected.Name, “pdf“)

Have fun trying out the attachment control and the PDF viewer!

Are you brand new to PowerApps, and interested in getting started learning some fundamentals?  Try out my

FREE Power Apps Basics Course

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