Skip to Content
Technical Articles

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



I have seen a lot of blogs to display PDF on SAP UI5 using an HTML element or using a 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 –


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 :


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.

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

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.

], function (Controller,PDFViewer) {
	"use strict";

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

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


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 .

You must be Logged on to comment or reply to a post.