Reporting in Sap UI 5

[pinakipatra]

Hi ,
through this post i would like to share how to create a simple report(like crystal/xcelcius) through SAP UI5 using javascript

Architecture

Scenario : Build a report including a chart and detailed data(which is used to populate the chart)

Step 1 : Create a dataURL of the div

We know in sap ui5  we can create element with id which is registered into framework . We can call them by using sap.ui.getCore().byId() or using document.getElementById() which will return the respective div element .

Now we will try to create a html canvas from a div (this will give additional control). In my case i have used html2canvas js library .

html2canvas([document.getElementById('id')], { //id is the charts id say

                onrendered: function (canvas) {          //once the div is rendered then only process

                    var imageData = canvas.toDataURL();

                    }})

this(imageData ) will give me  the div element's  image in dataURL format which will be used to push the image into a document(say pdf).

Step 2 : Create a pdf using the  third Party tools (jsPDF) to create PDF  .

Now you can push whatever you want into the PDF .

Example : -

var doc = new jsPDF();

        doc.setFont("times", "italic") ;

        doc.rect(5, 5, 200, 280) ;

        doc.setTextColor(0,175,200) ;

        doc.text(90, 15, 'Demo');

        doc.setTextColor(0,0,0) ;

        doc.setFontSize(10) ;

        doc.text(10, 25, 'Demo report');

        doc.addImage(imageData, 'PNG', 25, 75, 150, 80);

You can also add tables and populate data into it (everything in js)

please refer : - JsDoc Reference - jsPDF  for jsPDF syntax

by this this time you will have a PDF created you need to download . So you can add a button and attach the following code in  the controller

downlaod :

            var file = 'demo';

            doc.save(file + '.pdf');

This will download the PDF file with an image and few texts.