Power Apps View A PDF Stored In A SharePoint Document Library

Power Apps View A PDF Stored In A SharePoint Document Library

I assumed making Power Apps that display a PDF stored in a SharePoint document library would be easy. Power Apps already has a built-in PDF viewer control. All I need to do is supply the file location and it will show the PDF, right?

Nope. I received an error message that said “Couldn’t open PDF File, Open In My Browser Instead .” The PDF viewer cannot open files hosted on a server that requires authentication. SharePoint Document libraries need a username and password to access. In this article I will show you the best workaround to view a PDF file stored in a SharePoint document library inside Power Apps.


Table Of Contents:
• Introduction: PDF Viewer AppSetup The SharePoint Document LibraryCreate A List Of PDF DocumentsShow A PDF Icon Beside The FilenameAdd The PDF Viewer Control To The AppGet The PDF File Content With A Power Automate FlowCapture The PDF Data URI In Power Apps And Display The PDF FileTest The Power Apps PDF Viewer App




Introduction: PDF Viewer App

The PDF Viewer app is used by employees at a Cat Daycare to look at pdfs stored in a SharePoint document library. When an employee selects a PDF from a list the document appears on the right-side of the screen.




Setup The SharePoint Document Library

Create a new SharePoint document library called Document Viewer and upload several PDFs to it. Also upload at least one additional file that is not a PDF for testing purposes.




Create A List Of PDF Documents

Open Power Apps Studio and create a new tablet app from blank. Insert a label at the top of the screen to use as a titlebar with the text “PDF Viewer”. Then add the Document Viewer SharePoint document library to the app as a datasource.



Create a blank vertical gallery and position it on the left-side of the screen. Choose Document Viewer as the datasource.



This code will appear in the Items property of the gallery.

'Document Viewer'



Next, we will update the style of the gallery.



Use this code in each of these properties in the gallery to achieve the same style as shown in the image above.

Fill: RGBA(237, 237, 237, 1)
TemplateFill: If(ThisItem.IsSelected, ColorFade(LightSkyBlue, 70%), White)
TemplatePadding: 8
TemplateSize: 80



Then add 2 new labels to the gallery to display information about the PDFs.



Write this code in the Text property of the labels to show the document name and last modified date.

ThisItem.Name
ThisItem.Modified




Show A PDF Icon Beside The Filename

To make a better looking file explorer we will place a PDF icon beside each filename in the list and document icon for all other file types that cannot be opened by the PDF viewer. Insert a new Image into the gallery and place it on the left-side of the row.



Then we will create the PDF icon and document icon with some SVG code.



Copy and paste this code into the Image property of the Image. The EndsWith function checks the file extension at the end of the filename. Then it uses the SVG code from this free Power Apps Icon Set to draw the image.

If(
    // checks the file extension
    EndsWith(ThisItem.'File name with extension', "pdf"),

    // pdf icon
"data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1920%201664h-128v384H128v-384H0V640h128V0h1243l421%20421v219h128v1024zM1408%20384h165l-165-165v165zM256%20640h1408V512h-384V128H256v512zm1408%201024H256v256h1408v-256zm128-896H128v768h1664V768zM448%20896q40%200%2075%2015t61%2041%2041%2061%2015%2075q0%2040-15%2075t-41%2061-61%2041-75%2015h-64v128H256V896h192zm0%20256q26%200%2045-19t19-45q0-26-19-45t-45-19h-64v128h64zm448-256q53%200%2099%2020t82%2055%2055%2081%2020%20100q0%2053-20%2099t-55%2082-81%2055-100%2020H768V896h128zm0%20384q27%200%2050-10t40-27%2028-41%2010-50q0-27-10-50t-27-40-41-28-50-10v256zm384-384h320v128h-192v128h192v128h-192v128h-128V896z%27%20fill%3D%27%23d13438%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E",

    // file icon
    "data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1243%200l549%20549v1499H128V0h1115zm37%20219v293h293l-293-293zM256%201920h1408V640h-512V128H256v1792zm256-896V896h896v128H512zm0%20256v-128h896v128H512zm0%20256v-128h896v128H512z%27%20fill%3D%27%237a7574%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E"
)




Add The PDF Viewer Control To The App

Now that we’ve got a list of PDF files to open the next step is to add a pdf viewer control to the app.



Place the PDF viewer so it fills right-side of the screen. It will display Lorem Ipsum text until we supply a PDF from the SharePoint document library.




Get The PDF File Content With A Power Automate Flow

The PDF files are stored in a SharePoint document library and recall that we cannot view any PDFs hosted on a server that requires authentication. The best workaround is to get the PDF file content using a Power Automate flow, send it back to Power Apps, and then display that file content in the PDF Viewer.

Open the Power Automate menu in Power Apps and Create a new flow.



Setup the flow as shown in the image below and name it Get Data URI. Ensure you delete the Power Apps (V1) trigger that is included by default and replace it with the Power Apps (V2) trigger.



The Get file content step uses this flow expression to convert the file from base 64 to binary code. Then it change the binary code into a data URI which can be consumed in Power Apps. Copy and paste this code into the flow expression editor.

datauri(base64ToBinary(body('Get_file_content')?['$content']))




Capture The PDF Data URI In Power Apps And Display The PDF File

We can now display the PDF stored in a SharePoint document library in Power Apps. Go back to Power Apps and select the Get Data URI flow. It will become added to the app as a datasource.



When an employee selects a PDF file from the list a flow runs to retrieve the data URI from the SharePoint document library.



Use this code in the OnSelect property of the gallery.

Set(varDocumentCurrent, GetDataURI.Run(Gallery1.Selected.Identifier).result)




Ensure the icon and labels inside the gallery are pointing the the gallery’s OnSelect property so they execute its code when clicked.



This code should already be included in the OnSelect property of the icon and label.

Select(Parent)



The final step is to load the PDF viewer with the variable storing the PDF’s data URI.



Write this variable name in the Document property of the PDF viewer.

varDocumentCurrent




Test The Power Apps PDF Viewer App

The Power Apps PDF Viewer will now show a PDF displayed in a SharePoint document library when we select it from the list.





Questions?

If you have any questions about Power Apps View A PDF Stored In A SharePoint Document Library please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.

Matthew Devaney

Subscribe
Notify of
guest
27 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Dean
Dean
7 months ago

Hi Matthew, another excellent blog post! I recently implemented a solution by Reza Dorrani that doesn’t use Flow to display a PDF. I’m not suggesting there’s anything wrong with using Flow but might be a useful alternative for readers.

https://www.youtube.com/watch?v=vqK29FWbLxU&ab_channel=RezaDorrani

Dean
Dean
7 months ago

Thanks for your response. Yes Reza is awesome. You, Reza, Shane, Warren Belz, Randy Hayes have taught me a lot this past two years. Hopefully one day I’ll be able to return some of that knowledge to the Power Platform community.

I’ve actually decided to go with your method for the reason you cite above. My app will be exported to different tenants which will cause issues down the line. Cheers, Dean.

Jean
Jean
7 months ago

Hi Matthew, Thank you for your continued and incredibly helpful blog posts! They have always made my power app journey exceptionally easy.

I may have read your blog post incorrectly, but does this work on authenticated / secure Sharepoint sites? I followed your steps and the power automate flow fails at the Get File Content step, due to authentication error, so want to make sure I read your instructions correctly (which I thought bypassed the authentication issue that experimental PDF was having).

Almaze Hailu
Almaze Hailu
7 months ago

Awsome!

Bruno Soares
Bruno Soares
7 months ago

Hi Matrhew, thank you very much for sharing this!
But one thing… I followed step by step and it give me all the time this error in attchment.
Any suggestions?

2022-02-26 17_37_15-Power Apps.png
Amir
Amir
7 months ago

Hi Matthew,
Thank you for sharing all interesting and useful postings in this portal that I have enjoyed reviewing most of them.
I have followed the guidelines of this article and I can get the PDF files loaded. However, all the data contents of the PDF documents are visible and only the template’s image are show. Interestingly, when I select the invisible contents using mouse then they become highlighted in blue background color and I can copy them for pasting in a text file where I see the included data text!
It seems that there is a security feature in PDF Viewer control that enforces this behavior when displaying SharePoint documents.
Is there any way to make the file contents get displayed?

Dave O'Brien
Dave O'Brien
6 months ago

This is the only method I found that works on US Govt servers with the high security they have. It also only worked when the Flow variable was named “result”.

Simeon Williams
Simeon Williams
4 months ago

datauri(base64ToBinary(body(‘Get_file_content’)?[‘$content’]))

This is the best way as it cuts out permission access issues to the PDF when it sits in SharePoint.

jerry
jerry
4 months ago

Hello, thank you for posting! The everything looks like it works for me, but strangely, the viewer is only showing some of the content in the PDF, not all of the PDF. If I click inside the viewer and highlight the content, it looks like it’s all there, but just showing blank. Any idea on what could be causing this issue?

pdfviewer.png
jerry
jerry
4 months ago

I does render in SharePoint without issue. If I open it via browser and/or Acrobat, the PDF renders without issue.

I’m sure you are correct that it’s not the code. There are other PDFs that render just fine without this issue. I think it may be the PDF itself. It’s almost like the PDF has a white layer on top that’s covering the content. This PDF has comments from team members added to it. I wonder if the comments add a layer to the PDF that the viewer ends up rendering and covering the original content.

Daniel
Daniel
4 months ago

Hey Matt,

After following Reza’s version, I am just looking at this and wondering if I am planning on using this for PDFs and video files. Would I be correct that by using this method I would be passing the full file through Power Automate and then loading the entire file on the client-side in one hit? I am worried that video files may have issues loading because the flow failed.

Cheers

Billy Prater
Billy Prater
2 months ago

Thanks Matt, this worked beautifully in comparison to my previous method !

Ali
Ali
1 month ago

Hello Matthew,

The post is excellent and following it I have implemented the pdf viewer for the SharePoint files, but just wanted to check if we could fetch the no. of pages and current page number in pdf viewer in powerapps. We have a requirement to show the acknowledgement button once user finishes reading the document. Is there any way we could implement this?

J C
J C
23 days ago

Hi Matt, Is there a missing step? The Get Data URI flow. says it will become added to the app as a datasource but this doesn’t happen automatically? I’ve tried to add it in as a datasource but it doesn’t work even though I have followed all the other steps 🙁

Dublin, OH User
Dublin, OH User
13 days ago

How would we make a substitution for Word, Excel, and other file types?

Michael Mayers
Michael Mayers
6 days ago

Hi Matthew,

Great article, really useful thanks.

I have followed the guide step by step but am having a slight issue on the final step. When I add the PDF viewer and put varDocumentCurrent into the Document property I get an error saying it Expected a Blob Value.

Do you know how to fix this?

Cheers
Michael

Power Apps Error.PNG
Gary
Gary
5 days ago

Hi Matthew,

This blog has helped me massively. I have one minor issue that you may be able to help with. I have multiple pages in my app that all contain the PDF viewer, using the method above. They all work as expected however when I move from one screen to another, the previously viewed PDF file shows up straight away. Ideally, I would like it to be blank every time the user moves to a different screen.

Thank you in advance.

Gary
Gary
5 days ago

Fantastic thank you. That’s the code I had been using but I was putting it in the wrong property! Works perfectly now, thank you.