Here’s the last in a series on how to use PowerApps to view PDFs. Find my previous two posts here: Step 1 and Step 2.
Below are some features that I added to the app in order to give it a more professional feel.
The client wanted the user to see Screen 4 without selected files within the Gallery. The team also wanted the PDF viewer to be hidden whenever one visits the screen.
Also, there are times when the Flow can take a couple of seconds to work and pull back the PDF file into the viewer control. The client wanted a way to let the user see that the app was working behind the scenes, so the user understood to wait for the app to load the PDF.
To solve this last request, I have used a .gif image of a loading icon that rotates in a circle. Everyone should recognize that a program is loading when they see this icon!
PowerApp PDF Viewer Variables
To have the loading .gif image appear when the Flow is running, and have the grey and blue images within the Gallery control change when the user clicks on it to simulate a “default” experience when they navigate to the Screen, I had to create three Variables. These are: PDFStateChangeCount, SelectedPDF and DefaultSel.
The Loading Image
The PDFStateChangeCount Variable is used to determine when to show the Loading .gif image. The Variable holds a number. I set it to zero on the Screen “OnVisible” property, and the Gallery image appears as “OnSelect”.
To the PDF Viewer OnStateChange property, I added one count each time there are changes.
On the Visible property of the Loading image, I have this conditional statement: If(PDFStateChangeCount>=2 || IsBlank(Gallery1.Selected.ID),false,true).
When the number is less than two, then the Loading .gif is hidden. When the number equals two or is greater and passes the IsBlank condition, then the Loading .gif is visible.
When the Screen loads, the Variable has a count of one. When a selection is made within the Gallery, then the count increases by one, for a total of two.
At this time, the loading .gif is visible while the Flow is running. Once the Flow pulls back the PDF file into the viewer control, the loading .gif is hidden again, because it no longer passes the IsBlank condition.
Configuring Default and Active Images
The SelectedPDF Variable and the DefaultSel Variable are records used to show the blue and grey colored images. The SelectedPDF is a Global Variable and DefaultSel is a local Variable.
Here is a portion of the data that the records collect. You can see that the two image SharePoint columns are pulled into the record.
When the Screen becomes visible, I am clearing out the SelectedPDF Variable and updating the DefaultSel Variable information.
The DefaultSel Variable data is populated from the default property of the Gallery control.
The OnSelect property for the Image, within the Gallery control, is where I am collecting the data for the selected document.
Below you can see that I have added a conditional statement to the Image property.
This statement is comparing the Identifier, within the SelectedPDF Variable to the Identifier that is being selected by the user.
If these are the same, then it will show the blue image from the SelectediconURL SharePoint column, otherwise it will show the DefaulticonURL SharePoint column, which is the grey colored image.
And that is how we can create a default experience for the Gallery control when a user visits the Screen and change the image when one is selected.
Finishing Touches
Let’s wrap this build up by applying some “polish” to the PDF viewer control. Now is where we will finish creating the default experience for the user.
Hiding the PDF viewer was accomplished by:
- Prefacing the Flow URL with If(IsBlank(Gallery1.Selected.ID), “”, which is located on the PDF viewer document property
- Adding “If(IsBlank(Gallery1.Selected.ID),false,true)” to the Visible property of the PDF viewer control
When the user navigates to Screen 4 the Gallery should not have anything selected and the PDF viewer is hidden. Once you have this screen setup and working properly you can use it as a template to easily create more screens like this one. Just remember to update the filter that is used on the Gallery control’s Items property.
Thank you for following along with me as I laid out how to build this PowerApp. There are many different use case scenarios that this PowerApp could be adapted to solve. I hope that you have been inspired to create your own!
