Follow our step-by-step approach on how to use PowerApps to make it easy to view PDFs. Here’s step one of a custom solution we created.
I had a client approach me with a need to organize and present some PDF training materials to their employees in a format that is easily viewed from a tablet or mobile device.
It needed to be a lightweight app using the client’s current software tools, primarily Microsoft Office 365. This took a little bit of research and a customized Flow, but the end result was exactly what the client wanted.
I want to thank Microsoft PowerUser Paul Culmsee for sharing his solution, which I adapted for my project. Now, let’s dive into the details.
The Request: Use PowerApps to View PDFs
Our client wanted a PowerApp to allow their users the ability to quickly locate a training PDF file, according to the questions answered within the app. The criteria:
- Files had to be in PDF format
- Files had to be stored in SharePoint
- Users had to be able to easily and quickly navigate to their desired file
- And it had to be a mobile-friendly application
The PowerApps Solution We Came Up With
To meet the client’s expectations, I had to create a custom Flow alongside the PowerApp.
Currently, at this time of writing this blog, the PDF viewer control within PowerApps is still in the “experimental” stage. This means that PDFs stored within a SharePoint document library are not viewable within the PowerApp PDF viewer control.
So I built the PowerApp using a SharePoint document library, one custom Flow and six screens. In future blogs, I describe in greater detail the Flow design and the design of the main screen. Let’s first look at the SharePoint document library.
SharePoint Document Library
I customized the SharePoint document library by adding three columns.
- The client had organized the documents into three main training topics. I used a choice column, which I labeled “Initial Choice” for the topics.
- Then, I created two identical hyperlink columns and set them to format the URL as an image:
- One column I labeled “DefaulticonURL” and the other one I labeled “SelectediconURL”.
- For each PDF file, I created two images and uploaded them to an Asset document library. One image is grey, and the other image is blue.
- I copied the URL from each image and pasted it into the hyperlink columns. So, the grey image’s URL went into the “DefaulticonURL” and the blue image’s URL went into the “SelectediconURL”.
Here is the end result for the documents within the SharePoint library:
PowerApps Screens
Below is an overview of how I customized the PowerApps screens:
Home Screen
The Home Screen is very basic. To give it some personality, I added an image control and a label in the top left corner that’s connected to the “Office365Users” database. This allows the app to pull in the user’s account picture and name.
Screen 2
This screen is minimal, containing a couple of Text Controls and one Button to explain the functionality of the app to the user.
Screen 3
Screen 3 is a simple design consisting of one Text Control and three Buttons. However, it presents the user with three very different paths to take. Each path ends with a distinctly different group of PDF files.
Screen 4
This is where the magic happens! There are two controls on this page: Gallery and PDF viewer. The Gallery control’s “Items” property is configured to filter on the SharePoint column “Initial Choice”. You must adjust the filter if you create copies of this page, as I did for Screens 5 and 6.
Below is what the default page looks like when a user navigates to it.
The images on the left, in the Gallery control, are intended to present the user with either a question or a training topic. This is meant to convey the content of the PDF to the user so that they do not have to open up each PDF and read through it.
I chose a light grey color to depict the files that are not active. The PDF viewer control appears “inactive” as well. Whenever a user navigates to this page, they won’t see a PDF selected to view, and the PDF viewer will remain hidden.
After selecting an image from the Gallery control, the image will turn blue, showing that it is “active.” The image selection will trigger the Flow and return the desired PDF.
Now the PDF viewer control toolbar is visible. Here you can zoom in and out, navigate to other pages, and open the file in a new browser tab. Opening a new browser tab will allow the user to read the file easier, plus provide native support to print the file.
Final Thoughts
This sleekly designed PowerApp brings together Office 365 products to create a solution for companies who would like to present their PDF documents to employees in a unique, mobile-friendly format.
What PDF files does your company use? Perhaps it’s records, contracts, training material?
Read the next step, which covers the design of Screen 4 and the Flow.
