Display PDF/ Forms from back end SAP in SAP UI5 using the PDFVIEWER control

Introduction:

I have seen a lot of blogs to display PDF on SAP UI5 using an HTML element or using a window.open to display the PDF. But the easiest and most user friendly way to do that would be to use the UI5 – PDF Control .

PDF Control –

• Design Guidelines – (https://experience.sap.com/fiori-design-web/pdf-viewer/)
• Sample – https://sapui5.hana.ondemand.com/#/entity/sap.m.PDFViewer

In this blog , I’ll only show the UI5 component to add your Media OData Value and bind that to your PDF Control . To create an OData to handle PDF please follow the blog below.

Blog Link for Exposing your Smartform as a PDF : https://blogs.sap.com/2014/02/03/display-smartform-pdf-in-sapui5/

Using the PDF Control:

Lets create a button and display the data from our OData (PDF data) on click of the button in a PDFViewer.

<Toolbar>
<Button text="Show PDF Viewer" icon="sap-icon://process" press="showPDF"/>
</Toolbar>

On Press of the Button we want to display the PDF as a Pop Up. This PDF will come from our backend SAP System.

Lets implement the controller and the Event Handler showPDF.

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/PDFViewer"	
], function (Controller,PDFViewer) {
	"use strict";

	return Controller.extend("pdf.ZPDFViewer.controller.Main", {
		onInit: function () {

		},
		showPDF: function(oEvent){
	
			var opdfViewer = new PDFViewer();
			this.getView().addDependent(opdfViewer);
			var sServiceURL = this.getView().getModel().sServiceUrl;
			var sSource = sServiceURL + "GetPdfSet(Serial='C0003',Filename='')/$value";
			opdfViewer.setSource(sSource);
			opdfViewer.setTitle( "My PDF");
			opdfViewer.open();	
			
		}
	});
});

Code Explanation:

• We create an object of the PDFViewer class.
• And assign this to the Current View as a dependent .
• We get the OData service path using getModel().sserviceUrl
• We create the final URL , the service URL + the Odata entity set which will return the PDF with a $Value parameter
• We set this URL to the PDFViewer object.
• Set a Title for the PDF Viewer
• And lastly, we open the PDF Viewer.

The important thing to note here is creating the URL , which should be Entity which returns your PDF data.

Service URL will be the sap URL like below /sap/opu/odata/sap/YABHIRES_SRV/

When you test the OData service , you provide the URL as below

/sap/opu/odata/sap/YABHIRES_SRV/GetPdfSet(Serial=’C0041′,Filename=”)/$value .

We just need to prepare this URL and set it to the PDFViewer.

UI5 App:

The App has a Button and on Press of the button the PDF will be displayed.

The PDF is now displayed from the backend SAP into a nice content area provided by the PDF Viewer and it also has a download button .