Skip to Content
Author's profile photo Konstantin Anikeev

SAPUI5: PDF Scrolling on iPad

Hi all,

just wanted to share results of SAPUI5 digging evening.

Its all started by the reading of question on sdn PDF Viewer for SAPUI5 Application

The issue was, that embedded PDF-File is not able to be scrolled on ipad.

After first investigation it was clear, that scrolling of iview is a common issue on ios devices. So, the challenge was to find a workaround.

For test application I decided to use a SplitApp from sap.m library.

Here is a draft design of the application.

sapPDF.001.jpg

I decided not to use MVC just to reduce number of files for this example.

So the structure of the project just looks like following

/wp-content/uploads/2013/11/structure_332300.png

Actually only 2 files needed: index.html and pdf file to display.

Here is a source code of index html with explanation.

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <script src="resources/sap-ui-core.js"
  id="sap-ui-bootstrap"
  data-sap-ui-libs="sap.m"
  data-sap-ui-theme="sap_bluecrystal">
  </script>
  <script>
                              function setPDFHeight(){
                                        $("#pdfObject")[0].height = $("#pdfObject")[0].offsetHeight;
                              }
                              var oApp = new sap.m.SplitApp( "splitApp" ); // Split
                              var oMaster = new sap.m.List( "mList" );
                              oApp.addMasterPage(oMaster);
                              var oPage = new sap.m.Page({
                                        id : "mPage",
                                        showHeader : false,
                                        enableScrolling : false, // !!!! Important !!!!
                                        showFooter : false
                              });
                              var oHTML = new sap.ui.core.HTML("iFRM");
                              oHTML.setContent("<div align=\"center\" style=\"width: 100%; height:100%; overflow: auto !important; -webkit-overflow-scrolling: touch !important;\"><object id=\"pdfObject\" width=\"100%\" height=\"1000000000000\" align=\"center\" data=\"pdf/HANADevGuide.pdf\" type=\"application/pdf\" onload=\"setPDFHeight()\">You have no plugin installed</object></div>");
                              oPage.addContent(oHTML);
                              oApp.addDetailPage(oPage);
                              oApp.placeAt("content")
  </script>
 </head>
 <body class="sapUiBody" role="application">
  <div id="content"></div>
 </body>
</html>

What I got from googling is that scrollable content must be wrapped into div with following style properties (I defined these properties as !important):

overflow: auto;

-webkit-overflow-scrolling: touch;

Another fix is to define a detail page as non scrollable (enableScrolling : false)

Third fix was to use not an iframe (I could not get it functional) but the object. So it was necessary to auto-resize height of the object (object height must be taken from PDF-height).

for that purpose I have used a function setPDFHeight(), which was assigned to onload event of the object.

And the last but not least fix was an initial height of PDF-Object. To get the correct value of offsetHeight attribute the initial height must be more, than height of PDF document. I just set it to  1000000000000.

As a result I got scrollable PDF document on iPad.

iPad2:

/wp-content/uploads/2013/11/ipad2_332304.png

iPadAir:

/wp-content/uploads/2013/11/ipadair_332305.png

P.S.:  English language is not my native language, and any person is not insured from mistakes and typing errors. If you have found an error in the text, please let me know.

P.P.S.: If you have some ideas, how to correct/improve the code – please don’t hesitate to leave a comment.

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Thanks for the blog. PDF is even more of a hassle on Android. I've used iScroll as a workaround for scrolling and for showing pdf's on Android we have used pdf.js

      BR

      Njål

      Author's profile photo Konstantin Anikeev
      Konstantin Anikeev
      Blog Post Author

      Hi Njål, thanks for reply. Hope SAP will include PDF scrolling as a part of standard library in the future releases.

      Author's profile photo Former Member
      Former Member

      Just use Neptune 😉 (Yeah I work for the company)

      Author's profile photo Former Member
      Former Member

      Cool stuff.

      Author's profile photo Konstantin Anikeev
      Konstantin Anikeev
      Blog Post Author

      Thanks

      Author's profile photo Former Member
      Former Member

      test this solution on your android/iPad/WP 🙂

      http://ides.neptune-software.com:8000/neptune/pdfview.html

      Author's profile photo Konstantin Anikeev
      Konstantin Anikeev
      Blog Post Author

      Checked, looks great.

      Is it possible to show a continious pdf?

      Author's profile photo Former Member
      Former Member

      I'll test it with a continuous pdf (think there should be no issues) Implemented it today so will improve the solution. Major advantage is that you do not need a PDF viewer as all is handled by HTML5 and js.

      Author's profile photo Former Member
      Former Member

      Here is a link to a cont. pdf with this solution

      Author's profile photo Konstantin Anikeev
      Konstantin Anikeev
      Blog Post Author

      yeah! Works great!