How to Use PDF Viewer Control in Power Apps? [4 Usecase Examples]

In Power Apps, we have a most useful control called PDF viewer (experimental) that allows the user to display documents in the Power Apps canvas app from any data source, such as SharePoint, SQL, Dataverse, Excel, etc.

In this article, I will show you how to use PDF viewer control in Power Apps with various examples like:

• Display system local files in Power Apps PDF viewer
• Show PDF files from SharePoint in Power Apps
• Display SharePoint library files in Power Apps PDF control [Without Flow]
• Display SharePoint library files in Power Apps PDF control [Using Flow]

Power Apps PDF Viewer Control

Power Apps PDF Viewer control displays the content of the PDF file, such as text, graphics, and other content. It also allows the users to view, navigate, zoom, search, and interact with PDF documents directly within the app.

Look at some of the key properties of PDF viewer control.

• Document: Specify the source of the PDF document, like the URL enclosed within the double quotation marks.
• ShowControls: Set to “true” to display controls like zoom in, zoom out, navigation, and search.

Like in the example below, we can display the PDF files in the Power Apps with the help of PDF viewer control.

How to Use PDF Viewer Control in Power Apps

Here, we’ll see how to use PDF viewer control in Power Apps. This control lets you display PDF files in your app.

Users can view and work with PDFs without leaving the app. Let’s start implementing.

1. In Power Apps, select +Insert tab -> Under Media -> Select PDF viewer(experimental).

2. By default, the sample pdf will display in the app. Observe the image below;

3. To display the PDF content, we need to provide the URL of the file in the control’s Document property, enclosed in double quotation marks.

"https://blog.mozilla.org/security/files/2015/05/HTTPS-FAQ.pdf"

4. Set the ShowControls property to true to display the controls over the pdf file.

ShowControls: true

5. Look at the example below, the controls were displayed over the pdf.

You can display the PDF file in PowerApps like this. Let’s look at some more examples.

Power Apps PDF Viewer Local Files

In Power Apps, the PDF viewer control has some limitations. Such as

• The PDF viewer supports only HTTPS links, not HTTP.
• This PDF viewer control only supports PDF files that conform to the PDF32000 specification.
• You can’t view a PDF document in your app if the document resides on a server that has restrictive cross-origin resource-sharing settings.

Look at the example below. I have provided the local file URL in the Document property of PDF viewer control. It shows the message like

Couldn't open PDF file, Make sure the PDF file is coming from an HTTPS link.

Alternatively, we can get the local files with attachment control. However, we don’t have attachment control directly. To get this, follow the steps below.

1. In Power Apps, from the Data section, add any SharePoint list. Insert Edit form from +Insert tab.

2. Select the SharePoint list as a data source for the “Edit form.”

3. Now, in the form, copy and paste the Attachment DataCardValue outside of the form and remove the Form from the Power Apps screen.

4. After removing the Form, you’ll get some errors for the attachment data card value. So, remove all its properties.

5. Add the PDF viewer(experimental) control to the screen.

6. Follow the example below to attach the local file to Power Apps. The attached file will then be stored somewhere, like blob manager, in Power Apps.

7. To display the attached file in the PDF viewer, use the formula below in the Document property of the PDF viewer control.

Last(DataCardValue18.Attachments).Value

• Here, the above formula returns the local file path value, which is stored in blobmanager. The path may look like this: “appres://blobmanager/986641daaceb4278af27e7c6b61f3c44/3“.
• Instead of Last(), you can use the First() function also.

8. Save and preview the app. In the example below, the local PDF file is displayed in the PDF viewer.

Like this, you can display the local files in the Power Apps PDF viewer.

Show PDF files from SharePoint in PowerApps

In this section, I will show you how to display the SharePoint pdf files in Power Apps.

Example:

I have a SharePoint document library [Training Related Documents] that has various pdf files, as shown below:

I have added a Gallery control and a PDF viewer control on the Power Apps screen. The gallery control is connected to the above SharePoint document library.

When the user selects a PDF file from the gallery, that PDF file will be displayed on the PDF viewer control as shown below:

Let me show how to achieve this:

• On the Power Apps screen, insert a Gallery control -> Set its Items property to document library name.

'Training Related Documents'

Where,

1. ‘Training Related Documents’ = SharePoint document library name.

• Insert a PDF viewer control -> Set its Document property to:

Substitute(
    Gallery1.Selected.Thumbnail.Large,
    "/thumbnail",
    "/pdf"
)

Where,

1. Gallery1 = Power Apps Gallery control name

• Once your app is ready, save, Publish, and Preview it. When the user selects any PDF file from the gallery, that file will be displayed on a PDF viewer control. However, if the file is large, it will provide the error message “Couldn’t open a PDF file. Open in browser instead.“

• Once you click on that link, the pdf file will be displayed on the browser as shown below:

This is how we can display the SharePoint pdf files in Power Apps.

Display SharePoint library files in Power Apps PDF control [Without Flow]

In Power Apps, with the help of PDF viewer(experimental) control, we can display the SharePoint library documents in Power Apps.

I have a SharePoint document library [MarketingPolicy] that contains some documents.

Look at the example below. Here, I’m displaying documents from the SharePoint library in Power Apps. When you select the documents, they are displayed in a PDF viewer.

Follow the below steps to display SharePoint library documents in Power Apps.

NOTE: The PDf viewer control requires the document URL to display. So, store the URL of the documents in the library.

Let’s see how to store the PDF file path in the SharePoint library.

1. In SharePoint document library-> click on +Add column -> select Hyperlink -> click Next. Then, provide the column names and click on Save.

2. Click on the Gear icon in the SharePoint library-> Select Library settings -> More library settings-> Under Columns -> Select hyperlink column. Then, you get the image below.

Under Format URL as: select the Picture option, at last, click on OK.

3. Click on the ellipses(…) next to the document-> select Details.

4. In the Details pane, copy the Path of the document and paste it into the File links column.

5. Like this does for all the remaining documents in the SharePoint library. Look at the library below after storing the links.

Now, the SharePoint library is ready. Let’s go for Power Apps.

6. In Power Apps, from the +Insert tab, select the gallery.

7. Provide the SharePoint library name in the Items property of the gallery.

Items: Marketing Policy

8. In the Image property of the image in the gallery. Provide the below formula to get the pdf image next to the file.

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"
)

OR

You can also add a PDF document icon instead of an image if your SharePoint library has only PDF files.

9. Write this code to the Text property of the label in the gallery.

Text: Thisitem.Name

In the formula, change the “Name” to your column name in the SharePoint library.

Look, we got the PDF image and document name in the gallery.

10. Now, add the PDF viewer(experimental) from the +Insert tab.

11. Provide the below formula on the Document property of PDFViewer.

Gallery.Selected.'File links'

12. Now, save and preview the app. When you select the file from the gallery, it will display in the PDF viewer.

Display SharePoint library files in Power Apps PDF control [Using Flow]

With the help of Power Automate, we can also display PDF files stored in a SharePoint document library in Power Apps.

Here, Power Automate gets the files from SharePoint, sends them back to Power Apps, and then displays that file content in the PDF Viewer.

Look at the example of displaying the SharePoint library files in Power Apps PDF viewer with the flow.

Follow the steps below to achieve this.

1. In Power Apps navigation, click on the Power Automate ->Then +Add flow ->At last, click on +Create new flow.

2. Then, click on the + Create from blank to create a new flow.

3. Now, set the flow as shown in the image below and then save the flow with some name.

Here,

• Power Apps (V2) will come automatically-> Click +Add an Input and select Text. Then, provide the input name.
• Add action -> Get file content from SharePoint.
  • Provide the site address of the document library.
  • Provide the Power Apps (V2) trigger input in the File identifier.
• Add Compose action. Provide the following code in the Inputs bar.

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

• Add Respond to a Power Apps or flow action. Provide the output value dynamically.

4. Return back to Power Apps. From the +Insert tab->select gallery.

5. Provide the SharePoint library name in the Items property of the gallery.

6. In the gallery Onselect property provide the below formula.

Set(varDocument,PowerAppsGetFileContent.Run(Gallery3.Selected.Identifier).result)

Here, we’re using the Set function to store the result of “PowerAppsGetFileContent.Run()” in a variable called varDocument.

• The PowerAppsGetFileContent is the flow name.
• The argument Gallery3.Selected.Identifier will return the selected file identifier to the “PowerAppsGetFileContent.Run().”
• .result is accessing the out from the “PowerAppsGetFileContent.Run().”

7. Now, provide the variable name in the Document property of PDF viewer control.

Document: varDocument

8. Save the changes and preview the app. While selecting the pdf files in the gallery, it will display it in pdf viewer control; the flow will run automatically.

Moreover, you may like some articles below:

• Gallery Control in Power Apps
• Data Table Control in Power Apps
• Power Apps Gallery Conditional Formatting
• Power Apps WeekNum and ISOWeekNum Function
• PowerApps Play Video From SharePoint

I hope you found this article informative. I have detailed the PDF viewer control using various examples, such as Power Apps PDF viewer, Power Apps PDF viewer local files, Power Apps PDF viewer SharePoint document library, and Power Apps PDF viewer SharePoint document library with flow.

You can refer to these examples when displaying PDF documents within Power Apps.

Bijay Kumar

After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.