Using PDF Viewer in a Power Apps Form

Introduction

 

A few days back, I got a project requirement where I was asked to show the PDF inside the Power Apps form. The user would add the PDF to the SharePoint List Item and once he arrives at the Power App form, the PDF should be displayed on the screen. Luckily, Power Apps already has a control to allow the user to see the PDF inside the Power Apps. However, use of this control is not straight forward. Below re the step-by-step instructions on how to use the PDF Viewer in a Power Apps form.

 

Create Power Automate to read the PDF Item Attachment

1. Create a Power Automate with a trigger as a Power App Button or Link. Name the automation “GetFileAttachment”
2. Insert an action called “Initialize a Variable” and name the variable “FileID”
   
   
   

3. Insert an action called “get attachments”, as we must get an attachment from the SharePoint List Item. Here, I am getting the List Item ID from Power Apps as input to the Automate function. My List name is “BusinessUnits”.
   
   
   

4. Insert an action “Set Variable”, since we have the List item attachment and its ID set to the variable initialized as the first step. NOTE: Although my SharePoint List Item has only 1 attachment, automate may put your action inside a loop. Don’t worry, since we can ignore this in our case.
   
   
   

5. Since we have the Attachment ID, we can get the content of the attachment by inserting an action “Get Attachment Content”
   
   
   

6. Now we send the output back to Power App From by inserting an action “Respond to a Power Apps”. The very important point here is that output is provided by the previous action “Get attachment content” can’t be used directly for PDF Viewer, so we convert it to base64(). I have given the output name as “pdfFileContent”.
   
   
   

7. Click OK on the previous action expression and save the power automate.

Use the PDF Viewer Control in Power Apps Form

1. Open your Power Apps form and select the “Insert” from the ribbon under “Media” and select “PDF Viewer”
   
   
   

2. At Screen level, go to “OnVisible” and call the Power Automate created in the previous step and store it to a collection. Here, I am calling power automate “GetFileAttachment” for List Item ID=1. You can change it to some other value as per your need. My collection name is “PDFData”.
   
   
   

3. Now come back to pdfviewer control and for “Document” property, get the first item from collection “PDFData” and the output of the Power Automate.
   
   
   

4. Test the app using preview, pdf file would be displayed on the screen.

That is it. I hope you have learned something new from this article and will utilize this in your work.