This blog is i continuation with my previous blog of SAPUI5 with Google API’s

We will get values form the UI and then pass it to the API. Change the index.html file 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=”resources/sap-ui-core.js”

  id=”sap-ui-bootstrap”

  data-sap-ui-libs=”sap.ui.commons”

  data-sap-ui-theme=”sap_bluecrystal”>

  </script>

  <script type=”text/javascript” src=”https://www.google.com/jsapi“></script> 

  <script type=”text/javascript”>

  google.load(“visualization”, “1”, {packages:[“corechart”]});

  var oMatrix = new sap.ui.commons.layout.MatrixLayout({

         layoutFixed : true,

         width : ‘300px’,

         columns : 2

});

  oMatrix.setWidths(‘100px’, ‘300px’);

    var oCell = new sap.ui.commons.layout.MatrixLayoutCell({

           colSpan : 4

});

oCell.addContent(new sap.ui.commons.TextView({

           text : ‘My Daily Activities’,

           design : sap.ui.commons.TextViewDesign.H1

}));

oMatrix.createRow(oCell);

oLabel1 = new sap.ui.commons.Label({

     text : ‘Work’

});

oInputField1 = new sap.ui.commons.TextField(“oInputField1”);

oLabel1.setLabelFor(oInputField1);

oMatrix.createRow(oLabel1, oInputField1);

oLabel2 = new sap.ui.commons.Label({

           text : ‘Eat’

});

oInputField2 = new sap.ui.commons.TextField(“oInputField2”);

oLabel2.setLabelFor(oInputField2);

oMatrix.createRow(oLabel2, oInputField2);

oLabel3 = new sap.ui.commons.Label({

     text : ‘Commute’

});

oInputField3 = new sap.ui.commons.TextField(“oInputField3”);

oLabel3.setLabelFor(oInputField3);

oMatrix.createRow(oLabel3, oInputField3);

oLabel4 = new sap.ui.commons.Label({

    text : ‘Watch TV’

});

oInputField4 = new sap.ui.commons.TextField(“oInputField4”);

oLabel4.setLabelFor(oInputField4);

oMatrix.createRow(oLabel4, oInputField4);

oLabel5 = new sap.ui.commons.Label({

    text : ‘Sleep’

});

oInputField5 = new sap.ui.commons.TextField(“oInputField5”);

oLabel5.setLabelFor(oInputField5);

oMatrix.createRow(oLabel5,oInputField5);

//callback function for successful requests

function onLoad() {

  var t1 = oInputField1.getValue();

  var t2 = oInputField2.getValue();

  var t3 = oInputField3.getValue();

  var t4 = oInputField4.getValue();

  var t5 = oInputField5.getValue();

t1 = parseInt(t1)
t2 = parseInt(t2)
t3 = parseInt(t3)
t4 = parseInt(t4)
t5 = parseInt(t5)

  var data = google.visualization.arrayToDataTable([

                                                       [‘Task’, ‘Value’],

                                                       [‘Work’,t1],

                                                       [‘Eat’,t2],

                                                       [‘Commute’,t3],

                                                       [‘Watch TV’,t4],

                                                       [‘Sleep’,t5]

                                                     ]);

     var options = {

       title: ‘My Daily Activities’,

       is3D: true,

     };

     var chart = new google.visualization.PieChart(document.getElementById(‘content’));

     chart.draw(data, options);

}

var oButton1 = new sap.ui.commons.Button({

  text : “Draw”,

  tooltip : “This is a test tooltip”,

  press : function() {

  google.setOnLoadCallback(onLoad());}

});

oMatrix.createRow(oButton1);

oMatrix.placeAt(“content”);

     </script>

  </head>

  <body class=”sapUiBody” role=”application”>

  <div id=”content” style=”width: 900px;height: 500px;”></div>

  </body>

</html>

Output:

op1.PNG

op2.PNG

I will definately try and enhance the code to get more complex API’s to work. Cheers.

To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Robin van het Hof

    I applaud the effort you have taken to write this blog, but when I see code like this:

    var t1 = oInputField1.getValue();

    var t2 = oInputField2.getValue();

    var t3 = oInputField3.getValue();

    var t4 = oInputField4.getValue();

    var t5 = oInputField5.getValue();

    t1 = eval(t1)

    t2 = eval(t2)

    t3 = eval(t3)

    t4 = eval(t4)

    t5 = eval(t5)

    it makes me cringe…. Why not use ‘parseInt(t1)‘ etc instead?

    (0) 
    1. Nikhil Joshi Post author

      Hi Robin,

      Yes, I too realised that not until the blog was published. During the blog I was concentrating on the output rather than performance.I am still reseraching on the diffrent ways in through which we can pass values to the API’s.I will make the correction soon.

      Best Regards,

      Nikhil

      (0) 

Leave a Reply