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 .

[former_member360098]

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

[rishilal061]

Well explained , Nice Content

[former_member603701]

Very nice and helpful blog Abhilash !

[uttam_kumar4]

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

[former_member502643]

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 .

[abprad]

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.

[haemma83]

Thanks for the nice blog entry.

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

Thx.

Regards

[abprad]

Hi Andreas,

 

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

 

Regards,

Abhilash

[former_member716094]

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

[christian_bartlog2]

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

[CharlesRichir]

Thanks very much Christian, this did the trick.

[SORABHN]

Thanks, it worked!!

[SORABHN]

Great BLog. THanks for posting!

[mrahhaoui]

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.

[former_member734431]

Hi Abhilash Pradhan,

This is very good article , I just have one query. How do we generate PDF from BACKEND Gateway using GET_STREAM method , I have a smalrform or PDF in the SAP system , how do  I convert this to a format which frontend SAPUI5 can understand.

 

Thanks,

Bhavik

 

 

[deep_desai2]

Is there a way we can read PDF content and send to backend?

[former_member795421]

My requirement is that I want to disable this download and print button. Is there a way to disable the download and print button from the header and footer from this pdf viewer?

[former_member757522]

Even i have same issue but could'nt find yet!! i tried with css but did not worked..

 

[durgaprasanth_vemula]

HI All,

@abhilash.pradhan1

I had done the code the  ABAP ODATA for the PDF attachment and used SAPui5 control

PDFViewer but the issue is that when i click on PDF Viewer and the PDF is getting downloaded but the Preview is not coming . Please find the details steps and could you help does i missed any thing.

1)Table entry once the attachment is uploaded

2)code for upload attachment

3) code for fetch the attachment

4)SAPui5 code for PDF Viewer

5)PDF is getting downloaded but the preview is not coming.

[former_member867887]

Hello,

I am also facing the same issue. Have you got any solution? If yes could you please explain.

Thank you in advance.

[alexcamayo]

Thanks! It worked.

[former_member829112]

Hello,

 

You have to add this code at the end of getStream method.

 

ls_header   TYPE ihttpnvp

ls_header-name = 'content-disposition'.
ls_header-value = 'inline; filename="Document.pdf"'.
/iwbep/if_mgw_conv_srv_runtime~set_header( ls_header ).

 

Regards.

[hendrik_l]

I have the same issue and already tried to set the name in the content disposition and set a field of the OData entity to "as Title"