UI5- Tree

UI5-  Simple Tree

 

 

---

Create a UI5 project in Eclipse. 

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

---

---

Build Tree Nodes and add the nodes to the tree.

---

---

Build more nodes and add those to tree.

---

---

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

---

---

---

---

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

---

---

---

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”);

---