Skip to Content
0

SAP UI5 Tree in xmlview

Mar 07, 2017 at 08:43 PM

157

avatar image

I nee to migrate an application from javascript.views to xmlviews.

In one view i have an sap.ui.commons.Tree("tree") i am stuck at how to define it

in the xmlview. How do i add the nodes to the tree in the XMLVIEW?

I need to use the treee control and i found that there is an sap.m.tree but there to i am stuck how to add the node data to the view..

I tried

mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:table="sap.ui.table" controllerName="Material.Master_Tree" xmlns:html="http://www.w3.org/1999/xhtml">

<App>

<pages>

<Page title="Title">

<content> <Label text=Mat/>

<Tree id="Tree" items="{Tree>/nodes/}">

<StandardTreeItem title="{Tree>Text}"/>

</Tree>

</content>

</Page> </pages>

</App> </mvc:View>

Modeldata is

var Nodes ={ "nodes": [ { "ID": "O100","Text": "Software Development","ParentID": "", "Type": "O" }, { "ID": "O110","Text": "Team A","ParentID": "O100", "Type": "O" }, { "ID": "S111","Text": "Product Owner","ParentID": "O110", "Type": "S" }, } ] };

var Tree = new JSONModel(Nodes);

Tree.setDefaultBindingMode("OneWay");

If i do i that way i only get a list not a tree repesentation of the data.

Any Advice?

Regards

Dirk

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
Nabi Zamani Mar 08, 2017 at 07:32 AM
0

Hi Dirk,

sap.ui.commons is deprecated and you should not mix them with sap.m, so it's a good idea to use sap.m.Tree. I'm sure yo have checked the corresponding example in the explored.

The reason why you get only a list is because the sap.m.Tree does not know how to discover the "hierarchy", i.e. the relation betweeen the nodes. Furthermore, all you have is a simple list of objects. If you check the JSON Data for the Tree - Basic explored example then you will see that the JSON data actually has a real tree structure. Change your data to the following or have a look at this jsbin live demo:

var oNodes = { 
    "nodes": [{
        "ID": "O100",
        "Text": "Software Development",
        "ParentID": "",
        "Type": "O",
        "nodes" : [{
            "ID": "O110",
            "Text": "Team A",
            "ParentID": "O100",
            "Type": "O",
            "nodes" : [{
                "ID": "S111",
                "Text": "Product Owner",
                "ParentID": "O110",
                "Type": "S"
            }]
        }]
    }]
};

Best,
Nabi

Share
10 |10000 characters needed characters left characters exceeded