Reporting in UI5 : Custom Framework
Hi , Through this document i would like to share how you can create your own custom reporting framework using jsPDF & integrate with SAP UI5.
For basic understanding of how jspdf and UI5 works toogether pleasse refer Reporting in Sap UI 5
For jsPDF documentation please refer JsDoc Reference – jsPDF
A demo for the custom reporting with ui5 can be found here http://pinakipatra_sap.comlu.com/UI5Reporting/
The Problem Statement
We have created an UI5 / Fiori app which represents data in tabular format .
There are multiple table with the provison to filter accordingly .
Now on filtering the table the end user needs to generate a report which will contain data from all the tables.
The Solution
For the above problem we have created a framework on top of jsPDF.
It has the following features:
- Client side report generation
- Auto creation of tables from JSON
- Alignment of content
- Auto Header/Content Creation
- Open Source
Basic Usage
The following step describes the basic usage of the framework.
Index.html
In the index page you have to refer the jsPDF.js file and the custom javascript file.
These can be directly linked as shown below.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="http://pinakipatra_sap.comlu.com/UI5Reporting/resources/pdf.js"></script>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.table,sap.ui.commons,sap.viz"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script src="http://pinakipatra_sap.comlu.com/UI5Reporting/resources/pinaki_aarg.js"></script>
<script>
sap.ui.localResources("aarg");
var app = new sap.m.App({initialPage:"idHome1"});
var page = sap.ui.view({id:"idHome1", viewName:"aarg.Home", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Using The Framework
The below code shows how the framework can be called for JS view/controller.
Flags (x,y) are used to get the cursor position of the PDF and has to be passed as argument to each and every function.The framework takes input the following parameters :
Header Data : Used to manipulate the report header properties , can be set to repeat state for each page
Create Header : It will create a header text and alignj it accordingly.
Create Table
- JSON Data : Data from the ajax querry can be used (For gateway service and HANA XS apps)
- Header Alias : This is the display name for the table headers . It is a 2D array as shown in the figure below
- Remove headers : The headers for the JSON can be remmoved (Like deleting a table column)
Below snippet shows the usage/syntax of the fw. Apart from that all the properties/functions native to jsPDF can aslo be used.
generateReport : function(){
var that = this;
var doc = new jsPDF('');
doc.setFont('Courier','');
//Define Flags
var xFlag = 0;
var yFlag = 0;
var headerData={
header1 : 'Advanced Automated Report Generator(AARG) for SAP UI5 ',
imageURL : 'data:image/png'
header2 : 'An initiative by Pinaki Patra(Associate SAP)',
header3 : 'Email : pinaki.patra@brillio.com , Contact : +918951391373',
imagePos : 'C',
headerRepeat : true,
}
var flag = AARG.resources.aarg.createHeader(doc,headerData);
var headerText = {
text : 'My Table Creator',
align : 'C'
};
var flag = AARG.resources.aarg.createHederText(doc,headerText,flag);
var jsonData =[{"first_name":"James","last_name":"Butt","company_name":"Benton, John B Jr","address":"6649 N Blue Gum St","city":"New Orleans","county":"Orleans","state":"LA","zip":70116,"phone1":"504-621-8927"}]
;
var tableProperties = {
headerAlias : [
['first_name','First Name'],
["last_name"',Last Name'],
],
removeHeaders : ['phone1']
};
var header
var flag = AARG.resources.aarg.createTable(doc,tableProperties,jsonData,flag,headerData);
doc.save('report.pdf');
},
A demo for the custom reporting with ui5 can be found here http://pinakipatra_sap.comlu.com/UI5Reporting/
Generated report :
