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:
- How to insert a Power Apps PDF viewer control
- How to work with a PDF viewer control in Power Apps
- Display the SharePoint pdf files in Power Apps
- 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 Properties
Here, I will explain the properties of PDF viewer control in Power Apps.
|A user can specify the color for a border.
|This property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
|When the DisplayMode property of the control is set to Disabled, it indicates a color for the control’s border.
|Determines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
|Please provide the URL of the PDF file enclosed in double quotation marks.
|We can define the background color of the control.
|This code searches for the next occurrence of “FindText” within the document.
|This code searches for the previous occurrence of “FindText” within the document.
|Specify the search term that needs to be located within the document.
|Border color of a control when the user hovers their mouse pointer over it.
|Below are the actions that should be executed when there’s a change in the control state.
|Specify the number of page that you want to display.
|In 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.
|Specify the number of pages that you want to display.
|A description that appears upon hovering over a control.
|Here, we can specify whether the PDF viewer control can be visible.
|Refers 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.
- The Power Apps PDF viewer control will appear like the screenshot below.
- By default, the PDF viewer name will be “PdfViewer1“; you can Rename the export control using “pdf.”
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.
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:
Let me show you how to achieve this:
- On the Power Apps screen, insert a PDF viewer control as shown below:
- Select the PDF viewer Control -> Set its Document property to pdf link as shown below:
- Once your app is ready, Save, Publish, and Preview the app. Now we can see that your pdf file will be displayed on the PDF viewer control as shown below:
- 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:
- Search Bar = We can find any text within the document using the search bar.
- Previous Page = It will help you retrieve the document’s previous page.
- Next Page = It will help you retrieve the document’s next page.
- 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.
- Zoom Out =The user can minimize and relocate the PDF document for better viewing.
- Zoom In = The user can maximize and relocate the PDF document for better viewing.
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.
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'
- ‘Training Related Documents’ = SharePoint document library name.
- Insert a PDF viewer control -> Set its Document property to:
- Gallery1 = Power Apps Gallery control name
- Once your app is ready, Save, Publish, 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.“
- 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.
Power Apps PDF viewer Limitations
Here, I will explain the limitations of Power Apps PDF viewer control.
- To ensure proper functionality, the PDF viewer control can only accommodate PDF files that adhere to the PDF32000 specification.
- The security architecture of Power Apps mandates that the PDF Viewer only supports HTTPS links, not HTTP.
- 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.
- The ‘Document’ property should directly link to the PDF file. Server redirects or HTML views of the document are not supported.
- 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.
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:
- Power Apps Barcode Reader Control
- How to use Add picture control in Power Apps
- Power Apps Check Box Control
- How to Use Power Apps Audio and Video Control
Preeti Sahu is an expert in Power Apps and has more than 6 years of experience working with SharePoint and the Power Platform. As a Power Platform expert for Power BI, Power Apps, Power Automate, Power Virtual Agents, and Power Pages, she is currently employed with TSinfo Technologies. She is the author of the book Microsoft Power Platform A Deep Dive. She also made a big technical contribution to SharePointDotNet.com in the form of articles on the Power Platform. She enjoys traveling and spending time with her family in her spare time.