Example of sap.ui.commons.Tree with oData service from Gateway

[Former Member]

Hello,

i would like to share a simple example how the tree control (sap.ui.commons.Tree) can be used with an oData service from NW Gateway.

What do we want?

A tree, that is build with oData service data.

How do we achive it / What do we require?

- oData service implementation

- UI5 app

What steps are there to be done?

I can't provide a complete sample. But below there is a description of the path that needs to be taken & i'm sure that a developer will get the trick by following that path.

oData service implementation:

To achive the oData service, simple create a service with SEGW, register it & ensure you can call it with the gateway client tool. For the service two attributes are important: Node->Key & Node->Parent.

In your gateway service implementation ensure, that you properly fill the key and parent attribute.

=> In generally code the key/parent relation as you would implement a tree /column tree control in abap - if the table contains proper relations between key & parent, it's not big work to achive that the gateway passes this data in oData format. Just create the nodes table in abap and then assign these to the entity attributes.

UI5 app:

I didn't find a way to bind the oData data directly in the xml view of the ui5 app. If anyone knows how to achive it directly with binding - please be so kind to let me know how it can be achieved or add a comment to this document.

How i solved it in SAPUI5:

In the UI5 app, create a model & assign service url to the model. Afterwards implement a proper read() request on that model. Be sure, that the requestCompleted event  (JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.model.Model) of your model is registred with a function of your controller - we will need that function to create the tree node objects (sap.ui.commons.TreeNode) and add them afterward to the tree control itself by calling the method addNode(oNode) on the tree object.

So lets look at the requestCompleted funtion: Lets call it createNodes:function(parameters according to api).

Preparation:

First of all, we need an array var nodes = [];

After that, we create for each oData result an objNode object.

var objNode = { key : "", parent : "", nodeObj : null );

To that object we assign key, parent as it gets returned by the oData service.

The nodeObj we simply set by calling the constructor of sap.ui.commons.TreeNode.

Then we push every objNode object into the nodes array with nodes.push(nodeObj);

This gives us a complete JS array with all nodes of our oData service with proper key, parent attributes & the sap.ui.commons.TreeNode Object.

var nodes = [];

//create objNodes according tho the Prepartion descriptions:

for(key in oData.results ) {

var oDataObj = oData.results[key];

     var objNode = {key : "", parent:"", node : null };

     objNode.key = oDataObj.key;

     objNode.parent = oDataObj.parent;

     objNode.node = new sap.ui.commons.TreeNode( {.... refer api documenation } );

     nodes.push(objNode);

}

So now lets look at the part that adds our TreeNode Objects to the tree. Important: Only 1 Node needs to be added to the tree (Root Node). Basicly we have two for loops.

for( var key in nodes ) { //for1

var obj = nodes[key];

if(obj.parent == "" || obj.parent == "0" ) {
//this if ensures, that the root node is not processed as it has no parent at all. I've passed parent on root node as 0 in the gateway service implementation.

     continue;

     }

for( var parKey in nodes ) { //for2

     var parent = nodes[parKey]; //gets the node that acts as parent for its childs

     if(parent.key == obj.parent ) { //the parent key of the currently processed obj equals the parents key -> Now we now add this obj to the parent obj

          parent.nodeObj.addNode(obj.nodeObj); //This adds the current obj as node to the parent obj

          break; // leaves this for loop and next obj is processed

          }

     } //for2

} //for1

And here the complete Method:

JS:

createNodes: function(oData, response ) {

var nodes = [];

//create objNodes according tho the Prepartion descriptions:

for(key in oData.results ) {

var oDataObj = oData.results[key];

     var objNode = {key : "", parent:"", node : null };

     objNode.key = oDataObj.key;

     objNode.parent = oDataObj.parent;

     objNode.node = new sap.ui.commons.TreeNode( {.... refer api documenation } );

     nodes.push(objNode);

}

for( var key in nodes ) { //for1

var obj = nodes[key];

if(obj.parent == "" || obj.parent == "0" ) {
//this if ensures, that the root node is not processed as it has no parent at all. I've passed parent on root node as 0 in the gateway service implementation.

     continue;

     }

for( var parKey in nodes ) { //for2

     var parent = nodes[parKey]; //gets the node that acts as parent for its childs

     if(parent.key == obj.parent ) { //the parent key of the currently processed obj equals the parents key -> Now we now add this obj to the parent obj

          parent.nodeObj.addNode(obj.nodeObj); //This adds the current obj as node to the parent obj

          break; // leaves this for loop and next obj is processed

          }

     } //for2

} //for1

     //Get the tree object:

     var tree = this.byId("tree");

     tree.addNode(nodes[0].nodeObj) //This adds the complete trees node to the control

     //or shorter:

     this.byId("tree").addNode(nodes[0].nodeObj); // i personally don't like chained method calls that much - but that's a differnt discussion.

},

Thats it. Now you should see your tree control with the tree nodes build by backend service data. Be aware - it's a description of the path you need to follow - don't copy paste the code into your applications, as i think it will not work directly 100% - but i think chance is about 90% it will :smile:

I'm quite sure, there would be an even more sexy way to achive the two for loops in java script. But as i'm not a fully javascript expert yet, this solution does the work for me. Also on this topic, if somebody would improve this section of the code - go for it in the comments please. i really like feedbacks everybody can learn from.

I hope you liked reading this document. As always i'm looking forward to get community feedback & hope that somebody may like or bookmark the document. If it was helpful to somebody i'm happy with it.

In my next document, i'll show you a way, how to extract the nodes from the tree control. Why do i say this? Try the method getNodes() Function on the tree object -> The results was - my point of view - not what i expected. But more to that in the next document.

So far i wish you a nice day & good luck with SAPUI5 and ABAP work/projects.

Kind regards,

Michael