Additional Blogs by Members
Showing results for 
Search instead for 
Did you mean: 

Bringing up UI5 charts in Personas 3.0 makes flavor more understandable for the end user. I worked on this with the base of Using SAPUI5 charts in Personas Flavours by steve.rumsby bringing charts in personas flavor and enhanced it to be interactive.

My POC requirement was to bring the total number of sales, inquiry and quotation documents created during the SD life cycle in a system. When clicked on the particular document it takes you to a flavor which displays the number of documents created for the selected type on monthly basis, onclick of the chart it takes you to the flavor which displays the complete documents with recently created document on the top and on clicking the document it should display the details of the documents.

The first thing is to get the data needed to build the chart for that we can use RFC to get the data.

Create a RFC to get the Count of the documents created in the system and also get the table which will be used in final flavor for displaying the details.

Define parameters salesorder, quotation, inquiry as export parameters, which can be exported.

On the Import tab give parameter for getting the user id for selecting the documents he/she created.

On source code write the code to count the number of documents based on the type and store it in the export parameter.

select count( * ) from vbak into salesorder where ernam = user AND auart = 'TA' or auart = 'AEBO'.
            select count( * ) from vbak into quotation where ernam = user AND auart = 'AG' or auart = 'QT'.
            select count( * ) from vbak into inquiry where ernam = user AND auart = 'AF'.

Now create another FM to get the details of the table to be displayed, with DETAILS1 as internal table of type VBAK which contains the data of the documents.

On the import parameter give two parameters to select the user and document type.

On the Source code write the code to select the data from the table and store it in the internal table to export it based on the user name and the document type.

            sort details1 DESCENDING.

Make sure both the Function Module are remote enabled in the Attributes tab

Now Save and activate both the Function Module.

We need to create three set of flavors

Complete Overview of Documents:

Flavor 1

Overview of specific documents Monthly basis:

Flavor 2

Flavor 3

Flavor 4

Displaying all the documents of specific type for viewing details of the document:

Flavor 5

Flavor 6

Flavor 7

Flavor 1:

We have to get the data in the flavor to build the desired chart.

Call the RFC in the flavor and get the Count from various export parameters and save it to a variable. The code is given below.

var rfc = session.createRFC("ZRFC_COUNT");

rfc.setParameter("USER", "PERSONADEMO1");

rfc.requestResults(JSON.stringify(["SALESORDER", "INQUIRY", "QUOTATION"]));


var sale = parseInt(rfc.getResult("SALESORDER"));

var inquiry = parseInt(rfc.getResult("INQUIRY"));

var quotation = parseInt(rfc.getResult("QUOTATION"));

We have to pass the data in form of JSON to the Chart, So build a JSON with the data to pass it to the chart.

var newContents = [

    {"Document": "Sales Order", "Count": sale},

    {"Document": "Inquiry Document", "Count": inquiry},

    {"Document": "Quotation", "Count": quotation},


          Now Build the chart with the JSON model and Handle the click event on the chart and redirect it to the different flavor where we will show the chart on monthly basis based on the type of document clicked.

          I have attached the completed coding and given the building of Donut Chart alone below.

var oBarChart = new sap.viz.ui5.Donut({

  width : "100%",

  height : "500px",

  plotArea : {


  title : {

       visible : false,

       text : "Document status"


selectData : function(oEvent) {

var yAxisIndex = (oEvent.getParameter("data")[0]).data[0].ctx.path.dii_a1;';


if(yAxisIndex == 0){"Shortlink to Flavor 2");} //open a flavor to display the No.of Sales documents created on monthly basis ( Flavor 2 )

if(yAxisIndex == 1){"Shortlink to Flavor 3");} //open a flavor to display the No.of Inquiry Documents created on monthly basis ( Flavor 3 )


if(yAxisIndex == 2){"Shortlink to Flavor 4");}   //open a flavor to display the No.of Quotation document created on monthly basis ( Flavor 4 )


dataset : oDataset


Attach the script to the onload screen event.

Flavor 2:

          After Clicking the Chart it takes you a flavor according to the selection made in the chart.

     On the new flavor we have to call the RFC we have created to get the complete details of table and calculate the No.Of Documents created on each month.

var rfc = session.createRFC("ZRFC_COUNT_TEST");

rfc.setParameter("USER", "PERSONADEMO1");

rfc.setParameter("DOC_TYPE", "A"); //Set the Document type as Sales Document (B for Inquiry and C for Quotation)



var sale = rfc.getResult("DETAILS1");

var so = JSON.parse(sale);

var newContent = [];

var list_year = [];

var flag=true, count =0;

for(var i = 0;i<so.length;i++)


var year=so[i].ERDAT;

        list_year[i] = year.slice(5,7);



function ArrNoDupe(a) {

    var temp = {};

    for (var i = 0; i < a.length; i++)

        temp[a[i]] = true;

    var r = [];

    for (var k in temp)


    return r;


var nodup = ArrNoDupe(list_year);

for(var i=0; i<nodup.length; i++){

    var year = nodup[i];

    for(var j=0; j<list_year.length; j++){

        if(year == list_year[j]){




        newContent.push({"Year":year, "Count":count});


After this you can build a Bar chart as like the Donut chart created in the Flavor 1 and redirect on clicking the chart to a new flavor.

Attach the script to the onload screen event.

Create a copy of the Flavor 2 and create flavor 3 and 4 but change the value of the DOC_TYPE during the RFC calling.

rfc.setParameter("DOC_TYPE", "B"); // Flavor 3 for Inquiry Document

rfc.setParameter("DOC_TYPE", "C"); // Flavor 4 for Quotation Document

Flavor 5:

This has more work to be done than other Flavors. The first thing is that we have to construct Script buttons in the for of 10x5 to get 50 tiles a shown below

Write the Script to call the RFC to get the details of the document and convert it to JSON and also make the JSON model available throughout the session by using session.utils.put method.

session.utils.put("Jsale",sale); //Making JSON file available throughout the session

Attach the script to the onload screen event.

All the Document numbers are placed in the label placed above the script button(Tile).

On clicking the script button the tile number has to be stored in a variable and the group box containing the details of the document has to be displayed.

For example clicking 8th tile will execute the below script



          Similarly, create a separate javascript and attach it to all the tiles OnClick event


var j = session.utils.get("i");

var i = parseInt(j);

var sale = session.utils.get("Jsale");

var so = JSON.parse(sale);

* Rest of the code for pasting the document number in the labels please find that in attached file "Flavor_5" *

Next is to make the data change dynamically in the group box when clicking on the next or previous group box

To move to the next data we can increment the value of "i"

var j = session.utils.get("i");

var i = parseInt(j);


var new_var = i.toString();



Attach it to the transparent script button placed above the group box placed to the right.

Follow the same to move to the previous data but decrease the value of "i"

Create a copy of the Flavor 5 and create flavor 6 and 7 but change the value of the DOC_TYPE during the RFC calling.

rfc.setParameter("DOC_TYPE", "B"); // Flavor 6 for Inquiry Document

rfc.setParameter("DOC_TYPE", "C"); // Flavor 7 for Quotation Document

Everything is set now you can now open the Flavor 1 and drill down from overview of the documents to complete details of specific document.

This is my second blog hope I have shared something useful.

Thank You.