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 = eval(t1)
t2 = eval(t2)
t3 = eval(t3)
t4 = eval(t4)
t5 = eval(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:
I will definately try and enhance the code to get more complex API's to work. Cheers.