Skip to Content
0

SAPUI5: NetworkGraph missing displayed content while using LayeredLayout

Apr 08 at 11:49 AM

38

avatar image

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)
    10 |10000 characters needed characters left characters exceeded
    * Please Login or Register to Answer, Follow or Comment.

    2 Answers

    Best Answer
    Tim Kudla Apr 26 at 01:26 PM
    0

    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 :)


    lib.png (15.3 kB)
    Share
    10 |10000 characters needed characters left characters exceeded
    Desiree Matas
    Apr 09 at 08:16 AM
    0

    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

    Show 1 Share
    10 |10000 characters needed characters left characters exceeded

    I test it in the WebIDE with SAPUI5 version 1.52.8

    0