Working with Tree Tables in SAP UI5 (Example, with a use case)

Background

This blog aims at presenting the users with one of the possible scenarios of implementing Tree Tables in SAP UI5. After playing around with Tree Tables concept last year I finally decided to pen down my findings in this article. After having browsed multiple sources/links on google and SCN, I found that there was no proper documentation on how to consume the Tree Table UIs. Here I want to consolidate some information which I gathered and a particular way to implement Tree Tables.

In this document I have considered an existing table, which already has structured data which would be very helpful in implementing our own logic and modifying it suitably in a way such that UI can consume this data.

The different layers of technology we would be working on are: CDS, ABAP Backend, and UI.

Tree Tables introduction

For creating tree tables, we need to pass certain mandatory parameters to the SAP UI5 framework. These parameters contain information about the structure of the tree table, i.e. parent-child relationship, hierarchy level etc.

 { "NodeID": 2, "HierarchyLevel": 0, "Description": "2", "ParentNodeID": null, "DrillState": "expanded" },

NodeID: Identifies the node in the tree structure. Every node in the tree has a Node ID.

HierarchyLevel: Identifies the level of the node of the hierarchy. The interesting thing is Hierarchy level starts with ‘0’,’1’,’2’ and so on. If we define the level starting with the root node with value ‘1’,’2’, and so on, the cannot digest the data and we’ll end up with a flat table.

Description: Description about the node.

ParentNodeID: Identifies the Parent Node of the current node. If there is no Parent Node for the node, the value is null.

DrillState: The value should be “expanded” for all parent nodes and “leaf” for all leaf nodes.

Requirement Background

We have a table where most of the required information for creating the Tree Table is given in the Table. Ideally this won’t be the case for the majority of the developers out there. But you can, as described further in the document play around with Code Exits in CDS, adding transient field, etc. to attain your objective.

To display the tree table on the UI you need to have structured information passed to the UI. For our case we have a table which is traditionally used to display the tree table in the ABAP GUI. We can use the same table to display the tree table with some data modification (via CDS), on the UI.

Consider the following table: “Wrf_matgrp_struc”

This tables have most of the data to create the required tree table. But you need to pass it to the UI in an appropriate way so that the UI framework can read the data and display the tree table.

Implementing the Tree Table

WRF_MATGRP_STRUC table details:

case SKU.tree_level when '01' then '0' when '02' then '1' when '03' then '2' else '4' end as tree_level,

3. We need to introduce one new field “DrillState” via CDS which is required on the UI. This field is also required for the UI tree table framework, otherwise the UI would not be rendered. We should be able to include the conversion logic in ABAP Code Exits in CDS. Or if the requirement suggests we can just hard code (just for demo purpose).

 case when SKU.node ='1' or SKU.node='2' then cast( 'expanded' as abap.sstring(10) ) else cast ( 'leaf' as abap.sstring(10) ) end as DrillState,

Now this Table entity will be exposed via OData to the UI. We are ready to consume this data on the UI.

Consuming the Passed data in the UI

If you have a smart template application and you want the Tree Table to be part of a facet you need to create a controller and the corresponding View files in the project.

1.Tree.Controller.js:

var oModel2 = this.getOwnerComponent().getModel(); this.getView().setModel(oModel2);

You need to set the model to the view.

2. Tree.view.xml:

Tree Table rendering on the Smart Template App UI:

https://sapui5.hana.ondemand.com/test-resources/sap/ui/table/testApps/TreeTableOData.html

https://veui5infra.dhcp.wdf.sap.corp:8080/demokit/#/entity/sap.ui.table.TreeTable

https://blogs.sap.com/2015/10/23/treetable-odata-binding/

https://ux.wdf.sap.corp/fiori-design-web/tree-table/

https://blogs.sap.com/2015/10/23/treetable-odata-binding/