Skip to Content

SAPUI5: NetworkGraph missing displayed content while using LayeredLayout

Hey community,

I am interested to display data with the NetworkGraph and want to test it. Therefore I just download the example code (from here) and modifying the code a little bit. The result is the following:

NetworkGraph.view.xml

<mvc:ViewcontrollerName="sap.suite.ui.commons.sample.NetworkGraphCarFactory.   NetworkGraph" xmlns="sap.suite.ui.commons.networkgraph"
   xmlns:mvc="sap.ui.core.mvc" height="100%"   xmlns:layout="sap.suite.ui.commons.networkgraph.layout">
  <Graph id="graph" orientation="TopBottom">
    <layoutAlgorithm>
      <layout:LayeredLayout nodePlacement="Simple" nodeSpacing="40"/>
    </layoutAlgorithm>
    <nodes>
      <Node key="Node1" title="Node1" shape="Box" group="group_one"/>
      <Node key="Node2" title="Node2" shape="Box" group="group_one"/>
      <Node key="Node3" title="Node3" shape="Box" group="group_one"/>
      <Node key="Node4" title="Node4" shape="Box" group="group_one"/>
      <Node key="Node5" title="Node1" shape="Box" group="group_two"/>
      <Node key="Node6" title="Node2" shape="Box" group="group_two"/>
      <Node key="Node7" title="Node3" shape="Box" group="group_two"/>
      <Node key="Node8" title="Node4" shape="Box" group="group_two"/>
    </nodes>
    <lines>
      <Line from="Node1" to="Node2"/>
      <Line from="Node1" to="Node3"/>
      <Line from="Node1" to="Node4"/>
      <Line from="Node5" to="Node6"/>
      <Line from="Node5" to="Node7"/>
      <Line from="Node5" to="Node8"/>
    </lines>
    <groups>
      <Group key="group_one" title="Main"/>
      <Group key="group_two" title="Main"/>
    </groups>
  </Graph>
</mvc:View>

NetworkGraph.controller.js

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  var oPageController = Controller.extend("sap.suite.ui.commons.sample.<br>      NetworkGraphCarFactory.NetworkGraph", {
  });  return oPageController;
});

The problem is when I test the application the standard toolbar for the graph is displayed, but not the content. In whose place is an endless loading animation. If I change the LayoutAlgorithm to "ForceBasedLayout" the nodes and lines where displayed. But then the groups are still missing and the positioning is changing at every refresh.

The only error message when using the "Layered Layout" in the browsers console is the following:

Does someone can tell me what I miss to define or do wrong?

Thanks for your help in advance!

Tim

P.S. I know using a json.model is better, but first I want to exclude errors based on an incorrect implementation

    test.png (46.1 kB)
    Add comment
    10|10000 characters needed characters exceeded

    • Get RSS Feed

    2 Answers

    • Best Answer
      Apr 26 at 01:26 PM

      After some research I found some statement in a discussion that the library of the NetworkGraph currently can not be loaded from CDN.

      Therefore I download all necessary libraries, attach them to my project:

      and invoke the local files while bootstrap:

      <script id="sap-ui-bootstrap"
      	src="libs/sap-ui-core.js"
      	data-sap-ui-libs="sap.m"
      	data-sap-ui-theme="sap_belize"
      	data-sap-ui-compatVersion="edge"
      	data-sap-ui-resourceroots='{"NetworkGraphTest": ""}'>
      </script>
      

      Now the app is running :)

      Add comment
      10|10000 characters needed characters exceeded

    • Apr 09 at 08:16 AM

      Hi Tim,

      It would be useful to know which SAPUI5 version and patch level you are using, in order to discard any possible bug of the library.

      Best regards,

      Désirée

      Add comment
      10|10000 characters needed characters exceeded