cancel
Showing results for 
Search instead for 
Did you mean: 
hpkeong

PDF Viewer for a better control and files selection

One of the key features of PowerApps is the capability in viewing PDF file, either in

- Web (URL)

- One Drive or Google Drive

 

However, due to the default design of PDF Viewer, we can improve further on:

  1. Create a Button.OnSelect to resume to original FitBoth Zoom or Zoom to the size we wish
  2. Using Slider to replace the mini “+” & “-“ button to Zoom In / Zoom Out for a better user experience.

In this example, I am using PDF resides in Website and LookUp to the related PDF File listed in Excel file (and added as Static Datasource).

 

Screenshot (180)_LI.jpg

 

 

Waffle Menu + Gallery

 

A Waffle Menu & a Gallery are inserted to display the “First Character” of all the chemicals for quick selection, and appended into Dropdown.

 

Waffle Menu, OnSelect to show Gallery MenuWaffle Menu, OnSelect to show Gallery Menu

    1.  Waffle menu, OnSelect = UpdateContext({msdscode: !msdscode})

         This is to make the Gallery Visible. [Gallery1.Visible = msdscode]

 

  1. Items = Distinct(MSDS_Table, Left(Chemical_Name, 1))

Gallery1.Layout = Vertical

Gallery1.WrapCount = 6 (or others to fit the screen with better view)

Gallery1.Label.OnSelect = UpdateContext({msdscode: false}) …. To hide the Gallery after OnSelect

 

Dropdown

 

MSDS Code Listing.PNG

 

A Dropdown is inserted with

  1. Items =

          Distinct(Filter(MSDS_Table, Left(Chemical_Name, 1) in Gallery5.Selected.Result), Chemical_Name)

          Where:

          - MSDS_Table is the datasource added in as static data from Excel, with Two Columns

                 Column_1 : Chemical_Name

                 Column 2: MSDS_Code

 

PDF Viewer

 

PDF showned on Dropdown selectionPDF showned on Dropdown selectionDropdown is selectedDropdown is selected

PDFViewer.Document =

"http://www.sciencelab.com/msds.php?msdsId="&LookUp(MSDS_Table, Chemical_Name = Dropdown1.Selected.Result).MSDS_Code

 

http://www.sciencelab.com/msds.php?msdsId = is the original Website Link for all the MSDS, for example: http://www.sciencelab.com/msds.php?msdsId=9922768

 

LookUp(MSDS_Table, Chemical_Name = Dropdown1.Selected.Result).MSDS_Code

Is retrieving the MSDS_Code from the Datasource based on the selected Chemical Name.

 

[The data contains about 1,400 MSDS, and it is easily retrieved from browser using F12,copy the html codes into Excel, and Excel can automatically filter the numerical codes within seconds]

 

Lastly, as the default Top Bar is so small for Mobile Screen, and especially those with BIG FINGERS, further improvement will be necessary. 

 

Create FULL SCREEN button & Slider to Zoom In / Zoom Out

 

Following are the formula used:

 

PDFViewer.Zoom = Slider1.Value

 

Slider1.Min = 70 (I found my pdf file best fit at 70)

Slider1.Max = 300 (or as you wish)

Slider1.Default = zoomactual (this is a Context Variable; any name will do!)

 

Full Screen Button.OnSelect = UpdateContext({zoomactual: 69}); UpdateContext({zoomactual: FitBoth})

 

Screen.OnHidden = UpdateContext({zoomactual: 69})

Secreen.OnVisible = UpdateContext({zoomactual: 70})

Note: UpdateContext are always in PAIR, with second UpdateContext set to get the final results.

 

Final Thought:

 

I wish PowerApps group can include Pin to Zoom In / Out but I guess at the moment is not supported, so Slider maybe an alternative for a quick action.

 

The datasource for PDF files can be from

- One Drive or

- Google Drive

using ShreLink as generated in the Web.

 

Hope you enjoy my sharing.

 

Comments