Power Apps PDF Viewer Control [With Real Examples]

Did you know how to use a Power Apps PDF viewer control? If Not, follow this complete tutorial to learn about PDF viewer control in Power Apps.

Moreover, I will explain the key properties of a PDF viewer in Power Apps and many more:

  1. How to insert a Power Apps PDF viewer control
  2. How to work with a PDF viewer control in Power Apps
  3. Display the SharePoint pdf files in Power Apps
  4. Power Apps PDF viewer control limitations

Power Apps PDF Viewer Control

The Power Apps PDF Viewer is the experimental control that lets users display the PDF file contents.

This control can also display graphics, text, and other content in a PDF file.

The PDF Viewer control can showcase a specific file by setting the Document property to the URL enclosed in double quotation marks (” “).

Power Apps PDF viewer control

Power Apps PDF viewer Properties

Here, I will explain the properties of PDF viewer control in Power Apps.

Property NameDescription
Border ColorA user can specify the color for a border.
Border StyleThis property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
DisabledBorderColorWhen the DisplayMode property of the control is set to Disabled, it indicates a color for the control’s border.
DisplayModeDetermines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
DocumentPlease provide the URL of the PDF file enclosed in double quotation marks.
FillWe can define the background color of the control.
FindNextThis code searches for the next occurrence of “FindText” within the document.
FindPreviousThis code searches for the previous occurrence of “FindText” within the document.
FindTextSpecify the search term that needs to be located within the document.
HoverBorderColorBorder color of a control when the user hovers their mouse pointer over it.
OnStateChangeBelow are the actions that should be executed when there’s a change in the control state.
PageSpecify the number of page that you want to display.
Password
PressedBorderColorIn the case of an audio or video player, essential controls include a play button and volume slider. Meanwhile, a pen control should feature icons for drawing, erasing, and clearing.
ShowControlsSpecify the number of pages that you want to display.
ShowPasswordPrompt
TooltipA description that appears upon hovering over a control.
VisibleHere, we can specify whether the PDF viewer control can be visible.
ZoomRefers to the level of magnification applied to an image captured by a camera or the view of a file in a PDF viewer.

These are the properties of Power Apps PDF viewer control.

How to add Power Apps PDF viewer Control

Here, I will show you how to insert PDF viewer control in Power Apps:

  • Sign into Power Apps with your valid Microsoft 365 Credentials.
  • Create a Blank canvas app -> On the Power Apps screen, click +Insert -> Expand Media -> Select PDF viewer (experimental) control.
Add PDF viewer control in Power Apps
  • The Power Apps PDF viewer control will appear like the screenshot below.
How to add Power Apps PDF viewer control
  • By default, the PDF viewer name will be “PdfViewer1“; you can Rename the export control using “pdf.
Add Power Apps PDF viewer control

This is how to insert Power Apps PDF viewer control.

How to use Power Apps PDF Viewer Control

First, let me show you how to use the Power Apps PDF viewer control.

Example:

I created a Power Apps canvas app and added a PDF viewer control. In that control, I will be displaying the pdf file as shown below:

PDF viewer control in Power Apps

Let me show you how to achieve this:

  • On the Power Apps screen, insert a PDF viewer control as shown below:
How to use Power Apps PDF viewer control
  • Select the PDF viewer Control -> Set its Document property to pdf link as shown below:
"https://blog.mozilla.org/security/files/2015/05/HTTPS-FAQ.pdf"
Use Power Apps PDF viewer control
  • Once your app is ready, SavePublish, and Preview the app. Now we can see that your pdf file will be displayed on the PDF viewer control as shown below:
How to use PDF viewer control in Power Apps
  • On the PDF viewer control’s property pane, turn on the toggle for “Show controls.” Once you turn it on, you can find the following:
    1. Search Bar = We can find any text within the document using the search bar.
    2. Previous Page = It will help you retrieve the document’s previous page.
    3. Next Page = It will help you retrieve the document’s next page.
    4. Open File = The user can access the file via the browser after clicking on it, which is beneficial. Furthermore, the user can download or print the PDF document directly from the browser.
    5. Zoom Out =The user can minimize and relocate the PDF document for better viewing.
    6. Zoom In = The user can maximize and relocate the PDF document for better viewing.
Show Controls in PowerApps PDF Viewer Control

This is how to work with a Power Apps PDF viewer control.

How to 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:

How to show PDF files from SharePoint in PowerApps

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:

How to display SharePoint PDF files in PowerApps

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.
Show PDF files from SharePoint in PowerApps
  • 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
Show SharePoint PDF files in PowerApps
  • Once your app is ready, SavePublish, and Preview the app. When the user selects any PDF file from the gallery, that file will be displayed on a PDF viewer control, but if the file is large, it will provide the error message “Couldn’t open a PDF file. Open in browser instead.
How to display PDF files from SharePoint in PowerApps
  • Once you click on that link, the pdf file will be displayed on the browser as shown below:
Display PDF files from SharePoint in PowerApps

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

Power Apps PDF viewer Limitations

Here, I will explain the limitations of Power Apps PDF viewer control.

  1. To ensure proper functionality, the PDF viewer control can only accommodate PDF files that adhere to the PDF32000 specification.
  2. The security architecture of Power Apps mandates that the PDF Viewer only supports HTTPS links, not HTTP.
  3. The server hosting the document must not require authentication to avoid any issues. In cases where PDF documents are hosted on a server with restrictive cross-origin resource sharing (CORS) settings, viewing them in the app may be an issue. To address this, the server that hosts PDF documents must allow cross-origin requests from powerapps.com.
  4. The ‘Document’ property should directly link to the PDF file. Server redirects or HTML views of the document are not supported.
  5. If the control encounters a document it cannot open, app users can open PDF documents in an external browser. This option is also available in the control menu for all external documents.

These are the limitations of Power Apps PDF viewer control.

Conclusion

I hope this Power Apps tutorial gave you complete information about “Power Apps PDF viewer control” and its key properties.

Moreover, I have covered how to add Power Apps PDF viewer control and how to use the PDF viewer control in Power Apps.

Lastly, you have learned to display the SharePoint pdf files in Power Apps and the limitations of Power Apps PDF viewer control.

Also, you may like some more Power Apps tutorials: