Tree Use Case - Dynamic Tree

If you have a requirement, whereby the user decides the structure of the tree. For example, you are building a folder-file structure and the user decides how many folders and files are to be present in a tree. This section deals with such a situation.

Drop a Tree widget and 2 buttons (Add File, Add Folder) onto the canvas
Select the Tree widget and specify a Script Variable as dataset property, "treeData"
From the Script tab, use the following script for treeData:

// should be an array of objects consisting of label, icon, children keys // populate the initial data Page.treeData = [{ "label": "folder1", "icon": "fa fa-folder", "children": [] }, { "label": "folder2", "icon": "fa fa-folder", "children": [] }];
Select JavaScript for the onSelect event of the tree widget as:

Page.activeTreeElement = $item;
For the buttons addfile and add folder, select JavaScript for the onClick events and add the following code:

Page.addfileClick = function ($event, widget) { // add file if (Page.activeTreeElement) { if (_.isArray(Page.activeTreeElement.children)) { Page.activeTreeElement.children.push({ "label": "new file", "icon": "fa fa-file" });
```
     }
 }
```
};

Page.addfolderClick = function ($event, widget) { // add folder if (Page.activeTreeElement) { if (_.isArray(Page.activeTreeElement.children)) { Page.activeTreeElement.children.push({ "label": "new folder", "icon": "fa fa-folder", "children": [] });
```
     }
 }
```
};
Preview the page and see two folders given by default. Select one node and click Add File to add files, or Add Folder to add folder.

Tree Widget Cases