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.

WaveMaker Docs

Tree Use Case - Dynamic Tree

See Also