Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Active Contributor

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.

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

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

Here is a source code of index html with explanation.

  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <script src="resources/sap-ui-core.js"
                              function setPDFHeight(){
                                        $("#pdfObject")[0].height = $("#pdfObject")[0].offsetHeight;
                              var oApp = new sap.m.SplitApp( "splitApp" ); // Split
                              var oMaster = new sap.m.List( "mList" );
                              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>");
<body class="sapUiBody" role="application">
  <div id="content"></div>

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.



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.

Labels in this area