Follow our step-by-step attack connected really to usage Power Apps to make it easy to position PDFs.
I had a customer attack maine pinch a request to shape and coming immoderate PDF training materials to their labor in a format that is easy viewed from a tablet aliases mobile device.
They needed a lightweight app utilizing Microsoft 365. This took a small spot of investigation and a customized Flow, but The consequence was precisely what The customer wanted.
I want to convey Microsoft PowerUser Paul Culmsee for sharing his solution, which I adapted for my project. Now, let’s dive into The details.
The Request: Use Power Apps to View PDFs
Our customer wanted a Power App to let users The expertise to quickly find a training PDF record according to The questions answered wrong The app. The criteria:
- Files had to beryllium in PDF format.
- Files had to beryllium stored in SharePoint.
- Users had to beryllium capable to navigate to their desired files quickly and easily.
- The exertion had to beryllium mobile-friendly.
The Power Apps Solution We Came Up With
To meet expectations, I had to create a civilization Flow alongside The Power App. Currently, astatine The clip of penning this blog, The PDF spectator control wrong Power Apps is still in The “experimental” stage. This intends that PDFs stored wrong a SharePoint archive room are not viewable wrong The Power App PDF spectator control.
So I built The Power App utilizing a SharePoint archive library, 1 civilization Flow and six screens. Later in this article, I’ll picture in greater item The Flow creation and The creation of The main screen. Let’s first look astatine The SharePoint archive library.
Readying a SharePoint Document Library
I customized The SharePoint archive room by adding 3 columns.
- The customer had organized The documents into 3 main training topics. I utilized a prime column, which I branded “Initial Choice” for The topics.
- Then, I created 2 identical hyperlink columns and group them to format The URL arsenic an image:
-
- One file I branded “DefaulticonURL” and The different 1 I branded “SelectediconURL.”
- For each PDF file, I created 2 images and uploaded them to an Asset archive library. One image is grey, and The different 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 bluish image’s URL went into The “SelectediconURL.”
Here is The consequence for The documents wrong The SharePoint library:
Creating The Workflow to Tie Into Power Apps
Before diving into really to usage Power Apps itself, we’ll request to create a workflow from scratch since location isn’t a template that will activity for this project. I utilized Microsoft Power Automate (formerly known arsenic Flow).
Before I spell immoderate further I request to constituent retired that The cardinal portion of accusation we will beryllium utilizing from The PDF is The “Identifier.” This is being pulled into The Power App done The SharePoint-connected database.
Now, onto building The workflow.
Creating a Flow Step 1
Create a caller Flow and hunt for The action called Request.
We are starting pinch a trigger erstwhile an HTTP petition is received. This intends that each clip Power Apps tries to load a PDF, it sends a petition to a URL that is this Flow. Now we will beryllium utilizing The “GET” method to retrieve The identifier of The presently selected PDF in The assemblage control.
Also, The HTTP POST URL section is blank until we are vanished building The Flow and prevention it. Then this section will beryllium populated, and we Can transcript The URL to usage wrong The Power App.
Creating a Flow Step 2
The adjacent measurement is to seizure The point Identifier from The request. We will beryllium passing The Identifier from The record to The request.
To propulsion this off, we request to usage a variable. Search for a adaptable and prime Variables – Initialize variable. Name it thing descriptive for illustration pdfID, aliases immoderate makes The astir consciousness to you.
The type will beryllium a String.
The Value is wherever we are going to dictate The portion of The HTTP petition we want to drawback The Identifier accusation from.
To do this, we must constitute an Expression. This look will usage circumstantial criteria to hunt The HTTP petition for The accusation that we need. Without getting excessively method connected you, present is The look that will beryllium saved wrong The worth field: trigger()[‘outputs’][‘queries’][‘itemid’].
In different words, we are going to walk into The assemblage of The URL an point ID. The adaptable will extract it from each The worldly that came in pinch The request.
Creating a Flow Step 3
Now we Can create a SharePoint action, specifically SharePoint – Get record content. Set The Site Address field to The tract wherever you shop your PDF files.
The adjacent field, File Identifier, asks for The accusation that we stored wrong The adaptable from The erstwhile step. Add The adaptable to The File Identifier field.
Creating a Flow Step 4
In The last step, we are now going to nonstop this record backmost to Power Apps. Add different Request action, but this time, it is simply a Request – Response.
In The Body field, we want to adhd The output of The get record contented from The erstwhile step.
If you want your users to person The expertise to unfastened The PDF wrong a browser window, past we request to configure The Headers fields.
Go up and prevention The Flow in Power Automate, making judge to springiness it a descriptive name.
Scroll up to The first step, and you’ll spot that The URL section has been populated. Click connected The transcript icon to The correct truthful that we Can paste this URL into The Power App.
Integrating The Flow into Power Apps
In The Power App, click connected The PDF spectator power and prime The archive property. Paste The URL from The Flow here.
Now we request to show The power which PDF has been selected from The assemblage control.
At The extremity of The URL, you will request to adhd &itemid= This is The aforesaid parameter that we utilized wrong The look of The adaptable from The Flow.
To link this to The gallery, adhd & Gallery1.Selected.’{Identifier}’. The sanction of your assemblage power will request to switch Gallery1.
If everything is moving properly, you should spot The selected PDF from The assemblage in The PDF viewer.
Customizing Power Apps Screens
Now that you’ve created The workflow, you Can customize The Power Apps screens.
Power Apps Home Screen
The location surface is very basic. To springiness it immoderate personality, I added an image power and a explanation in The apical near area that’s connected to The “Office365Users” database. This allows The app to propulsion in The user’s relationship image and name.
Power Apps Screen 2
This surface is minimal, containing a mates of matter controls and 1 fastener to explicate The functionality of The app to The user.
Power Apps Screen 3
Screen 3 is simply a elemental creation consisting of 1 matter power and 3 buttons.
However, it presents The personification pinch 3 rather different paths to take. Each way ends pinch a distinctly different group of PDF files.
Power Apps Screen 4
This is wherever The magic happens. It’s besides wherever The Flow we created supra comes in. There are 2 controls connected this page: assemblage and PDF viewer. The assemblage control’s “Items” spot is configured to select connected The SharePoint file “Initial Choice.” You must set The select if you create copies of this page, arsenic I did for Screens 5 and 6.
Below is what The default page looks for illustration erstwhile a personification navigates to it.
The images connected The left, in The assemblage control, are intended to coming The personification pinch either a mobility aliases a training topic. This is meant to convey The contented of The PDF to The personification truthful that they do not person to unfastened each PDF and publication done it.
I chose a ray grey colour to picture The files that are not active. The PDF spectator power appears inactive arsenic well. Whenever a personification navigates to this page, they won’t spot a PDF selected to view, and The PDF spectator will stay hidden.
After selecting an image from The assemblage control, The image will move blue, showing that it is active. The image action will trigger The Flow and return The desired PDF.
The PDF spectator power toolbar is now visible. Here you Can zoom in and out, navigate to different pages, and unfastened The record in a caller browser tab. Opening a caller browser tab will let The personification to publication The record much easily, positive supply autochthonal support to people The file.
Now that you cognize really to usage Power Apps to position a PDF document, you Can study much precocious steps related to The creation of The application.
Improving The Power App’s User Experience
After seeing The existent functionality of The Power App, The customer had a fewer requests:
- Can The personification spot Screen 4 without selecting files wrong The gallery?
- Is it imaginable to hide The PDF spectator whenever personification visits The screen?
- How do we fto The personification spot that The app was moving down The scenes truthful The personification understands to hold for The app to load The PDF? There are times erstwhile The Flow Can return a mates of seconds to activity and propulsion backmost The PDF record into The spectator control.
Here’s really we responded to those requests:
How to Use Power App’s PDF Viewer Variables
To lick The past request, I utilized a .gif image of a loading icon that rotates in a circle. Everyone should admit that a programme is loading erstwhile they spot this icon.
To person The loading .gif image look erstwhile The Flow is moving and person The grey and bluish images wrong The assemblage power alteration erstwhile The personification clicks connected it to simulate a “default” acquisition erstwhile they navigate to The Screen, I had to create 3 variables. These are: PDFStateChangeCount, SelectedPDF and DefaultSel.
The Loading Image
The PDFStateChangeCount adaptable is utilized to find erstwhile to show The loading .gif image. The adaptable holds a number. I group it to zero connected The surface OnVisible property, and The assemblage image appears arsenic “OnSelect.”
To The PDF Viewer OnStateChange property, I added 1 count each clip location are changes.
On The Visible spot of The loading image, I person this conditional statement: If(PDFStateChangeCount>=2 || IsBlank(Gallery1.Selected.ID),false,true).
When The number is little than two, past The loading .gif is hidden. When The number equals 2 aliases is greater and passes The “IsBlank” condition, past The loading .gif is visible.
When The surface loads, The adaptable has a count of one. When a action is made wrong The gallery, past The count increases by one, for a full of two.
At this time, The loading .gif is visible while The Flow is running. Once The Flow pulls backmost The PDF record into The spectator control, The loading .gif is hidden again, because it nary longer passes The IsBlank condition.
Configuring Default and Active Images
The SelectedPDF adaptable and The DefaultSel adaptable are records utilized to show The bluish and grey-colored images. The SelectedPDF is simply a world adaptable and DefaultSel is simply a section variable.
Here is simply a information of The information that The records collect. You Can spot that The 2 image SharePoint columns are pulled into The record.
When The surface becomes visible, I americium clearing retired The SelectedPDF adaptable and updating The DefaultSel variable information.
The DefaultSel adaptable information is populated from The default spot of The assemblage control.
The OnSelect spot for The image, wrong The assemblage control, is wherever I americium collecting The information for The selected document.
Below you Can spot that I person added a conditional connection to The image property.
This connection compares The Identifier, wrong The SelectedPDF adaptable to The identifier The personification selects.
If these are The same, past it will show The bluish image from The SelectediconURL SharePoint column. Otherwise, it will show The DefaulticonURL SharePoint column, which is The grey-colored image.
That is really we Can create a default acquisition for The assemblage power erstwhile a personification visits The surface and really to usage Power Apps to alteration The image erstwhile 1 is selected.
Finishing Touches
Let’s wrap this up by applying immoderate polish to The PDF spectator control. We will decorativeness creating The default acquisition for The user.
Hiding The PDF spectator was accomplished by:
- Prefacing The Flow URL pinch If(IsBlank(Gallery1.Selected.ID), “”, which is located connected The PDF spectator archive property.
- Adding “If(IsBlank(Gallery1.Selected.ID),false,true)” to The visible spot of The PDF spectator control.
When The personification navigates to Screen 4, The assemblage should not person thing selected, and The PDF spectator will beryllium hidden. Once you person this surface group up and moving properly, you Can usage it arsenic a template to easy create much screens for illustration this one. Remember to update The select that is utilized connected The assemblage control’s items property.
Final Thoughts
This sleekly designed Power App brings together Microsoft 365 products to create a solution for companies who would for illustration to coming their PDF documents to labor in a unique, mobile-friendly format. Now, you Can customize The app to make The acquisition much professional.
Thank you for pursuing on pinch maine arsenic I laid retired really to build this Power App. There are galore different usage lawsuit scenarios that this Power App could beryllium adapted to solve. I dream that you person been inspired to create your own.
In our webinar, we stock really Power Platform Can thief your full business lick problems.