Skip to Content
Author's profile photo Former Member

SAPUI5 PDF Viewer (SmartForms) Custom Control

A while back Chandrashekhar Mahajan wrote a great blog on the ways to show PDF in a SAPUI5 application Display Smartform (PDF) in SAPUI5

I mentioned that we used the same approach for our own product FLM, which renders both PDF (SIFbA) and also HTML Based Forms.  And that I was looking to wrap this solution up in a stand alone control.

Well it taken me a little bit longer than a few weeks to find the time to do this, but I have now written the start of this control and the below shows the control set-up.

The Eclipse Project is on gitHub and can be located here https://github.com/MartinJCook/PDFViewerUI5

This means to display a PDF, all you need now are a few lines of code.

var objPDF = new PDFViewer(“myPDF”);

//Set the PDF Viewer Control with the content via a URL
objPDF.setPDFurl(“http://www.adobe.com/content/dam/Adobe/en/company/pdfs/fast-facts.pdf“);

The Custom Control allows PDF to be displayed both via a URL link or by a BASE64 embedded string.  NB That IE does not support BSE64 embedding.

The Below shows the properties of the control, where either the URL or the BASE64 string can be set, as well as the width and height of the PDF Viewer

“PDFurl” : “string”,

“PDFBase64” : “string”,

“width” : {type: “sap.ui.core.CSSSize”, defaultValue: “600px”},

“height” : {type: “sap.ui.core.CSSSize”, defaultValue: “700px”}       

Internally the control uses a HTML Control to define and render a iFrame window as shown by the below aggregations

_HTMLContainer: {type : “sap.ui.core.HTML”, multiple : false, visibility: “hidden”},

Then on initialization on the control we embed an iFrame into the HTML Container

var oControl = this;
var oHTML;

oHTML = new sap.ui.core.HTML({
});

//Now embed the iFrame
var iframeID = this.sId + “iFrame”;   
oHTML.setContent(“<iframe id='”+ iframeID + “‘ width=’100%’ height=’100%’></iframe>”);

this.setAggregation(“_HTMLContainer”, oHTML);

Then when either the URL or BASE64 code is set we locate the iFrame on the DOM and update the src using jQuery as shown below

With the BASE64 we set the src attribute in the following way  <iframe src=”data:application/pdf;base64,base64encodedpdf”></iframe>

//overwrite setter for the Set PDF URL
PDFViewer.prototype.setPDFurl = function (sVal) {
      //Now get the iFrame element inside the
      var iframeID = this.sId + “iFrame”;

      //Now update the value and also set the source in the iFrame element
      //With the URL to the PDF
      if (sVal) {
          this.setProperty(“PDFurl”, sVal, true);

 
          //Now set the iFrame src to the URL
          jQuery.sap.byId(iframeID).attr(‘src’, sVal)
    }
};

//overwrite setter for the Set PDF BASE64
PDFViewer.prototype.setPDFBase64 = function (sVal) {
      //Now get the iFrame element inside the
      var iframeID = this.sId + “iFrame”;

      //Now update the value and also set the source in the iFrame element
      //With the actual base64 PDF
      if (sVal) {
            this.setProperty(“PDFBase64”, sVal, true);

 
            //Now set the iFrame src to the BASE64 PDF data
            var srcURL = “data:application/pdf;base64,” + sVal;
            jQuery.sap.byId(iframeID).attr(‘src’, srcURL)

      }
};

This is just a working example and I sure it can be improved/tweaked, in fact it took longer to write this blog than to actually write the control 🙂

Please feel free to make suggestions/improvements and share.

Martin

Assigned tags

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

      Just sorting out the Eclipse Project on gitHub, and update with the link

      Author's profile photo Chandrashekhar Mahajan
      Chandrashekhar Mahajan

      Nice blog Martin! Yes I was going to ask same question about sharing code on gitHub.

      So basically from backend, we will be getting url pointing to PDF which will be rendered using your custom control code right?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Code is up there now, with example.  And yes, you just need to create the control and add that to your application.  This will deal with the HTML and iFrame creation.

      Then It should just be a one liner to actually show the PDF in your application like below.

      objPDF.setPDFurl("http://www.adobe.com/content/dam/Adobe/en/company/pdfs/fast-facts.pdf");

      Martin

      Author's profile photo Former Member
      Former Member

      hi Martin,

      I am trying to achieve a multi-platform solution for embedded pdf's in sapui5 apps. My requirement is mainly due to the fact that iframes are not known to work well in mobile browsers like those on ipads and iphones. Another requirement is that scrolling and pinch to zoom should work.

      Does your control allow scrolling through the pdf and pinch to zoom in ipads?

      Regards,

      Varun

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Varun,

      My control is just a wrapper based on a iFrame, so it will inherit all the same issues.

      For PDF on Mobile devices at this stage I do not see a solution that would cover all your points, but if you find a solution please let me know.

      Regards,

      Martin

      Author's profile photo Former Member
      Former Member

      Martin,

      I tried multiple options till date. <iframe> was ruled out the very first day. then i tried <object>, which worked satisfactorily with proper styling in some browsers but had issues with scrolling on IE. Then i found the tag <embed> worked better than <iframe> or <object>. However, in order to fit the biggest pdf (with many pages), you may need to set the height to an insanely high number. This made it render very slowly in ipads.

      Finally and currently i adopted the pdf.js framework to display pdf's With pdf.js, the scrolling works perfectly and you get additional functions to zoom in and out(as buttons), rotate page, jump to particular page, etc. This looked like the perfect solution but unfortunately it was not accepted by our end users who are ready to let go any other feature pdf.js provides for just 1 feature - Pinch to zoom.

      So, I am trying to work on a new solution which also allows pinch to zoom on touch devices with proper scrolling. I'll let you know if i strike gold.

      Regards,

      Varun

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks for the information, please let me know how you get on.

      Martin

      Author's profile photo Former Member
      Former Member

      Hi Martin,

      I reached to a final solution of continuing using the mozilla pdf.js. I added pinch to zoom capabilities by modifying pdf.js/ I used iscroll 5 js cubiq/iscroll · GitHub.

      It works perfectly.

      In my final solution, i handle multiple attachments. I do that with a carousel, with each page of the carousel showing an embedded pdf.

      I will try write a blog to show what i have done as soon as i find time after go-live of the apps.

      Regards,

      Varun

      Author's profile photo Gopal Yarlagadda
      Gopal Yarlagadda

      Hey Varun,

      Keen to know if you had a chance to write a blog outlining your solution?

      Regards,

      Gopal.

       

      Author's profile photo Holger Schäfer
      Holger Schäfer

      Hi Martin,

      we are using also a custom iframe component that does that job.

      On an iframe there is a nice property calles "allowfullscreen" to be able to allow videos and other plugins to open content inside fullscreen/kiosk mode.

      Sadly the iframe needs the acrobat reader plugin.

      We are currently focused on sa.m.* widgets and therefore using mozilla pdf lib.

      mozilla/pdf.js · GitHub

      It is a native PDF viewer/renderer using only plain HTML5 possibilities (no need fore the plugin). This approach also work son IOS and Android.

      Cheers Holger

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks, I will grab some time and look at the JS.  Sounds like a good option.

      Martin

      Author's profile photo Karthik A
      Karthik A

      Hi All,

      I tried your solutions...I can able to View my pdf in Desktop....when i create apk It is going to blank screen 🙁

      I am using SAP Netweaver Gateway service to show my pdf in mobile...Can you please give some idea to me ....

      Thanks,

      Karthik A

      Author's profile photo rajeesh o
      rajeesh o

      Happy news. New PDFViewer control is out with SAPUI5 1.48http://www.techippo.com/2017/09/pdfviewer-sapui5-control.html