Power Apps View A PDF Stored In A SharePoint Document Library

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-view-a-pdf-stored-in-a-sharepoint-document-library/. Author: Matthew Devaney.

Power Apps View A PDF Stored In A SharePoint Document Library Posted by - Matthew Devaney on - February 20, 2022 104 Comments

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' Code language: JavaScript ( javascript )

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 Code language: HTTP ( http )

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 Code language: CSS ( css ) ThisItem .Modified Code language: CSS ( css ) 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" ) Code language: JavaScript ( javascript ) 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' ])) Code language: JavaScript ( javascript )

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 ) Code language: CSS ( css )

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 ) Code language: PHP ( php )

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. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up 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. Document Library PDF Viewer control Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps