Technical Articles
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 .
Nice article Abhilash - short & simple but a true value addition.
Well explained , Nice Content
Very nice and helpful blog Abhilash !
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
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 .
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.
Thanks for the nice blog entry.
How to you open the embedded PDF File in a new browser tab out of UI5?
Thx.
Regards
Hi Andreas,
You may try to use "window.open(URL); " and give the URL to open the pdf in a new tab.
Regards,
Abhilash
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
Hello Nimish,
try to add this line of code in your /iwbep/if_mgw_appl_srv_runtime~get_stream redefinition.
Best regards,
Christian
Thanks very much Christian, this did the trick.
Thanks, it worked!!
Great BLog. THanks for posting!
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.
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
Is there a way we can read PDF content and send to backend?
Even i have same issue but could'nt find yet!! i tried with css but did not worked..
HI All,
@Abhilash Pradhan
I had done the code the ABAP ODATA for the PDF attachment and used SAPui5 control
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.