AnsweredAssumed Answered

Use custom Javascript library in HTML portlet

Question asked by msnizek on Aug 29, 2017
Latest reply on Aug 29, 2017 by gcubed

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];
                //alert(cookieName);
                //alert(cookieValue);
                if (cookieName == c_name)
                {
                    return unescape(cookieValue);
                }
            }
        }
        function loadXMLDoc() {
            var xmlhttp;
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("POST", endpoint, true);
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                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");
                       //alert(parent_id.length);
                       for (var i = 0; i < parent_id.length; i++) {                       
                        //alert(parent_id[i].nodeValue);
                        //alert(parent_label[i].childNodes[0].nodeValue);
                              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')
            /*,
          boxSelectionEnabled: false,
          autounselectify: true,

          style: cytoscape.stylesheet()
            .selector('node')
                .css({
                    'content': 'data(name)',
                    'text-valign': 'center',
                    'text-halign': 'center',
                    'color': 'black',
                    'width': '250',
                    'border-width': 1,
                    'border-color': 'black',
                    'height': 40,
                    'font-size': 10,
                    'background-color': 'data(color)',
                    'shape': 'barrel',
                    'text-wrap': 'wrap'
                })
          .selector('edge')
                .css({
                    'curve-style': 'bezier',
                    'target-arrow-shape': 'triangle',
                    'width': 4,
                    'line-color': 'red',
                    'target-arrow-color': 'red'
                })
          .selector(':selected')
                .css({
                    'background-color': 'black',
                    'line-color': 'black',
                    'target-arrow-color': 'black',
                    'source-arrow-color': 'black',
                    'text-outline-color': 'black'
                }),

         elements: {
             nodes: demoNodes,
             edges: demoEdges
          },
         
          layout: {
              name: 'random',
              padding: 10
          }*/

      });
          
    </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

Outcomes