Skip to Content

SAP UI5 Tree in xmlview

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="">



<Page title="Title">

<content> <Label text=Mat/>

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

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



</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);


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

Any Advice?



Add comment
10|10000 characters needed characters exceeded

1 Answer

  • Best Answer
    Posted on Mar 08, 2017 at 07:32 AM

    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"


    Add comment
    10|10000 characters needed characters exceeded