Hi all,
I need to use a custom library in html portlet in CA PPM.
I placed the js file to: $NIKU_HOME/webroot/ui/ext folder
and the html code for the portlet is like:
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="ui/ext/cytoscape.js"></script>
</head>
<style>
#cy {
width: 90%;
height: 50%;
position: absolute;
background-color:red;
border: 1px;
top: 0;
left: 0;
}
</style>
<body>
<div id="cy">Nejaky text</div>
<script>
var demoNodes = [];
var demoEdges = [];
function getCookie(c_name)
{
var i, cookieName, cookieValue, thisCookie, allCookies = document.cookie.split(";");
for (i = 0; i < allCookies.length; i++)
{
thisCookie = allCookies[i].split("=");
cookieName = thisCookie[0].replace(/^\s+|\s+$/g,"");
cookieValue = thisCookie[1];
if (cookieName == c_name)
{
return unescape(cookieValue);
}
}
}
function loadXMLDoc() {
var xmlhttp;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", endpoint, true);
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var xmlDoc=xmlhttp.responseXML;
var parent_id=xmlDoc.getElementsByTagName("parent_id");
var parent_label=xmlDoc.getElementsByTagName("parent_label");
var child_id=xmlDoc.getElementsByTagName("child_id");
var child_label=xmlDoc.getElementsByTagName("child_label");
var parent_color=xmlDoc.getElementsByTagName("parent_color");
var child_color=xmlDoc.getElementsByTagName("child_color");
for (var i = 0; i < parent_id.length; i++) {
demoNodes.push({
data: {
id: parent_id[i].childNodes[0].nodeValue,
name:parent_label[i].childNodes[0].nodeValue,
color: "'"+parent_color[i].childNodes[0].nodeValue+"'"
}
});
demoEdges.push({
data: {
source: parent_id[i].childNodes[0].nodeValue,
target: child_id[i].childNodes[0].nodeValue
}
});
}
}
}
var nsql_id = 'c_q_prj_depend';
var currentURL = window.location.toString();
var endpoint = currentURL.substr(0, currentURL.indexOf("/niku")) + "/niku/xog";
var sessionCookie = getCookie('sessionId');
var xml = '' +
'<se:Envelope xmlns:se="http://schemas.xmlsoap.org/soap/envelope/" xmlns:q="http://www.niku.com/xog/Query">' +
'<se:Header><q:Auth><q:SessionID>' + sessionCookie + '</q:SessionID></q:Auth></se:Header>' +
'<se:Body><q:Query><q:Code>' + nsql_id + '</q:Code></q:Query></se:Body> ' +
'</se:Envelope>';
xmlhttp.open("POST", endpoint, true);
xmlhttp.send(xml);
}
loadXMLDoc();
var cy = cytoscape({
container: document.getElementById('cy')
});
</script>
</body>
</html>
Loading of the data works properly before adding row 100 and down.
Could you please help me with solving this?
Error message in Chrome Console is:
(ReferenceError): cytoscape is not defined--Client Side Exception
com.google.gwt.core.client.JavaScriptException: (ReferenceError): cytoscape is not defined
If I understood this well it means that the library is not loaded.
Thank you all in advance,
Martin