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 App
β€’ Setup The SharePoint Document Library
β€’ Create A List Of PDF Documents
β€’ Show A PDF Icon Beside The Filename
β€’ Add The PDF Viewer Control To The App
β€’ Get The PDF File Content With A Power Automate Flow
β€’ Capture The PDF Data URI In Power Apps And Display The PDF File
β€’ Test 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

77 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Dean
Dean
2 years 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
2 years 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
2 years 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
2 years ago

Awsome!

Bruno Soares
Bruno Soares
2 years 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
2 years 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
2 years 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
1 year 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
1 year 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
1 year 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
1 year 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
1 year ago

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

Ali
Ali
1 year 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
1 year 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 πŸ™

Devera
Devera
1 year ago
Reply to  J C

Kia ora JC, did you manage to resolve this? I’m having the same issue. Thanks. Kudos Matt, thanks for sharing your knowledge.

Devera
Devera
1 year ago
Reply to  J C

It worked πŸ˜€ Thank you Matt

Vikas Chauhan
Vikas Chauhan
1 year ago
Reply to  Devera

Hey can you please share the step, I am also facing the same issue.

Ana
Ana
1 year ago
Reply to  J C

Hey! I’m having this issue as well. I followed all the steps but I donΒ΄t seem to get the Get Data Uri PA, when I try to find it no results appear. Have you sorted this? Thank you!

M M
M M
6 months ago
Reply to  J C

Hi JC, did you get a solution for this? I am stuck

Dublin, OH User
Dublin, OH User
1 year ago

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

Michael Mayers
Michael Mayers
1 year 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
Jon
Jon
1 year ago
Reply to  Michael Mayers

I’m getting the same error, have you found a solution?

Last edited 1 year ago by Jon
Michael Mayers
Michael Mayers
1 year ago
Reply to  Jon

Unfortunately not. I’ll post on here if I do though πŸ™‚

Birdman
Birdman
7 months ago
Reply to  Jon

Put into the “Document” property of the PDF-Viewer control following “varDocumentCurrent.result”

I encountered the same error and I just added a “.result” to the statement “varDocumentCurrent”. This made the pdf-viewer showing the pdf’s as expected.

Thanks to Matthew for this great guide πŸ™‚

Gary
Gary
1 year 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
1 year 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.

Safia
Safia
1 year ago

HI! thanks for all the helpful content. I saw you have a post to display excel, word etc. and a separate one for PDFs. Is there anyway to combine this and view both PDFs and excels etc. Thank you!

Geraldine
Geraldine
1 year ago

Hi, Mattew! New to Power Platform and loving it. I am learning how to transition a couple of Access Databases (with SharePoint lists serving as the backend) into Power Apps and I have to say I am having fun. The directions on how to create a PDF viewer were spot on. Transitioning from using VBA has been a little bit of challenge, but learning new ways of doing things, which as you know is a constant in the fascinating world of development. πŸ™‚ Thank you for all your great content. You should have a Patreon or PayPal Donation link because I know a bunch of people (myself included) who would definitely support you in all the good work that you do. BTW, I absolutely love the cat images on your articles. They put a big smile on my face every time.

Matt H.
Matt H.
1 year ago

Hi Matt,

Everything seems to work fine until i go to view the pdf and get the error “Couldn’t Open File. Make sure the file is coming from a HTTPS link. Any thoughts? Thank you.

Dan
Dan
1 year ago

Hello, new to power apps. got this working as shown but wondering where does the “DocIdentifier” come from, is that predefined in the app already or how does the “Get Content” know what it is referring to? If it is predefined, are the other “DocXxxxx” variables that can be used? If so how can I see what is available?

Danielx64
Danielx64
1 year ago

Hi Matt,

I’ve managed to build a a almost fully completed SharePoint Document Library browser using several posts that would show PDF, Word, Excel etc and I am really happy with it.
Would this blog post work for video files (MP4 for example), minus the fact that I would need to use the media player?

Cheers