cancel
Showing results for 
Search instead for 
Did you mean: 

Error during AggregationBinding for sap.suite.ui.commons.networkgraph.Node

akrienke
Discoverer
0 Kudos

Hi all,

I am trying to figure out in a single page how to set values into the network graph node and attributes. Without the "attributes" everything is displayed fine, but when using the "attributes" and trying to bind them with the factory method I get the mentioned error message from the title:

""

Here is my coding, running "offline" as a plain test of functionality (as I know its not a complete application):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>SAPUI5</title>
    <!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
    <script id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-libs="sap.m,sap.suite.ui.commons,sap.ui.commons"></script>

	<script>
		//factory function for Groups
		function createGroup(id, context) {
			return new sap.suite.ui.commons.networkgraph.Group({
				key: { path: "key" },
				title: { path: "title" },
				icon: { path: "icon" },
				collapsed: { path: "collapsed" },
				shape: { path: "shape" },
			});
		}

		//factory function for Attributes
		function createAttribute(id, context) {
			return new sap.suite.ui.commons.networkgraph.ElementAttribute({
				label: { path: "label" },
				value: { path: "value" },
			});
		}

		//factory function for Nodes
		function createNode(id, context) {
			return new sap.suite.ui.commons.networkgraph.Node({
				key: { path: "key" },
				title: { path: "title" },
				icon: { path: "icon" },
				group: { path: "group" },
				shape: { path: "shape" },
				attributes : { path : "attributes" },
			});
		}

		//factory function for Lines
		function createLine(id, context) {
			return new sap.suite.ui.commons.networkgraph.Line({
				from: { path: "from" },
				to: { path: "to" },
				arrowPosition: { path: "arrowPosition"}
			});
		}

		//function that draws page content
		function init() {
			// create json of data model
			const json =
			// <! merge json!>
			{"nodes":[	{"key":1,"title":"Component 1","icon":"sap-icon://blur","shape":"Circle", "attributes": [{"label":"a","value":"1"}]},
						{"key":2,"title":"Component 2","icon":"sap-icon://blur","shape":"Circle", "attributes": [{"label":"a","value":"1"}]},
						{"key":3,"title":"Component 3","icon":"sap-icon://blur","shape":"Circle", "attributes": [{"label":"a","value":"1"}]},
						{"key":4,"title":"Component 4","icon":"sap-icon://blur","shape":"Circle", "attributes": [{"label":"a","value":"1"}]}
					],
			"lines":[	{"from":2,"to":4,"arrowposition":"Middle"},
				        {"from":3,"to":4,"arrowposition":"Middle"}
					]
			};

			const model = new sap.ui.model.json.JSONModel(json);

			const panel = new sap.m.Panel({
			headerText: "Simple Network Graph App",
			}).placeAt("uiArea");

			const vbox = new sap.m.VBox();
			vbox.addStyleClass("sapUiSmallMargin");
			panel.addContent(vbox);


			// Create graph and bind aggregations to model paths
			const graph = new sap.suite.ui.commons.networkgraph.Graph();
			graph.setModel(model);
			
			graph.bindAggregation("groups", "/groups", createGroup);
			graph.bindAggregation("nodes", "/nodes", createNode);
			graph.bindAggregation("attributes", "/nodes/attributes", createAttribute); // <= ???
			graph.bindAggregation("lines", "/lines", createLine);

			vbox.addItem(graph);
		}

		//attaching init function to core initializing callback
		sap.ui.getCore().attachInit(init);
	</script>

</head>
<body class="sapUiBody">

    <!-- This is where you place the UI5 -->
    <div id="uiArea"></div>

</body>
</html><br>

How could I bind the attributes from the json model here to the nodes-attribute? Any help or hint will be appreciated.

Thanks.

Accepted Solutions (0)

Answers (0)