UI5- Tree

lightUI5-  Simple Tree

 

 


Create a UI5 project in Eclipse. 

Instantiate the Tree and provide a title and add the tree into the body.

1


2


Build Tree Nodes and add the nodes to the tree.

3


4


Build more nodes and add those to tree.

5


6


Build subnode for one of the node and add subnodes to the top level node.

7


8


9


10


To make the top level node as collapsed, set expanded as false.

11


12


13


Code Snippet:

// Instantiate Tree
oTree= new sap.ui.commons.Tree(“SPORTS”);
oTree.setTitle(“Sports”);

// Instantiate First Tree Node
oNode1_Level1 = new sap.ui.commons.TreeNode({text: ‘Base Ball’});
oNode2_Level1 = new sap.ui.commons.TreeNode({text: ‘Foot Ball’});

oNode3_Level1 = new sap.ui.commons.TreeNode({text: ‘Cricket’, expanded: false});
oNode3_1_Level2 = new sap.ui.commons.TreeNode({text: ‘Test Cricket’});
oNode3_2_Level2 = new sap.ui.commons.TreeNode({text: ‘One Day Cricket’});
oNode3_3_Level2 = new sap.ui.commons.TreeNode({text: ’20-20 Cricket’});
oNode3_Level1.addNode(oNode3_1_Level2);
oNode3_Level1.addNode(oNode3_2_Level2);
oNode3_Level1.addNode(oNode3_3_Level2);

oNode4_Level1 = new sap.ui.commons.TreeNode({text: ‘Hockey’});
// Add node to the Tree
oTree.addNode(oNode1_Level1);
oTree.addNode(oNode2_Level1);
oTree.addNode(oNode3_Level1);
oTree.addNode(oNode4_Level1);
// Add Tree to the Body
oTree.placeAt(“content”);


 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s