Want to wrap 3rd party libraries as a notepad control so I can use as any other control within the UI5 framework. Tried this with a couple 3rd party libraries but no luck. Typically the 3rd party library need to bind with a div tags id, but whenever I try to wrap 3rd party package in a notepad control, the 3rd party lib can't find the div tab by id. As an example I have include this google chart example below. Note that in TsGoogleChart.js file I have two ways of looking up the id, one commented out that looks up a tag in the index page after the sap content (this works var id = "testChart";), and another where I tried to use the div id created by the ui5 framework in the TsGoogleChart control (this doesn't var id = this.getIdForLabel()). So why can't we bind the 3rd party library to a UI5 control onAfterRendering? When I look at document element, it seems like it can't find and just the ui5 div id and just put the chart at the end with no height. PS - I seen the examples where this is down in view.js, but i want to encapsulate these libraries as controls. Three files below after create an SCN eclipse project: index.html, ScnMain.view.js, scn.chart.TsGoogleChart.js.
***** index.html *******
<!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>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(initSCN);
function initSCN() {
sap.ui.localResources("scn");
var view = sap.ui.view({id:"idScnMain1", viewName:"scn.ScnMain", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
}
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
<div id="testChart"></div>
</body>
</html>
***** ScnMain.view.js - Note the ScnMain.controller.js hasn't been touched *******
jQuery.sap.require("scn.chart.TsGoogleChart");
sap.ui.jsview("scn.ScnMain", {
getControllerName : function() {
return "scn.ScnMain";
},
createContent : function(oController) {
var oLayout = sap.ui.commons.layout.VerticalLayout("appLayout", { width: "100%" });
oLayout.addContent(new sap.ui.commons.ApplicationHeader("appHeader"));
oLayout.addContent(new scn.chart.TsGoogleChart());
return oLayout;
}
});
****** TsGoogleChart.js *******
jQuery.sap.declare("scn.chart.TsGoogleChart");
sap.ui.core.Control.extend("scn.chart.TsGoogleChart", {
metadata: {
aggregations: { chart: {type: "Object", multiple: false} }
},
renderer: function(oRM, oCtrl) {
oRM.write("<div ");
oRM.writeControlData(oCtrl);
oRM.write(">");
oRM.write("</div>");
},
onAfterRendering: function() {
if( this.getChart()==null ) {
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'],
['2004/05', 165, 938, 522, 998, 450, 614.6],
['2005/06', 135, 1120, 599, 1268, 288, 682],
['2006/07', 136, 691, 629, 1026, 366, 569.6] ]);
var options = {
title : 'Monthly Coffee Production by Country',
vAxis: {title: "Cups"},
hAxis: {title: "Month"},
seriesType: "bars",
series: {5: {type: "line"}}
};
//*** Can't Use getIdForLabel but it works for a <div id="testChart"></div> in index.html file.
var id = this.getIdForLabel();
//var id = "testChart";
var chart = new google.visualization.ComboChart(document.getElementById(id));
chart.draw(data, options);
this.setChart(chart);
}
}
});