Mastering Power Apps PDF Viewer: Step-by-Step Guide with Examples (Preview)

Experience with the PDF Viewer has been limited due to its preview status. However, after extensively testing this component for PDF display requirements in Power Apps, I’d like to share my findings.

PDF Viewer (Preview Feature)

As the name suggests, the PDF Viewer is a control designed for displaying PDF files, though it’s currently in preview status. Due to its preview nature, some properties listed in the official documentation may not be available in practice (such as OnSelect).
https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/controls/control-pdf-viewer

Methods for Specifying PDFs to Display

While the official documentation states that PDFs should be specified using URLs, the actual implementation has several limitations. When using URLs, you must ensure:

• The URL uses HTTPS protocol
• The server hosting the PDF doesn’t require authentication

These restrictions can make the viewer somewhat impractical to use. For example, you cannot directly display PDFs from SharePoint or OneDrive simply by specifying their URLs, as these platforms require authentication.
Here are the recommended alternative methods for specifying PDFs:

Retrieving Data from SharePoint Online Document Library

This method involves using Power Automate to fetch PDF data from SharePoint Online document libraries for display.

Adding as Media

You can embed PDFs as media files in Power Apps, similar to how you would handle image files.

Base64 Data

This method involves converting PDFs to Base64 format and embedding them directly in the PDF viewer. For those interested in this approach, detailed information is available here:

Power Apps PDFをキャンバスアプリにBase64で直接埋め込む｜PDFビューアーの使い方

Power Appsは、画像コントロールとかを含めてBase64のデータに対応していることが多いイメージ。そこで、ひょっとしたらPDFも？みたいな感じで試してみた。PDFビューアー(試験段階)PDFビューアーは試験段階の機能で、Power ...

ippu-biz.com

PDF Viewer Properties

The PDF viewer comes with various properties, and honestly, some of them can be quite challenging to understand 😅
I’ll share my findings from experimenting with these properties.
Note: Since the PDF viewer is still in preview, these features may change without notice.

Document

The Document property specifies which PDF to display. While you typically specify a URL enclosed in double quotes (“”), there are other options:
For PDFs added as media: specify the media name
For Base64-embedded PDFs: specify the Base64 data in double quotes

Here’s an example using Base64 data:

ShowControls

Setting the ShowControls property to true displays the standard PDF manipulation controls.

Zoom and ActualZoom (Read-only)

As the name suggests, the Zoom property controls the magnification/reduction ratio of the PDF display.

For example, setting it to 200 will display the PDF at 200% magnification:

Using the Fit enum values will adjust the display to match the screen dimensions:

You might find it useful to combine this with a slider control:

The ActualZoom property (read-only) returns the actual zoom percentage. When you set a numerical value in the Zoom property, it returns that value; when using Fit enum values, it returns the actual calculated zoom percentage.

Note: Interestingly, you can set the Zoom property to 0, though what a 0% zoom means is quite puzzling 😅

Page, PageCount (Read-only), and CurrentPage (Read-only)

The Page property allows you to programmatically specify which page to display.

For example, setting it to 2 will display the second page:

PageCount returns the total number of pages in the document, which can be used to set a slider’s Max value like this:

You can then configure the Page property to work in conjunction with the slider:

It’s important to note that while setting the Page property will change the viewer’s displayed page, manually navigating in the viewer will not update the Page property.

Therefore, when users navigate using the scrollbar, the Page property value remains unchanged. To get the current page number in such cases, use the CurrentPage property instead.

FindText

Setting a value (text string) in the FindText property enables text search within the PDF file.

Directly typing a value will search for the first occurrence of that text:

Typically, you’ll want to use this in combination with a text box:

While these features are straightforward, the “FindNext” and “FindPrevious” properties have some unique behavioral characteristics.

FindNext, FindPrevious

The FindNext and FindPrevious properties are designed to navigate to the next (or previous) search result, as their names suggest.

Interestingly, these properties have a default boolean value of “false”:

After experimenting, it appears that the navigation to the next (or previous) search result occurs when these property values change to true.
Here’s how you might implement a “Next Search Result” button:

First, set up a variable to force value changes:

Then, assign this variable to the FindNext property:

When pressed, it navigates to the next search result!

While it’s true that Power Apps can’t directly call control functions, this implementation feels a bit unconventional! 😅
Though I might be using it incorrectly, it’s hard to say for sure given the limited documentation available for the PDF viewer. 🤔

OnStateChange Event

Finally, let’s explore “OnStateChange” – the only action event available in the PDF viewer. While the name suggests it’s triggered when some state changes, it’s not immediately clear which state changes trigger this event.

In essence, this event fires with almost any interaction, whether user-initiated or programmatic.
One practical use case might be verifying whether a user has read through all pages of a document.
For example, you could implement this by storing CurrentPage values in a collection (without duplicates) each time OnStateChange is triggered, then allowing progression to the next screen only when all pages have been viewed.
While we haven’t covered password-protected PDFs in this article, that functionality is also available – perhaps a topic for a future discussion!

Related Article

How to turn Word, Excel and Power Point previews into Power Apps canvas apps.

I found this article interesting and tried it out.Advance preparationSave sample files in the SharePoint document librar...

ippu-biz.com

2024.09.08

How to convert Word, Excel and Power Point files to PDF using only the Power Apps canvas.

I found this article interesting and tried it out.Advance preparationThe assumption is that the file needs to be in the ...

ippu-biz.com

2024.09.08

How to Use Power Apps PDF Function (Preview): Step-by-Step Guide with Real Examples

PDF Function The PDF function is a preview feature that allows you to create PDF file content directly from screen eleme...

ippu-biz.com

2024.09.08