Implementing tree structure in Sapui5 and restricting parent property

Note that sap.ui.model.ClientTreeBinding which is used by TreeTable in JSONModel or XMLModel supports the parameter arrayNames. You need to pass an array of the model property names to create a sublevel. This parameter tells the TreeTable which properties in your data contain child nodes, enabling the hierarchical tree structure.

Implementation Methods

XML View Implementation

In XML view, you can bind the TreeTable rows using the following approach ?

<TreeTable rows="{path: '/pathToData', parameters: { arrayNames: ['children'] } }">
    <!-- TreeTable columns and content go here -->
</TreeTable>

JavaScript Controller Implementation

In the controller or when working programmatically, you can bind the rows using the bindRows method ?

treeTable.bindRows({
    path: '/pathToData', 
    parameters: { 
        arrayNames: ['children'] 
    }
});

Data Structure Requirements

The arrayNames parameter expects your JSON data to have a nested structure where child nodes are contained in arrays. For example, if you use arrayNames: ['children'], your data should look like this ?

{
    "pathToData": [
        {
            "name": "Parent Node 1",
            "children": [
                {
                    "name": "Child Node 1.1"
                },
                {
                    "name": "Child Node 1.2"
                }
            ]
        }
    ]
}

Additional Resources

For more details about SAPUI5 tree structure implementation, you can refer to the official SAPUI5 documentation and examples.

Conclusion

The arrayNames parameter in ClientTreeBinding is essential for creating hierarchical tree structures in SAPUI5 TreeTables. By properly configuring this parameter with your data structure, you can effectively display and manage parent-child relationships in your application.

Updated on: 2026-03-13T18:46:24+05:30

750 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements