The Request: Use Power Apps to View PDFs<\/h2>\n
Our client wanted a Power App to allow users the ability to quickly locate a training PDF file according to the questions answered within the app.<\/strong> The criteria:<\/p>\n To meet expectations, I had to create a custom Flow alongside the Power App<\/a>. Currently, at the time of writing this blog, the PDF viewer control<\/a> within Power Apps is still in the \u201cexperimental\u201d stage. This means that PDFs stored within a SharePoint document library are not viewable within the Power App PDF viewer control.<\/p>\n So I built the Power App using a SharePoint document library<\/a>, one custom Flow and six screens. Later in this article, I\u2019ll describe in greater detail the Flow design and the design of the main screen. Let\u2019s first look at the SharePoint document library.<\/strong><\/p>\n I customized the SharePoint document library by adding three columns.<\/p>\n Here is the result for the documents within the SharePoint library:<\/strong><\/p>\n View of Documents in the new SharePoint Library.<\/p><\/div>\n Before diving into how to use Power Apps itself, we\u2019ll need to create a workflow from scratch since there isn\u2019t a template that will work for this project. I used Microsoft Power Automate<\/a> (formerly known as Flow).<\/p>\n Before I go any further I need to point out that the key piece of information we will be using from the PDF is the \u201cIdentifier.\u201d This is being pulled into the Power App through the SharePoint-connected database.<\/strong><\/p>\n Now, onto building the workflow.<\/p>\n Create a new Flow and search for the action called Request<\/strong>.<\/p>\n We are starting with a trigger when an HTTP request is received. This means that every time Power Apps tries to load a PDF, it sends a request to a URL that is this Flow. Now we will be using the \u201cGET\u201d method to retrieve the identifier of the currently selected PDF in the gallery control.<\/p>\n Also, the HTTP POST URL<\/strong> field is blank until we are finished building the Flow and save it. Then this field will be populated, and we can copy the URL to use within the Power App.<\/p>\n Select \u201cURL will be generated after save\u201d to use the GET method in Power Automate.<\/p><\/div>\n The next step is to capture the item Identifier<\/strong> from the request. We will be passing the Identifier<\/strong> from the file to the request.<\/p>\n To pull this off, we need to use a variable. Search for a variable and select Variables \u2013 Initialize variable<\/strong>. Name it something descriptive like pdfID<\/strong>, or whatever makes the most sense to you.<\/p>\n The type will be a String<\/strong>.<\/p>\n The Value<\/strong> is where we are going to dictate the part of the HTTP request we want to grab the Identifier<\/strong> information from.<\/p>\n To do this, we must write an Expression<\/strong>. This expression will use specific criteria to search the HTTP request for the information that we need. Without getting too technical on you, here is the expression that will be saved within the value field: Get PDF ID in Power Automate.<\/p><\/div>\n In other words, we are going to pass into the body of the URL an item ID.<\/strong> The variable will extract it from all the material that came in with the request.<\/p>\n Now we can create a SharePoint action, specifically SharePoint \u2013 Get file content<\/strong>. Set the Site Address <\/strong>field to the site where you store your PDF files.<\/p>\n The next field, File Identifier<\/strong>, asks for the information that we stored within the variable from the previous step. Add the variable to the File Identifier<\/strong> field.<\/p>\n Get file content in Power Automate.<\/p><\/div>\n In the final step, we are now going to send this file back to Power Apps. Add another Request<\/strong> action, but this time, it is a Request \u2013 Response<\/strong>.<\/p>\n In the Body<\/strong> field, we want to add the output of the get file content from the previous step.<\/p>\n If you want your users to have the ability to open the PDF within a browser window, then we need to configure the Headers<\/strong> fields.<\/p>\n Sending the file back to Power Apps in Power Automate.<\/p><\/div>\n Go ahead and save the Flow in Power Automate, making sure to give it a descriptive name.<\/p>\n Scroll up to the first step, and you\u2019ll see that the URL field has been populated.<\/strong> Click on the copy icon to the right so that we can paste this URL into the Power App.<\/p>\n Getting the URL in Power Automate to add to the Power App.<\/p><\/div>\n In the Power App, click on the PDF viewer control and select the document property. Paste the URL from the Flow here.<\/strong><\/p>\n Now we need to tell the control which PDF has been selected from the gallery control.<\/p>\n At the end of the URL, you will need to add To connect this to the gallery, add If everything is working properly, you should see the selected PDF from the gallery in the PDF viewer.<\/p>\n Now that you\u2019ve created the workflow, you can customize the Power Apps screens.<\/p>\n 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\u2019s connected to the \u201cOffice365Users\u201d database. This allows the app to pull in the user\u2019s account picture and name.<\/strong><\/p>\n View of the new home screen in Power Apps.<\/p><\/div>\n This screen is minimal, containing a couple of text controls and one button to explain the functionality of the app to the user.<\/p>\n Image of Screen Two in Power Apps.<\/p><\/div>\n Screen three is a simple design consisting of one text control and three buttons.<\/p>\n However, it presents the user with three quite different paths to take.<\/strong> Each path ends with a distinctly different group of PDF files.<\/p>\n Options presented on Screen 3 in Power Apps.<\/p><\/div>\n This is where the magic happens. It\u2019s also where the Flow we created above comes in. There are two controls on this page: gallery and PDF viewer. The gallery control\u2019s \u201cItems\u201d property is configured to filter on the SharePoint column \u201cInitial Choice.\u201d You must adjust the filter if you create copies of this page, as I did for Screens 5 and 6.<\/strong><\/p>\n Below is what the default page looks like when a user navigates to it.<\/p>\n The Default page on screen four.<\/p><\/div>\n 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 each PDF and read through it.<\/p>\n 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\u2019t see a PDF selected to view, and the PDF viewer will remain hidden.<\/strong><\/p>\n 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.<\/p>\n Viewing a PDF in Power Apps<\/p><\/div>\n The PDF viewer control toolbar is now 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 more easily, plus provide native support to print the file.<\/strong><\/p>\n Now that you know how to use Power Apps to view a PDF document, you can learn more advanced steps related to the design of the application.<\/p>\n After seeing the current functionality of the Power App, the client had a few requests:<\/p>\n Here\u2019s how we responded to those requests:<\/strong><\/p>\n To solve the last request, I 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.<\/p>\n 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 \u201cdefault\u201d experience when they navigate to the Screen, I had to create three variables. These are: PDFStateChangeCount<\/strong>, SelectedPDF <\/strong>and DefaultSel<\/strong>.<\/p>\n The PDFStateChangeCount<\/strong> 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 <\/strong>property, and the gallery image appears as \u201cOnSelect.\u201d<\/p>\n Using Power Apps\u2019 PDFStateChangeCount variable to determine when to show the .gif.<\/p><\/div>\n To the PDF Viewer OnStateChange<\/strong> property, I added one count each time there are changes.<\/p>\n Using the OnStateChange property in Power Apps.<\/p><\/div>\n On the Visible<\/strong> property of the loading image, I have this conditional statement: When the number is less than two, then the loading .gif is hidden. When the number equals two or is greater and passes the \u201cIsBlank\u201d condition, then the loading .gif is visible.<\/p>\n 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.<\/p>\n 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<\/strong> condition.<\/p>\n The SelectedPDF<\/strong> variable and the DefaultSel<\/strong> variable are records used to show the blue and grey-colored images. The SelectedPDF<\/strong> is a global variable and DefaultSel<\/strong> is a local variable.<\/p>\n 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.<\/p>\n A portion of the data the SelectedPDF variable and the DefaultSel variable collect.<\/p><\/div>\n When the screen becomes visible, I am clearing out the SelectedPDF<\/strong> variable and updating the DefaultSel <\/strong>variable information.<\/p>\n The DefaultSel<\/strong> variable data is populated from the default property of the gallery control.<\/p>\n How the DefaultSel variable is populated.<\/p><\/div>\n The OnSelect<\/strong> property for the image, within the gallery control, is where I am collecting the data for the selected document.<\/p>\n Below you can see that I have added a conditional statement to the image property.<\/p>\n\n
The Power Apps Solution We Came Up With<\/h2>\n
Readying a SharePoint Document Library<\/h2>\n
\n
\n
\n
![\"View](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-1.png\")
<\/a>Creating the Workflow to Tie Into Power Apps<\/h2>\n
Creating a Flow Step 1<\/h3>\n
![\"Select](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-Part-2-1.png\")
<\/a>Creating a Flow Step 2<\/h3>\n
trigger()[\u2018outputs\u2019][\u2018queries\u2019][\u2018itemid\u2019]<\/code>.<\/strong><\/p>\n![\"Get](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-Part-2-2.png\")
<\/a>Creating a Flow Step 3<\/h3>\n
![\"Get](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-Part-2-3.png\")
<\/a>Creating a Flow Step 4<\/h3>\n
![\"Sending](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-Part-2-4.png\")
<\/a>![\"Getting](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-Part-2-5.png\")
<\/a>Integrating the Flow into Power Apps<\/h2>\n
&itemid=<\/strong><\/code> This is the same parameter that we used within the expression of the variable from the Flow.<\/p>\n& Gallery1.Selected.\u2019{Identifier}\u2019<\/strong><\/code>. The name of your gallery control will need to replace Gallery1.<\/strong><\/p>\n![\"PDF](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-Part-2-6-1024x316.png\")
<\/a><\/p>\nCustomizing Power Apps Screens<\/h2>\n
Power Apps Home Screen<\/h3>\n
![\"View](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-2-1024x538.png\")
<\/a>Power Apps Screen 2<\/h3>\n
![\"Image](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-3.png\")
<\/a>Power Apps Screen 3<\/h3>\n
![\"Options](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-4.png\")
<\/a>Power Apps Screen 4<\/h3>\n
![\"The](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-5.png\")
<\/a>![\"Viewing](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-6.png\")
<\/a>Improving the Power App\u2019s User Experience<\/h2>\n
\n
How to Use Power App\u2019s PDF Viewer Variables<\/h3>\n
The Loading Image<\/h4>\n
![\"Using](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-Part-3-1.png\")
<\/a>![\"Using](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-Part-3-2.png\")
<\/a>If(PDFStateChangeCount>=2 || IsBlank(Gallery1.Selected.ID),false,true)<\/code>.<\/strong><\/p>\nConfiguring Default and Active Images<\/h4>\n
![\"A](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-Part-3-3-1024x151.png\")
<\/a>![\"How](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-Part-3-4-1024x108.png\")
<\/a>
![\"The](\"https:\/\/centricconsulting.com\/wp-content\/uploads\/2018\/11\/PowerApps-PDF-Series-Part-3-5-1024x61.png\")
<\/a>