UI5 Tree binding issue

[stanislav_lvovsky]

Hi Experts,

I have a problem displaying nodes in a tree.

Users of my tree should be able to add and remove nodes.

The tree must has only 2 levels, first level always has the same nodes. The second level nodes could be added or deleted by a user.

My model looks like this:

var model = {[

     {

          "displayName" : "runner 1",

          "id" : "runner_1",

          "configs": [

               {

                    "displayName": "config 11",

                     "id": "config_11",

                    "settings" : {}

               },

               {

                    "displayName": "config 12",

                     "id": "config_12",

                     "settings" : {}

               }

          ]

     },

     {

          "displayName" : "runner 2",

          "id" : "runner_2",

          "configs": [

               {

                    "displayName": "config 21",

                     "id": "config_21",

                    "settings" : {}

               },

               {

                    "displayName": "config 22",

                     "id": "config_22",

                      "settings" : {}

               }

          ]

     }

]}

After binding the model to the tree every things looks great except that there 3 levels in the tree (settings child is displayed).

My binding code looks like this:

        var oTreeNodeTemplate = new sap.ui.commons.TreeNode();

        oTreeNodeTamplate.bindProperty("text", "displayName");

        this.oRunConfigurationTree.bindAggregation("nodes", "/oRunners", oTreeNodeTemplate);

In order to remove the third level i did a trick that worked. When i build the model for the first time or adding/removing a second level node i run the following code:

         1. add "displayName" = "__filtered__" attribute to each "settings" object.

         2. var oFilter = new sap.ui.model.Filter("displayName", sap.ui.model.FilterOperator.NE, "__filtered__");

         3.  this.getView().oRunConfigurationTree.getBinding("nodes").filter([oFilter]);

Is it the right approach to remove objects that should not be displayed in a tree ?

Can i somehow restrict a ui5 tree to show only 2 levels of nodes ?

Regards,

Slavik

[former_member182372 · Accepted solution]

What`s your concern? Approach works.

There is one more way to filter tree . not sure why there is no javadoc for JSONTreeBinding but there is an option to pass names of array to parameters of binding

	* @param {object}
	*         [mParameters=null] additional model specific parameters (optional)
	*         If the mParameter <code>arrayNames</code> is specified with an array of string names this names will be checked against the tree data structure
	*         and the found data in this array is included in the tree but only if also the parent array is included.
	*         If this parameter is not specified then all found arrays in the data structure are bound.
	*         If the tree data structure doesn't contain an array you don't have to specify this parameter.

this.oRunConfigurationTree.bindAggregation("nodes",

{

path : "/oRunners",

template : oTreeNodeTemplate,

parameters : { arrayNames : ['configs', 'oRunners'] }

}

);

[stanislav_lvovsky · Accepted solution]

Hi Maksim,

I tried this approach but it does not work. My tree is not shown and i cannot see any error messages in console.

Regards,

Slavik.

[former_member182372 · Accepted solution]

not quite sure what do you mean by "does not work"

http://jsbin.com/vokonafoma/1/edit?html,output

[stanislav_lvovsky · Accepted solution]

Hi Maksim,

Thank you very much. Works great and is much faster than my solution.

Regards,

Slavik.