cancel
Showing results for 
Search instead for 
Did you mean: 

Tree and json data binding

former_member226851
Participant
0 Kudos

Hi Everyone!

I have a following json file:

{

          "mTypes": [ {

                              "name" : "TYPE1",

                              "description" : "TYPE1_desc",

                              "details": [

                                                  {

                            "mName": "ITEM1",

                            "mDescription": "ITEM1_desc",

                            "mDetails": {

                                                                 "mNumber": "1",

                                            "mValue": "2"

                                                       }

                                       },             

                                       {

                                            "mName": "ITEM2",

                                               "mDescription": "ITEM2_desc",

                            "mDetails": {

                                                                 "mNumber": "3",

                                                            "mValue": "4"

                                                       }

                                       }  

                                       ]

                              },

                              {

                              "name" : "TYPE2",

                              "description" : "TYPE2_desc",

                              "details": [

                                                  {

                                                "mName": "ITEM3",

                                                 "mDescription": "ITEM3_desc",

                                                "mDetails": {

                                                                "mNumber": "5",

                                           "mValue": "6"

                                                       }

                                       },             

                                       {

                                              "mName": "ITEM4",

                                                 "mDescription": "ITEM4_desc",

                               "mDetails": {

                                                            "mNumber": "7",

                                                      "mValue": "8"

                                                       }

                                       }  

                                       ]

                              }

                              ]                   

}

How to create correct template to bind "name" as a root nodes, and "mDescription" as subnodes into tree element? Are there two different templates needed or only one?

I did something like that:

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

                    oNodeTemplate.bindProperty("text", "name");

                    oNodeTemplate.setExpanded(true);

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

                    oSubNodeTemplate.bindProperty("text", "mDescription");

         oNodeTemplate.insertNode(oSubNodeTemplate);

                    // Aggregation to tree

                    oTree.bindAggregation("nodes", {

                              path : "/",

                              template : oNodeTemplate,

                              parameters : {

                                        arrayNames : ["mTypes","details"]

                              }

                    });

But It doesn't work properly (please find attached files).

I've attached files with currently tree look, and how it should look like.

I'll be very grateful for any help you can provide!

Tomasz Sobkowiak

Accepted Solutions (1)

Accepted Solutions (1)

former_member104694
Participant
0 Kudos

Hi Tomasz,

If you keep the names in your JSON file consistent you only need the one template. You can try the below JSON string and remove the logic for oSubNodeTemplate - you should get your desired result (all I've done is change your subitems to use the consistent name ("name") which is bound to your template)...

{

          "mTypes": [ {

                              "name" : "TYPE1",

                              "description" : "TYPE1_desc",

                              "details": [

                                                  {

                            "name": "ITEM1",

                            "mDescription": "ITEM1_desc",

                            "mDetails": {

                                                                 "name": "1",

                                            "mValue": "2"

                                                       }

                                       },            

                                       {

                                            "name": "ITEM2",

                                               "mDescription": "ITEM2_desc",

                            "mDetails": {

                                                                 "mNumber": "3",

                                                            "name": "4"

                                                       }

                                       } 

                                       ]

                              },

                              {

                              "name" : "TYPE2",

                              "description" : "TYPE2_desc",

                              "details": [

                                                  {

                                                "name": "ITEM3",

                                                 "mDescription": "ITEM3_desc",

                                                "mDetails": {

                                                                "mNumber": "5",

                                           "name": "6"

                                                       }

                                       },            

                                       {

                                              "name": "ITEM4",

                                                 "mDescription": "ITEM4_desc",

                               "mDetails": {

                                                            "mNumber": "7",

                                                      "name": "8"

                                                       }

                                       } 

                                       ]

                              }

                              ]                  

};

So if you want the description to display in the tree insetad of ITEM1/ITEM2/etc you will need to change the naming around.

Hope this helps.

Regards,

Ian

former_member226851
Participant
0 Kudos

Hi Ian,

thank you for your help. You're right, if I keep on each levels the same name ("name") it works fine, but the thing is, that I would like to have different names, because in future I going to change json model to something else, where those names aren't the same. Currently I'm using the 1.8.6 version of SAPUI5, maybe on higher version it is easiest to do this?

I'm looking forward for another good advice.

Best Regards,

Tomasz

former_member104694
Participant
0 Kudos

Hi Tomasz,

One way you could achieve this is by using the factory function of the bindAggregation method to return the template for each element which exists in your list, then use additional logic to figure out which level is being processed and specify the name to bind based on this. For example, if you use your original JSON data, you could define your tree as follows...

var oTree = new sap.ui.commons.Tree("tree").placeAt("content");

oTree.bindAggregation("nodes","/mTypes",function(sId,oContext){

           var treePath = oContext.getPath();

           var bindTextName = '';

           if(treePath.indexOf("mDetails") !== -1) {

                     bindTextName = "mValue";

           } else if(treePath.indexOf("details") !== -1) {

                     bindTextName = "mDescription";

           } else {

                     bindTextName = "name";

           }

           return new sap.ui.commons.TreeNode().bindProperty("text",bindTextName);

});

Keep in mind that if you ever change the definition in your JSON data, or add more levels, you will need to come back and change this code.

Hope this helps.

Regards,

Ian

former_member226851
Participant
0 Kudos

Hi Ian,

I'm very grateful for your help, your solution is great and it has resolved my issue!

Best regards,

Tomasz

Answers (0)