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/ui5lab/wl/pdf/demo/index.html

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

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