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

Opening PDF Payslips in Detail view

129 Views

Hi,

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.

Detail.view.xml:

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

xmlns:me="sap.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="http://www.w3.org/1999/xhtml">

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

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

<attributes>

<ObjectAttribute text="{Employee_Name}" />

</attributes>

</ObjectHeader>

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

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

</core:View>

Detail.controller.js:

jQuery.sap.require("sap.ui.payslip.custom.util.Formatter");

jQuery.sap.require("sap.m.MessageBox");

jQuery.sap.require("sap.m.MessageToast");

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();

this.oModel.read(sRead, null, null, true, function(oData, oResponse) {

var pdfURL = oResponse.requestUri;

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

});

},

});

MAster.view.xml:

<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"

items="{/W2_HeaderSet}">

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

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

</ObjectListItem>

</List>

<footer>

<Bar>

<contentRight>

</contentRight>

</Bar>

</footer>

</Page>

</core:View>

Master.controller.js:

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

handleListItemPress : function(evt) {

var context = evt.getSource().getBindingContext();

this.nav.to("Detail", context);

},

handleListSelect : function(evt) {

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

this.nav.to("Detail", context);

},

});

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