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:
- Create a Button.OnSelect to resume to original FitBoth Zoom or Zoom to the size we wish
- 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).
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 Menu
1. Waffle menu, OnSelect = UpdateContext({msdscode: !msdscode})
This is to make the Gallery Visible. [Gallery1.Visible = msdscode]
- 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
A Dropdown is inserted with
- 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 selection
Dropdown 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
-
-
PDF Viewer for a better control and files selection
Hi
Sorry for late reply. In fact, I have PDF file with 200kb and up to 1mb.
It all depends on internet speed and normally when I use, even with Mobile phone, it took about < 5 seconds to load.
TQ
-
PDF Viewer for a better control and files selection
What's the recommended file size for PDF documents so that they can be seen in the app. I'm testing a PDF that is 137kb, and I'm still getting the alert to open the PDF in the browser.
*This post is locked for comments