Skip to Content
Apr 08, 2018 at 11:49 AM

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:


<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">
      <layout:LayeredLayout nodePlacement="Simple" nodeSpacing="40"/>
      <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"/>
      <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"/>
      <Group key="group_one" title="Main"/>
      <Group key="group_two" title="Main"/>


], 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!


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)