Skip to Content
Apr 16, 2015 at 09:11 AM

Opening PDF Payslips in Detail view



I am working in SAPUI5 technology -UI side . I am trying to display the PDF view of payslip an employee . So in the master view i am loading the Employees from the oData service,. in the Detail view i have to set the placeholder for a PDF pdfURL payslip and within that Placeholder i need to display the PDF content.

i have tried different methods, at last i tried with the same method as how they have implemented the concept in standard application(HCM_Payslip). In that Standard app they have used the below code to embed the pdf.

<ctrl:EmbedPdf id="PDF_CTRL" noPluginMessage="{i18n>NO_PDF_PLUGIN_INSTALLED}" src="{NewModel>/PDFPayslipUrl}"></ctrl:EmbedPdf>

can i do the same method in my coed also? or is there any other way to display the pdf in detailview?

For you ref i have listed down my code below.


<core:View xmlns="sap.m" controllerName="sap.ui.payslip.custom.view.Detail"

xmlns:me="" xmlns:core="sap.ui.core" xmlns:ctrl="sap.ui.payslip.custom.controls"

xmlns:form="sap.ui.layout.form" xmlns:l="sap.ui.layout" xmlns:html="">

<ObjectHeader title="{Employee_Name}" titleActive="true" minHeight="1024"

number="{EMPLOYEE_ID}" numberUnit="{EMPLOYEE_ID}">


<ObjectAttribute text="{Employee_Name}" />



<!-- <html:div id="content"></html:div> -->

<ctrl:EmbedPdf id="PDF_CTRL" noPluginMessage="{i18n>NO_PDF_PLUGIN_INSTALLED}" src="{NewModel>/pdfURL}"></ctrl:EmbedPdf>



var oModel;

sap.ui.controller("sap.ui.payslip.custom.view.Detail", {

onInit : function(e) {

this.oModel = sap.ui.getCore().getModel();

var sRead = "/W2_PDFSet(Employee_ID='123')/$value";

this.jsonModel = new sap.ui.model.json.JSONModel();, null, null, true, function(oData, oResponse) {

var pdfURL = oResponse.requestUri;

this.getView().setModel(pdfURL, "NewModel");





<core:View controllerName="sap.ui.payslip.custom.view.Master"

xmlns="sap.m" xmlns:core="sap.ui.core">

<Page title="W2 Employee List">

<List id="list" mode="{device>/listMode}" select="handleListSelect"


<ObjectListItem type="{device>/listItemType}" press="handleListItemPress"

title="{Employee_Name}" number="{EMPLOYEE_ID}">












sap.ui.controller("sap.ui.payslip.custom.view.Master", {

handleListItemPress : function(evt) {

var context = evt.getSource().getBindingContext();"Detail", context);


handleListSelect : function(evt) {

var context = evt.getParameter("listItem").getBindingContext();"Detail", context);



In Component.js file i have consumed the service and stored inside the JsonModel object.