How to add PDF Viewer to a scrollable screen?

Introduction - PDF viewer on a scrollable canvas

PDF viewer is an excellent control that makes reading a PDF in your canvas apps super easy. The control is still an experimental feature. One of my coworkers, Maliha Hasan, ran into an issue with it on one of her projects. The app had a scrollable screen on with a PDF viewer control. The problem is you cannot insert that control into a scrollable canvas. If you try to insert or copy and paste this control inside a canvas, nothing happens. And if you keep it outside the canvas, it will obviously not scroll along with the rest of the controls on the canvas.

Fix - Creating a component

The fix is to create a canvas app component, a very simple one, that just has a PDF viewer control inside it. Follow these steps to create the component:

1. Go to the Components tab in the canvas app studio
2. Click on New component
3. Add a PDF viewer control to the component
4. Set its Width to Parent.Width and Height to Parent.Height along with setting its X and Y to 0
5. Create a custom property with the following details:
   1. Name = Document Link
   2. Property type = Input
   3. Data type = Text
6. Set the Document property of the PDF viewer control to:

   If(
       IsBlank(Component1.DocumentLink),
       SamplePdf,
       Component1.DocumentLink
   )

   Make sure the DocumentLink property of the component is wiped out. By default, it is set to "Text"

Now, go back to the Screens tab in the studio. Click anywhere within the canvas and then go to Insert->Custom->Component1.

As you can see, you can now add the control to the canvas easily. Once its added, place it wherever you want it to be and set its height and width as needed. I have a button placed below the PDF viewer component just so show that I can now scroll the PDF viewer. Which I wasn't able to earlier!

PS: To learn more about Power Apps controls, click here.

Recent articles

1. How to use a timer across screens!
2. How to fix common iOS UX issues
3. A-Z: Learn how to improve your Power Apps with 26 tips, again!