SAPUI5: NetworkGraph missing displayed content while using LayeredLayout

timkudla — Sun, 08 Apr 2018 11:49:00 GMT

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

Re: SAPUI5: NetworkGraph missing displayed content while using LayeredLayout

desiree_matas — Mon, 09 Apr 2018 08:16:18 GMT

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

Re: SAPUI5: NetworkGraph missing displayed content while using LayeredLayout

timkudla — Mon, 09 Apr 2018 10:54:04 GMT

I test it in the WebIDE with SAPUI5 version 1.52.8

Re: SAPUI5: NetworkGraph missing displayed content while using LayeredLayout

timkudla — Thu, 26 Apr 2018 13:26:29 GMT

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 🙂

Question Re: SAPUI5: NetworkGraph missing displayed content while using LayeredLayout in Technology Q&A

SAPUI5: NetworkGraph missing displayed content while using LayeredLayout

Re: SAPUI5: NetworkGraph missing displayed content while using LayeredLayout

Re: SAPUI5: NetworkGraph missing displayed content while using LayeredLayout

Re: SAPUI5: NetworkGraph missing displayed content while using LayeredLayout