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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.