Power Apps PDF Viewer - Complete tutorial

In this Power Apps Tutorial, We will learn about all the details related to the PDF Viewer control in PowerApps. Below represents all the topics that we will cover in this post.

What is PDF Viewer in Power Apps
Properties of the PowerApps PDF Viewer Control
What are the Limitations in PowerApps PDF Viewer Control
How to add PDF Viewer control in PowerApps
PowerApps PDF Viewer Examples
PowerApps PDF Viewer without flow
PowerApps PDF Viewer sharepoint document library with flow
PowerApps PDF Viewer not working
PowerApps PDF Viewer onstatechange
PowerApps PDF Viewer local file

Table of Contents

PowerApps PDF Viewer Control

Power Apps PDF Viewer is an experimental control that helps to display the contents of a PDF File.
PowerApps PDF Viewer currently known as PDF Viewer Experimental control that displays any graphics, text, and other contents in a PDF file.
In the PDF Viewer control, the specific file you can see by setting its Document property to the URL including in double quotation marks (” “).

PowerApps PDF Viewer Properties

Below represents some of the important key properties of the PowerApps PDF Viewer control:

Document = In this property, you need to provide the URL enclosed in double-quotation marks (” “) of a PDF file.
ActualZoom = It specifies the actual zoom of the control, which may differ from the zoom requested with the Zoom property.
CurrentFindText = It represents the current search term that is in use.
CurrentPage = It defines the number of the page in a PDF file that is actually being shown.
BorderColor = It specifies the color of a control’s border.
DisplayMode = It defines whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
DisabledBorderColor = It provides the color of a control’s border if the control’s DisplayMode property is set to Disabled.
Fill = It specifies the background color of a control.
FindNext = It helps to find the next instance of FindText in the document.
FindPrevious = It helps to find the previous instance of FindText in the document.
FindText = It represents the search term to look for in the document.
HoverBorderColor = It provides the color of a control’s border when the user keeps the mouse pointer on that control.
OnSelect = It defines the actions to perform when the user taps or clicks a control.
OnStateChange = It defines the actions to perform when the state of the control changes.
Page = It defines the number of the page that you want to show.
PageCount = It specifies the number of pages in a document.
PressedBorderColor = When the user taps or clicks that control, it provides the color of a control’s border.
ShowControls = This specifies whether an audio or video player shows, for example, a play button and a volume slider, and a pen control shows, for example, icons for drawing, erasing, and clearing.
Tooltip = This is the explanatory text that appears when the user hovers over a control.
Visible = It specifies whether a control appears or is hidden.
Zoom = It defines the percentage by which an image from a camera is magnified or the view of a file in a PDF viewer.

Read Power Apps GroupBy Function example

PowerApps PDF Viewer Limitations

There are certain limitations in PowerApps PDF Viewer control. Such as:

There is a most important limitation is, the Document property of this control must link directly to the PDF file. Server redirects or HTML views of the document aren’t supported.
Here, the server that hosts the document must not require authentication.
The another limitation is, the security architecture of Power Apps requires the PDF Viewer to support only HTTPS links, not HTTP.
If the document resides on a server that has restrictive cross-origin resource sharing (CORS) settings, then a user may not be able to view a PDF document.
To overcome with this type of issue, the server that hosts PDF documents must permit cross-origin requests from powerapps.com.

Read Power Apps Export Import Control – How to use

Add PDF Viewer control in PowerApps

Most of the important things, you should know is how to add the PDF viewer control in the PowerApps screen.

To insert the control, go to the Insert tab -> Click on Media -> Select PDF viewer (experimental). Once you will click on it, then the control will add on the screen as shown below.

When you will insert the PDF Viewer control, then the control will appear with a Sample PDF Document that looks like as above screenshot.
Instead of the sample PDF, you can provide the PDF link as per your need and that should be enclosed with a double-quotation mark (” “). Follow the below example that how you can use it.

PowerApps PDF Viewer Examples

Below represents a simple scenario of PowerApps PDF Viewer control that you can go through.

On the screen, Insert a PDF Viewer (experimental) control. Select the Document property of the control and apply the below PDF link:

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

Here, the PDF File should be enclosed with a double quotation mark (” “). Otherwise, you will get an error like “Unexpected Characters or Name is not valid” and the file will not open in the PDF Viewer control.

PowerApps PDF Viewer Examples — PowerApps PDF Viewer control

Once you will save and preview the app, you can view the specific PDF file on the screen.

Read PowerApps Collection – How to create and use

Show Controls in PowerApps PDF Viewer Control

There are some controls i.e. available in the PowerApps PDF Viewer. To view all the controls, you need to enable one of its properties called Show controls (Properties -> Show controls).
When you will enable this property, then all the controls will appear at the top of the PDF control as shown below. Below represents all the PDF Viewer controls:

A Search Bar control where you can find any text in the document.
The Previous Page control will help you to get the previous page of the document.
The Next Page control will help you to find the next page of the document.
Open File control that helps to open the file in the browser once the user clicks on it. Also, you can download, print the PDF document from the browser itself.
Zoom Out control specifies the user to view the PDF document to be smaller and farther away.
Zoom In control specifies the user to view the PDF document to be larger and farther away.

PowerApps PDF Viewer without flow

Do you want to view a SharePoint Document without using Flow or Power Automate in PowerApps?

When someone is working with any PowerApps stuffs, always he/she wants that how the work will complete with a simple and shortcut process with less time.
Similarly, When you are using the PowerApps PDF Viewer control, you may think that what is the simple formula that we can use and then get the result in a simple manner.
To show any of the SharePoint Documents (like DOCX, PDF, XLSX, PNG, etc.) in PowerApps PDF Viewer control, We can use PowerApps Automate or Flow. But at first, to make it so easy and simple, we will not use any flow.
To achieve this, directly we can use some formulas and get all types of documents in a PDF Viewer control in PowerApps. Check out the below simple steps that you can try.

Step – 1:

There is a SharePoint Document Library named Documents. This library has various files or documents like Microsoft Document, PDF Files, Images, etc.
As I have changed the Document layout to Tiles (All Documents -> Tiles), so all the documents are appearing in tile views as shown below.
This document library has these many below columns as:

Name = This is By default column. While you will create a SharePoint Document Library, then this column will create bydefault.
Modified = This is a Date and Time field.
Modified By = This is a People picker field.
Status = This is a Choice column having choice values like New, Approved, Rejected, and Pending.

Step – 2:

Now create a Canvas app with a Tablet layout. Connect the SharePoint Library Data source to the app.
Insert a Gallery control (Insert -> Gallery -> Vertical). Make its Layout to Title and subtitle on overlay. Once you will make it, then the gallery will display with the Tile layout as like the below screenshot.

Step – 3:

Select the gallery and click on the Edit option from the Fields section. Set its Title, Subtitle, and Image property to the following formulas:

Title = ThisItem.'File name with extension'
Subtitle = ThisItem.Status.Value (As Status is a Choice column)
Image = ThisItem.Thumbnail.Large

Also, you can provide many designs to the gallery control by using various properties like Border, BorderThickness, Hover Color, Color, Fill, Show navigation, Transition, etc.

Step – 4:

Now to view all types of documents one by one, we will insert a PowerApps PDF Viewer (Experimental) control by side of the gallery.
When the PDF Viewer inserted in the app, it shows the SamplePdf document. To view all the PDF controls, just enable the Show controls property.

Power Apps PDF Viewer experimental control

Step – 5:

Next comes how we can view a SharePoint Document or a Gallery Document in the PDF Viewer control. To achieve this, We will use the below code on PDF Viewer’s Document property:

Document = Substitute(
    GalDocument.Selected.Thumbnail.Large,
    "/thumbnail",
    "/pdf"
)

Where,

Substitute = PowerApps Substitute function helps to identify the text to replace by matching a string.
GalDocument = Specify the name of the gallery
Thumbnail = Image that retrieves from the SharePoint Document Library

Step – 6:

Save and Preview (F5) the app. Select a Microsoft Document (.docx), then you can view the specific document that will appear in the PDF viewer with a PDF format.
Once you will tap on the Open File option from the PDF viewer, then the particular document will open in a new broswer where you can save, download, print the file itself.
Similarly, if you want to view the document letter with large size or smaller size, then you can use PDF Zoom In or Zoom Out control. Also, if you want to find any text from the pdf, then you can search the word with the help of search bar control.

Step – 7:

Next, Select any pdf document or an xlsx file from the gallery. Once you will click on these type of files, you can observe that those files can not be able to display in the PDF Viewer and an error will appear as like “Coudn’t open PDF file“.
It can only open the Microsoft document (.docx). Apart from that, if any of the document you will select, then it won’t open in the pdf viewer. Again this is a drawback of the PDF viewer control.

PowerApps PDF Viewer experimental without flow

Step – 8:

To resolve this type of issue, We will use the below code on Pdf Viewer’s Visible property:

Visible = With(
    {
        fileextension: Last(
            Split(
                GalDocument.Selected.'File name with extension',
                "."
            )
        ).Result
    },
    If(
        fileextension = "xlsx" || fileextension = "docx" || fileextension = "ppt" || fileextension = "pdf",
        true,
        false
    )
)

Now save and preview the app. Again select any document or file like pdf, image file, xlsx file from the gallery, then it will behave as like the same thing. It won’t be able to open and view in the PDF Viewer control.

powerapps pdf viewer without power automate

Step – 9: (Tricky solution to open a PDF file in the PDF Viewer control)

So follow the below instructions that how we can overcome of this issue. Open the SharePoint Document Library and change the Document view from Tiles to List. Then the list will appear as like the below screenshot.
Create a Hyperlink or Picture column in the SharePoint Library. Here, I have created a Hyperlink field named as Image.

Step – 10:

Select an image from the library with .png or .jpeg extension and tap on the Details Pane icon.
Scroll down the details pane, go to the Image field, and apply the respective below link:

Image = https://<YourTenantName>.sharepoint.com/sites/PowerApps/Shared%20Documents/TSInfoTechnologies.png

Where,

<YourTenantName> = Provide your name of the tenant
PowerApps = Specify the SharePoint site name where the document library is available
Shared%20Documents = Specify the SharePoint Document Library Name
TSInfoTechnologies.png = Mention the image name with the same extension as like below

PowerApps PDF Viewer sharepoint document library

Also, in the image field, if you want to view the item picture instead of the image link, then follow the below way to do so:
- Settings -> Library settings -> tap on Image field under the Columns section -> Select Format URL as Picture under the Additional Column Settings section -> Click on OK.
- Now if you will go back to the library, then the image link in image field will display with the picture of the specific selected item.

Step – 11:

Then again go back to the PowerApps app and refresh the SharePoint Library Data source (Documents).
Now insert a Label control and set its Text property to the following formula:

Text = GalDocument.Selected.Image

Where,

GalDocument = Gallery control name

Select the specific image from the gallery that you have added the in the SharePoint Library. As in the library, I have inserted the image or Picture as TSInfotechnologies, So I have selected this one from the gallery.
Now, you can see some content will display in the label control. Copy the entire content from the label and paste it in a notepad.

Step – 12:

Go to the Document property of the PDF Viewer and paste the below formula. Now, you can copy the whole content from the notepad and after the .Result = “pdf”, paste it with the double quotation mark (” “).
Then you can specify the PowerApps Substitute function as like the below code.

Document = If(
    Last(
        Split(
            GalDocument.Selected.'File name with extension',
            "."
        )
    ).Result = "pdf",
    "appres://datasources/Documents/table/7baa0be6-7587-4bb6-a9f1-7a345d507e02/rows/6/reference/https:%2F%2Findia-001.azure-apim.net%2Fapim%2Fsharepointonline%2F63a1d22e440f4edaabcbf0b3f91d0c60%2Fdatasets%2Fhttps%25253a%25252f%25252ftsinfotechnologies.sharepoint.com%25252fsites%25252fPowerApps%2FGetFileContentByPath%3Fpath=%252fShared%252520Documents%252fTSInfoTechnologies.png",
    Substitute(
        GalDocument.Selected.Thumbnail.Large,
        "/thumbnail",
        "/pdf"
    )
)

Next what you can do is, just remove the path after the path=%252f till last as I highlighted in the below screenshot.

After removing the path, use the ampersent (&) and below code from EncodeURL function to till last as shown below.

Document = If(
    Last(
        Split(
            GalDocument.Selected.'File name with extension',
            "."
        )
    ).Result = "pdf",
    "appres://datasources/Documents/table/7baa0be6-7587-4bb6-a9f1-7a345d507e02/rows/0/reference/https:%2F%2Findia-001.azure-apim.net%2Fapim%2Fsharepointonline%2F63a1d22e440f4edaabcbf0b3f91d0c60%2Fdatasets%2Fhttps%25253a%25252f%25252ftsinfotechnologies.sharepoint.com%25252fsites%25252fPowerApps%2FGetFileContentByPath%3Fpath=%252f" & EncodeUrl(GalDocument.Selected.'Folder path' & GalDocument.Selected.'File name with extension'),
    Substitute(
        GalDocument.Selected.Thumbnail.Large,
        "/thumbnail",
        "/pdf"
    )
)

Refer to the below screenshot.

PowerApps PDF Viewer control without flow

Step – 13:

At last, Save and Preview the app. Now select any pdf document from the gallery. Then you can view the specific selected pdf will appear in the PDF Viewer control as like below.
Similarly, if you will select any .docx, .xlsx file, then also, those documents will transfer to pdf and display in the pdf viewer control.
Next, if you will select any image from the gallery, then it won’t able to open. Because an image format can not be able to transfer as PDF. So for this, follow the below step.

Step – 14:

To view the image from the gallery, you can insert an Image control in the app.
Resize the image control according to the PDF viewer and set its Image property as:

Image = GalDocument.Selected.Thumbnail.Large

Save and Preview the app. Select any image from the gallery, then you can view the specific selected image in the image control as shown below.

This is how we can use PowerApps PDF Viewer control without using flow or PowerAutomate.

PowerApps PDF Viewer SharePoint document library using Flow

Here we will discuss how to view any SharePoint PDF files in the PowerApps PDF Viewer control using the Power Automate. Go through the below steps that how you can achieve these things in a simple and easiest way.

Step – 1:

At first, Create a SharePoint Document Library in your SharePoint Site. I have a Library named PDFs. This library has default columns like Name, Modified, Modified By.
Here, We need to create one more new column called dataURI and that should be Multiple lines of text data type as shown below.
Also, enable the “Allow unlimited length in document libraries” that is present under the More options in the dataURI Field. Now Save it.

Step – 2:

Next, We will create a flow to view the library pdfs in the PowerApps PDF Viewer control. Click on the Horizontal Elipses (…) -> Automate -> Click on Power Automate -> Create a flow.

Step – 3:

Once you will click on the Power Automate option, then some flow templates will appear on the right side of the library page. Select the template named as “When a new file is added in SharePoint, complete a custom“.
Then, the template will open in a new browser. Here, the flow will connect to the SharePoint with your Microsoft credentials. Tap on Continue.

Step – 4:

When you will click on the Continue button, then the flow will trigger or start with this below action called “When a file is created (properties only)“. Enter the fields with below stuffs:
- Site Address: Enter the SharePoint Site Address where the library presents.
- Library Name: Specify the SharePoint Document Library Name that you have created. Here, my library name is PDFs.

powerapps pdf viewer sharepoint document library using flow

Step – 5:

Next, click on a +New step and insert an action named Get file content (that should be from SharePoint).
Enter the below values in the following fields as:
- Site Address: Specify the address of the SharePoint site again.
- File Identifier: Click on the field. Select the Identifier under the Dynamic content.

Step – 6:

Click on the +New step to insert a Compose. Select the field and Dynamic content. Click on the File Content under the Get file content section as shown below.

power apps pdf viewer sharepoint library using flow

Step – 7:

At last, add a SharePoint action named as Update file properties. Enter the below field values as like below:
- Site Address: Provide the address of the SharePoint site
- Library Name: Specify the SharePoint Library name
- id: Take the ID under the “When a file is created (properties only)” section
- dataURI: Select the Expression tab and write the below code:

dataUri(base64ToBinary(body('Get_file_content')['$content']))

Click on OK.

Step – 8:

That much only we need to do in the flow. The whole process will complete by using all these below actions and the flow structure will look like as the below screenshot. Just Save itand go back to the SharePoint Document Library (PDFs).

powerapps pdf viewer in sharepoint library using flow

Step – 9:

In the SharePoint Document Library, upload a new PDF Document by using the Upload option (from the option bar).
Once you will upload the file, then the existing flow will trigger and complete all the actions. Once the flow will success, after a while, just refresh the SharePoint library, then you can see the file path will appear under the dataURI field as shown below.

If you will check the flow run history, then you can see the flow ran successfully and it will look like as the below screenshot.

Step – 10:

Now its time to work with the PowerApps PDF Viewer control. Create a Canvas App with Tablet or Mobile Layout.
Connect the SharePoint Datasource to the app and add the specific SharePoint Document Library (PDFs) to the app.
On the screen, Insert a Vertical Gallery control and add the Library data source into it. By default, it has Image, title, and subtitle layout.
Set the below code to these gallery properties:

Image = ThisItem.Thumbnail.Large
Title = ThisItem.'File name with extension'
Subtitle = ThisItem.Modified

Now add a PDF Viewer (Experimental) control near by the gallery as shown below. When you will add the PDF Viewer, by default, it will show the sample pdf file. Enbale the Show controls property of the PDF Viewer if you want.

powerapps pdf viewer using power automate

Step – 11:

Select the PDF Viewer control and apply the below formula on its Document property as:

Document = Gallery3.Selected.dataURI

Where,

dataURI = SharePoint Library Column name (that you have created with multiline of text data type)

Save and Preview the app. When you will select the PDF file from the gallery, then the file will appear in the PDF Viewer control with the PDF Format.
You can use any PDF controls like Zoom in, Zoom out, Open file, Search text, etc. whatever you want.

Step – 12:

Again come back to the SharePoint Library (PDFs) and upload another PDF file from your local system. When you will upload a new PDF file in the library, everytime the existing flow will trigger and the dataURI will generate for that particular file.
Here, I have upoaded the file named “Power Apps Tutorial.pdf” and then the flow triggered. Once the flow succeded, I refreshed the page and then I saw the dataURI generated for this recent pdf file.

Step – 13:

Open the canvas app that you have developed for PDF Viewer. Refresh the SharePoint Library data source (PDFs). The new PDF file will reflect in the gallery control.
Save and Preview the app. When you will select the recent PDF file, then it will render to the PDF Viewer and at the same time you can view or read the PDF file as like the below screensot.

This describes how we can work with Power Apps PDF Viewer SharePoint document library using Power Automate.

PowerApps PDF Viewer not working

Below represents a PowerApps Forum link where I have tried the PDF stuffs and previously PowerApps PDF Viewer was not working for me. So I got the solution from here and I wanted to share the simple process that you can try:

Couldn’t open PDF file in Powerapps PDF viewer Control

PowerApps PDF Viewer onstatechange

In this topic, We will see how to work with the Onstatechange property of the PDF Viewer control in PowerApps.

Some times, you may think on that, Is it possible to refresh a pdf viewer in Power Apps? For example,, I have a PDF that is a couple of pages long, When a user logs out and someone else logs in, then at that time, the specific pdf opens up on the page it was last left by the last user. But normally it shoud not be behave like this.
Is there any way to refresh the pdf viewer, So everytime someone goes to that screen, the page showing will appear with the first page?
To workaround with this type of requirement, We will use the PDF Viewer OnStateChange and Page property.
Select the PDF Viewer control and apply the below code on its OnStateChange property as:

OnStateChange = Set(
    varPDFPage,
    PdfViewer6.CurrentPage
)

Where,

varPDFPage = Specify a variable name
PdfViewer6 = PDF Viewer Control name

Next, set the below formula on PDF Viewer’s the Page property:

Page = varPDFPage

At last, whatever action you are using to call the Pdf (OnStart, OnView or Buttons) add the action “Set(varPDFPage, 1)” to the command.

PowerApps PDF Viewer local file

Suppose you want to view some local files in the PowerApps PDF Viewer control, then you can refer to the below PowerApps forum link:

PowerApps PDF Viewer local file

Also, you may like these below PowerApps Tutorials:

In this Power Apps Tutorial, We discussed all the details related to the PDF Viewer control in PowerApps. Below represents all the topics that I have shared in this post.

PDF Viewer in Power Apps
Properties of the PowerApps PDF Viewer Control
Limitations in PowerApps PDF Viewer Control
Add PDF Viewer control in PowerApps
PowerApps PDF Viewer Examples
PowerApps PDF Viewer without flow
PowerApps PDF Viewer sharepoint document library with flow
PowerApps PDF Viewer not working
PowerApps PDF Viewer onstatechange
PowerApps PDF Viewer local file

Bijay Kumar

I am Bijay a Microsoft MVP (8 times – My MVP Profile) in SharePoint and have more than 15 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com