cancel
Showing results for 
Search instead for 
Did you mean: 

SAPUI5: NetworkGraph missing displayed content while using LayeredLayout

timkudla
Participant
0 Kudos

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

    Accepted Solutions (1)

    Accepted Solutions (1)

    timkudla
    Participant
    0 Kudos

    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 🙂

    Answers (1)

    Answers (1)

    desiree_matas
    Contributor
    0 Kudos

    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

    timkudla
    Participant
    0 Kudos

    I test it in the WebIDE with SAPUI5 version 1.52.8