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

[abprad]

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 .