PDF Download Option with SAPUI5

Content

1.     Summary

2.     Pre-requisites.

3.     SAPUI5 Application development

4.     Testing and Demo.

1. Summary

    SAP provide us to integrate sapui5 application with third party. At many time we got such requirement where client want to download data in PDF or Excel format for records, some proof or some other reasons. So here we will discuss about how we can download data in PDF format.

2. Pre-Requisites

1. 1. Basic Knowledge of SAPUI5, OData.
2. 2.  Basic knowledge of JS.

3. Create SAPUI5 Application.

1.       I will show you how you can develop this Application in WEBIDE but you can create same application using Eclipse. You need to follow same process.

2.       Create OData service to create table on real time data.

3.       Create New SAPUI5 application in WEBIDE.

4.       Set OData service for Application.

Write code in component.js file.

    sap.ui.define([  
      "sap/ui/core/UIComponent",  
      "sap/ui/Device",  
      "sap/pdf/model/models"  
    ], function(UIComponent, Device, models) {  
      "use strict";  
      
      
      return UIComponent.extend("sap.pdf.Component", {  
      
      
      metadata: {  
      manifest: "json"  
      },  
      
      
      /** 
      * The component is initialized by UI5 automatically during the startup of the app and calls the init method once. 
      * @public 
      * @override 
      */  
      init: function() {  
      var url ='/sap/opu/odata/sap/ZDEMO_DATA_SRV/';  
      var oModel = new sap.ui.model.odata.ODataModel(url, true);  
      sap.ui.getCore().setModel(oModel);  
      // call the base component's init function  
      UIComponent.prototype.init.apply(this, arguments);  
      // set the device model  
      this.setModel(models.createDeviceModel(), "device");  
      }  
      });  
      
      
    });  

5.Create Main view and write code to create simple table.

    <mvc:View controllerName="sap.pdf.controller.main" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">  
        <App>  
            <pages>  
                <Page title="PDF Download">  
                    <content>  
                        <Table id="idPDFTable" items="{/DemoSet}">  
                            <headerToolbar>  
                                <Toolbar>  
                                    <Title level="H2" text="PDF Table"/>  
                                     <ToolbarSpacer></ToolbarSpacer>  
                                     <Button    icon="sap-icon://download" press="onDataExportPDF" />  
                                </Toolbar>  
                            </headerToolbar>  
                            <columns>  
                                <Column width="12em">  
                                    <Text text="ID"/>  
                                </Column>  
                                <Column>  
                                    <Text text="Frist Name"/>  
                                </Column>  
                                <Column>  
                                    <Text text="Last Name"/>  
                                </Column>  
                                <Column>  
                                    <Text text="Phone No."/>  
                                </Column>  
                            </columns>  
                            <items>  
                                <ColumnListItem>  
                                    <cells>  
                                        <Text text="{Id}"/>  
                                        <Text text="{Fname}"/>  
                                        <Text text="{Lname}"/>  
                                        <Text text="{Phoneno}"/>  
                                    </cells>  
                                </ColumnListItem>  
                            </items>  
                        </Table>  
                    </content>  
                </Page>  
            </pages>  
        </App>  
    </mvc:View>  

6.       Create main.controller.js file to control main view.

7.       Test Application for table data coming correctly or not.

8.       We can see that download button on table header. On press of that button we will download that table data in PDF format. To complete this process we need to use third party API here we will use jsppdf API.For more detail: –
https://parall.ax/products/jspdf

9.        Include some JS file in application.

Create separate folder.And include  js file attached in Attachment.

10.       Now we need to include  that JS in manifest.json folder.

11. Now we just need to add some line of code in main.component.js file to download table data in pdf format.

    sap.ui.define([  
        "sap/ui/core/mvc/Controller"  
    ], function(Controller) {  
        "use strict";  
      
        return Controller.extend("sap.pdf.controller.main", {  
            onInit: function () {  
                // set explored app's demo model on this sample  
                this.getView().setModel(sap.ui.getCore().getModel());  
            },  
            onDataExportPDF:function(oEvent){  
              
            var fnSuccess = function(oData, oResponse) {  
      
                var columns = ["ID","First Name","Last Name","Phone No."];  
                var data = [];  
                    for(var i=0;i<oData.results.length;i++)   
                    {  
                        data[i]=[oData.results[i].Id,oData.results[i].Fname,oData.results[i].Lname,oData.results[i].Phoneno];  
                    }  
      
                var doc = new jsPDF('p', 'pt');  
                doc.autoTable(columns, data);  
                doc.save("DemoData.pdf");  
            };  
            var fnFail = function() {  
            };  
            sap.ui.getCore().getModel().read('/DemoSet',  
                null, null, true, fnSuccess, fnFail);  
      
            }  
        });  
      
    });  

4. Demo and Testing.

• Our SAPUI5 application completed where we show data in table and add download button on that table. On press on that button we can download that table data in PDF format.

Please find screen shots of application.

On press on that download icon.

PDF output:-