How to Work With Power Apps PDF Viewer Control [With Examples]

One of my clients provided a requirement to display a SharePoint document/file in the Power Apps application. Additionally, they want to use the Search Bar, Open File, Zoom In, and Zoom Out functions of PDFs [much way your Windows, Mac OS, and Android devices’ local PDF reader software does].

To achieve this, Power Apps provides a very useful control called PowerApps PDF viewer, which helped me achieve my needs.

In this Power Apps tutorial, I will tell you how to use a PDF viewer PowerApps, Power Apps PDF viewer SharePoint, how to create a PDF from PowerApps flow, and many more:

• Power Apps PDF Reader
• Power Apps pdf viewer SharePoint document library without flow
• PDF viewer in Power Apps using flow
• Power Apps PDF viewer couldn’t open pdf file

Power Apps PDF Viewer

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, is a control that displays graphics, text, and other contents in a PDF file.

In the PDF Viewer control, you can see the specific file by setting its Document property to the URL, including double quotation marks (” “). Look at the image below.

Power Apps PDF Viewer Properties

Next, I will discuss the Power Apps PDF viewer properties. Refer to the below table.

Property	Description
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 pages in a PDF file that is actually being shown
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
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
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
Zoom	It defines the percentage by which an image from a camera is magnified or the view of a file in a PDF viewer

How to Use PDF Viewer in Power Apps

To use the Power Apps PDF viewer, refer to the scenario below.

Example:

Whenever you insert the PDF Viewer control [+ Insert > Media > PDF viewer], then the control will appear with a Sample PDF Document that looks like the screenshot below.

Instead of the sample PDF, you can provide the PDF link according to your needs, which should be enclosed with a double quotation mark (” “), as shown below.

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

Output:

Power Apps PDF Reader

Whenever you add a Power App PDF viewer, some features are available. To view all the features, you need to enable one of its properties, Show controls (Properties -> Show controls).

When you enable this property, all the controls will appear at the top of the PDF control, as shown below. Below are all the PDF viewer controls. Such as:

1. Search Bar = A Search Bar control where you can find any text in the document
2. Previous Page = The Previous Page control will help you to get the previous page of the document
3. Next Page = The Next Page control will help you to find the next page of the document
4. Open File = This control helps open the file in the browser once the user clicks on it. You can also download and print the PDF document from the browser itself
5. Zoom Out = We can use this control to specify the user to view the PDF document to be smaller and farther away
6. Zoom In = Finally, this control specifies that the user should view the PDF document as larger and farther away

Have a look at the below screenshot for the output:

Power Apps PDF Viewer SharePoint [Without Flow]

To work with Power Apps PDF viewer SharePoint without flow, follow the simple example below.

Example:

I have a SharePoint document library named “Policy Documents,” which contains the fields below.

In Power Apps, there is a Gallery control having the SharePoint document library records, as shown below.

Now, I would like to view the documents in PDF viewer control with a PDF format based on the gallery control selected document.

Once you tap on the Open File option from the PDF viewer, then the particular document will open in a new browser where you can save, download, and print the file itself.

Similarly, if you want to view the document letter with a 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 the search bar control.

To work around this, follow the below steps. Such as:

1. On the Power Apps Screen, insert a PDF viewer control and set its Document and ShowControls properties.

ShowControls = true

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

Where,

• gal_Records = Power Apps gallery control name

2. Once your app is ready, Save, Publish, and Preview the app. Whenever the user taps on the Open File option from the PDF viewer, then the particular document will open in a new browser where you can save, download, and print the file itself.

3. However, when you select any pdf document or an xlsx file from the gallery. Once you click on these types of files, you can observe that those files can not be able to display in the PDF Viewer, and an error will appear like “Couldn’t open PDF file. “

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

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

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

So follow the below instructions on how we can overcome this issue. Open the SharePoint Document Library.

6. Create a Hyperlink or Picture column in the SharePoint Library. Here, I have created a Hyperlink field [Image].

7. Now, 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://szg52.sharepoint.com/sites/Marketing/PolicyDocuments/ACGH Pharmaceutical.png

8. Next, go to the Power Apps app, refresh the data, and apply the code below to the PDF Viewer Document property [You can use the ampersand (&) and below code from the EncodeURL function], as shown below.

Document = If(
    Last(
        Split(
            gal_Records.Selected.'File name with extension',
            "."
        )
    ).Value = "pdf",
    "https://szg52.sharepoint.com/sites/Marketing/PolicyDocuments/ACGH Pharmaceutical.png" & EncodeUrl(gal_Records.Selected.'Folder path' & gal_Records.Selected.'File name with extension'),
    Substitute(
        gal_Records.Selected.Thumbnail.Large,
        "/thumbnail",
        "/pdf"
    )
)

9. Finally, Save and Preview the app. Now select any PDF document from the gallery. Then, you can view the specific selected PDF, which will appear in the PDF Viewer control as below.

10. Similarly, if you select any .docx or .xlsx file, those documents will be transferred to PDF and displayed in the PDF viewer control.

Note:

If you select any image from the gallery, then it won’t be able to open. Because an image format can not be able to transfer as PDF, so for this, follow the below step.

11. 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 = gal_Records.Selected.Thumbnail.Large

12. 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 way, we can work with Power Apps PDF Viewer SharePoint without Flow

Create a PDF Viewer from Power Apps Flow

In this section, I will show you how to create a PDF viewer from the Power Apps flow. To do so, follow the below strps.

1. On the Power Apps Screen, select the Power Automate section, click on the Create a new flow button, and Select + Create from blank.

2. Once your app is created, add Text control [DocIdentifier] to the trigger condition. Next, add another action named “Get file content” and provide the information below.

• Site Address = Specify the address of the SharePoint site
• File Identifier = Click on the field. Select the DocIdentifier under the Dynamic content

3. Next, add the Compose action and provide the below expression.

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

4. Next, add another action named “Respond to a PowerApp or flow” and provide the text filed value from the compose Outputs.

5. Once all your updates are done, give the flow the proper name and save it. Then, you will see the flow created under the Power Automate section.

6. Now, select the Gallery control and set its OnSelect property to the code below.

OnSelect = Set(
    varDocumentCurrent,
    PowerAppsPDFViewerControl.Run(gal_Items.Selected.Identifier).result
)

7. Finally, select the PDF viewer control and set its Document property as:

Document = varDocumentCurrent

8. Save, Publish, and Preview the app. When the user selects any document from the gallery control, the flow will trigger successfully, as shown below.

9. Also, the PDF viewer control displays selected documents in PDF format. Have a look at the below screenshot for the output.

This way, we can work with creating a PDF Viewer from Power Apps flow.

Power Apps PDF Viewer Couldn’t Open PDF File

Whenever you select any pdf document or an xlsx file from the gallery, once you click on these types of files, you can observe that those files can not be able to display in the PDF Viewer, and an error will appear like “Couldn’t open PDF file. “

For more information -> Couldn’t open PDF file in Powerapps PDF viewer Control

Power Apps PDF Viewer Local File

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

Power Apps PDF Viewer Limitations

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

Some Power Apps articles you may also like:

• Power Apps Trim
• Pagination in Power Apps Gallery
• Power Apps Today Date Without Time
• Capture a Power Apps Digital Signature
• Container in Power Apps
• 4 Various Ways to Build Multilingual Apps in Power Apps

I hope this Power Apps tutorial is useful. If you have any requirements related to the Power Apps PDF viewer control, you can follow this post until the end to get all the information about it using different real-time scenarios.