on 04-18-2013 3:05 PM
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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
| User | Count |
|---|---|
| 3 | |
| 3 | |
| 2 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 | |
| 1 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.