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

[former_member241300]

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 <framework> 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:



This table contains the details about the structure of the hierarchy. We can see that there is information about the hierarchy level of the tree, and the parent-child relationship. From the parent column we can see that Node 5, and Node 6 both have a common parent: Node 2. All these information are required to be passed on to the UI.

 

Using the Table data in CDS view and modifying it to suit our needs

We need to do the following steps so that the data is suitably passed to be consumed in the UI:

1. Include all the relevant fields in the CDS view which you want to expose to the UI.

2. We see that in our table, the “tree_level” field contains values as 01,02,03 and so on. We need to convert these values correspondingly to 0,1,2, and so on. If you pass the tree levels in any other format the tree table framework in UI won’t be able to recognize it and the tree table would not be rendered. You can do this either in CDS or better via ABAP Code Exit classes.

      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:

 

	<TreeTable id="treeTable" selectionMode="Single" rowSelectionChange="onSelect" enableColumnReordering="false" expandFirstLevel="true" editable="true"

		rows="{ path:'to_PROD', parameters : 

		{ countMode: 'Inline', treeAnnotationProperties : 

		{ hierarchyLevelFor : 'tree_level', hierarchyNodeFor : 'Node', hierarchyParentNodeFor : 'parent', hierarchyDrillStateFor : 'DrillState' } } }">

				<toolbar>

					<m:Toolbar>

						<m:Title id="title2" text="Nodes"></m:Title>

						<m:ToolbarSpacer/>

						<m:SearchField

							placeholder="Filter"

							value="search"

							search="filterPrice"

							width="15rem"/>

						<m:Button id="editButton3" text="Edit" type="Transparent" press="onEdit" />	

						<m:Button id="editButton4" text="MakeEditable" type="Transparent" press="onMakeEditable" />	

						

					</m:Toolbar>

				</toolbar>	

		<columns>

			<Column label="Hierarchy Levels" >

				<template>

					<m:Input value="{Node}" enabled="false"/>

				</template>

			</Column>

			<Column label="tree_level" id="id_level0" filterProperty="tree_level" showFilterMenuEntry="true" defaultFilterOperator="EQ">

				<template>

					<m:Input value="{tree_level}"  enabled="false"/>

				</template>

			</Column>

			<Column label="Valid From">

				<template>

					<m:Input value="{date_from2}"  enabled="false"/>

				</template>

			</Column>

			<Column label="Valid To">

				<template>

					<m:Input value="{date_to}"  enabled="false"/>

				</template>

			</Column>

			<Column label="parent">

				<template>

					<m:Input value="{parent}"  enabled="false"/>

				</template>

			</Column>

			<Column label="DrillState" id="id_drill0" filterProperty="DrillState" showFilterMenuEntry="true" defaultFilterOperator="EQ">

				<template>

					<m:Input value="{DrillState}"  enabled="false"/>

				</template>

			</Column>

			<Column label="MainFlag">

				<template>

					<m:Input value="{mainflg}"  enabled="false"/>

				</template>

			</Column>

			

			

			

		</columns>

	</TreeTable>

 

Tree Table rendering on the Smart Template App UI:



 

Possible Further steps

We can also modify the Tree Tables like any other UI5 element. Some possible actions would include, based on your requirements:

1. Making a single row editable based on certain requirements.


2. Rebinding the table with the data.


3. Editing specific elements/cells of the Tree Table.

 

Reference/Important Links

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

http://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/