Skip to Content
Technical Articles
Author's profile photo Abhilash Pradhan

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 –

 

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 .

Assigned tags

      14 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Rajesh Thakur
      Rajesh Thakur

      Nice article Abhilash - short & simple but a true value addition.

      Author's profile photo Rishi Lal
      Rishi Lal

      Well explained , Nice Content

      Author's profile photo amruta thalkari
      amruta thalkari

      Very nice and helpful blog Abhilash !

      Author's profile photo Uttam Kumar
      Uttam Kumar

      Hey Abhilash,

      Great post, thanks for sharing.

      I have a question regarding $Value as the pdf name, when you click on the download it tries to download it with the name $value.

      How can we change that.

      Thanks & Regards,

      Uttam

      Author's profile photo Poornima Ragin
      Poornima Ragin

      Hi Abhilash Pradhan ,

       

      Great Post , Helpful and Thanks .

      When the PDF viewer is opened in Ipad or iphone , the pdf  window is not showing , only download option is coming and file is opening . 

      PDFViewer will it not work in iOS or android ? 

      Please advise. 

       

      Thanks ,

      Poornima .

      Author's profile photo Abhilash Pradhan
      Abhilash Pradhan
      Blog Post Author

      Hi Poornima,

       

      Thank you first.

      The PDF Viewer on a ipad or iphone doesn't have the same functionality.

      Check the sample description in the link below.

      https://openui5.hana.ondemand.com/entity/sap.m.PDFViewer/sample/sap.m.sample.PDFViewerPopup

      SAP says ; "PDF Viewer control can be fully displayed on desktop devices only." In mobile devices the functioanlity varies . Check the Pop Up sample and render that on a mobile device in Chrome.

      No Pop Up is displayed , it displays the PDF in a new window.

      Author's profile photo Andreas Teufer
      Andreas Teufer

      Thanks for the nice blog entry.

      How to you open the embedded PDF File in a new browser tab out of UI5?

      Thx.

      Regards

      Author's profile photo Abhilash Pradhan
      Abhilash Pradhan
      Blog Post Author

      Hi Andreas,

       

      You may try to use "window.open(URL); " and give the URL to open the pdf in a new tab.

       

      Regards,

      Abhilash

      Author's profile photo Nimish Shinde
      Nimish Shinde

      Hi Abhilash,

       

      When I try to do the same, PDF file gets downloaded automatically instead of getting opened in PDFViewer. Have you faced this issue?

      Thanks in advance !!

       

      Regards,

      Nimish

      Author's profile photo Christian Bartlog
      Christian Bartlog

      Hello Nimish,

      try to add this line of code in your /iwbep/if_mgw_appl_srv_runtime~get_stream redefinition.

      set_header( is_header = VALUE #( name = 'Content-Disposition' value = 'inline; filename=' && |<your filename>| ) ).

      Best regards,

      Christian

      Author's profile photo Charles Richir
      Charles Richir

      Thanks very much Christian, this did the trick.

      Author's profile photo Sorabh Nagpal
      Sorabh Nagpal

      Thanks, it worked!!

      Author's profile photo Sorabh Nagpal
      Sorabh Nagpal

      Great BLog. THanks for posting!

      Author's profile photo rahhaoui mohamed
      rahhaoui mohamed

      Hi,

      Nice blog!
      I followed your instruction and it works except for one thing. But when I set the header, the file is not loaded in preview and not downloaded automatically.
      when I remove the set, file is automatically downloaded without preview.
      Do you have an idea ?

      thank you in advance for your response.

      M.