Dynamic SAPUI5 with Google API's

Technology Blogs by Members

Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!

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>