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!
cancel
Showing results for 
Search instead for 
Did you mean: 
WouterLemaire
Active Contributor

Introduction


I’ve been working with UI5 over several years on multiple projects. During these projects, the system was not always on the latest UI5 version. We started with the version 1.28.xx, upgraded a year ago to 1.38. xx and just a few months ago to 1.52.xx . Over the years, we had requirements to upload and show PDF files in UI5 apps. Uploading the PDF files was not a problem, but displaying them was. UI5 has a PDF viewer but became part of the SDK since 1.48, https://ui5.sap.com/#/api/sap.m.PDFViewer .  This means that until a few months ago, my team and I were not able to use this UI5 PDFViewer. To solve this, I created a PDF Viewer Control on top of the PDFJS library which can be used in older UI5 versions. You can find more about PDFJS here: https://mozilla.github.io/pdf.js/

 

PDF Viewer Control


Just add the control into a view or dialog and bind a PDF base 64 uri to it directly or after uploading.

A toolbar is included in the control with buttons for:

  • Zooming in and out to enlarge the PDF

  • Paging: the control only shows the first page, for going to the next page, you need to use the buttons



How can you use it?


You can find the control in a library of UI5Lab:

https://ui5lab.io/browser/index.html#/Samples/ui5lab.wl.pdf/Sample/ui5lab.wl.pdf.PDF.PDFUpload



Get the library and deploy it to SCP or ABAP system like described here:

https://blogs.sap.com/2018/04/06/consume-libraries-from-ui5lab/

In that same blog is described how you can include the library into your project.

Load the library into your view and use the PdfViewer control. The PDF viewer control requires a base64 uri of an image as value and a height.
<pdf:PdfViewer pdfSource="{/pdfsource}" height="700px"/>

It can be used in a view or dialog.

Demo


As already mentioned, you can find it on UI5Lab with documentation, code on github and demo. You can also find a full demo here (view and dialog example):

https://htmlpreview.github.io/?https://github.com/lemaiwo/UI5LabLibraryPDFViewer/blob/master/test/ui...



 

Find more custom UI5 controls at UI5Lab: http://ui5lab.io

This is also the place to share your own controls with the community!

 
1 Comment
Labels in this area