Skip to Content
Author's profile photo Former Member

TreeTable in Fiori(Web IDE) for multi level categorization of CRM WebUI

I would like to show tree table in Fiori(Web IDE) using UI5 SDK (sap.ui.table.TreeTable) for multi level categorization of CRM WebUI.

Multi level categorization in CRM WebUI

Multi Level Categorization in CRM WebUI.jpg

do not.jpg

    On previous project, Fiori/UI5 Architecture designed as shown below using multiple Entity types with Navigation, Entity Sets, Function Imports and Select DropDown;

    [Select DropDown in Fiori]

     <Select id=”category1Select” change=”onCategory1Change”></Select>

     <Select id=”category2Select” change=”onCategory2Change”></Select>

     <Select id=”category3Select” change=”onCategory3Change”></Select>

     <Select id=”category4Select” change=”onCategory4Change”></Select>

     <Select id=”category5Select” change=”onCategory5Change”></Select>


     <Select id=”categoryNSelect” change=”onCategoryNChange”></Select>

select dropdown.jpg


entity types.jpg

  Category 1 ->(Navigation)-> Category 2 ->(Navigation)-> Category 3 ->(Navigation)-> Category 4 ->(Navigation)-> Category 5 … ->(Navigation)-> Category N

  It is NOT a good design(solution).

  We DO NOT need to create multiple Entity Types with Navigation

  We DO NOT need to create multiple Entity Sets for each Category level

  We DO NOT need to create multiple Select DropDown for each category level

  We DO NOT need to create javascript for each category changes to populate child categories in each category level


   Here is a simple design(solution).

   I have created below;

     – 1 Structure

     – 1 Entity Type

     – 1 Entity Set

     – 1 Function Imports

     – 1 Execute Action for function import in class DPC_EXT

     – 1 Tree.Table in View.xml

     – javascript to read category OData, transform and populate in Controller.js






     Entity Type 

     Entity type.jpg

     Entity Set 


     Function Import 

     Function Import.jpg

     Function Import Para.jpg

     Execute Action in class DPC_EXT to get Multi Level Categorization entities



     /sap/opu/odata/sap/ZMY_CATEGORY_SCHEMA_SRV/GetAllCategory?SchemaID=’CATEGORY_SCHEMA_TASKS’&Level=’ ‘&$format=json

     NB: If you want to get only certain level, just pass Level=’1′ , Level=’2′  or Level=’10’

     [View.xml in Fiori(Web IDE)]

     <table:TreeTable              id=”TreeTable”






     <m:Button text=”Toggle” press=”onexpandTreeItem”/>

     <m:Button text=”ExpandAll” press=”onexpandTreeItem”/>

     <m:Button text=”CollapseAll” press=”oncollapseTreeItem”/>

     <m:Button text=”Clear” press=”onclearSelectionTreeItem”/>




                    <table:Column width=”10rem”>

     <Label text=”ID”/>


     <table:Column width=”15rem”>

     <Label text=”Description”/>




     [Controller.js in Fiori(Web IDE)]


     onInit: function() {

      // reading OData

     var treeModel = new sap.ui.model.json.JSONModel({});


                                   ‘&$format=json”, null, false );

     this.getView().setModel(treeModel, “treemodel”);

     // transformation : Reference from Mike Dole’s transformation logic

     var deeptreeData = this.treetransformTreeData(data);



     ontoggleTreeItem: function() {},

     onexpandAllTreeItem: function() {},

     oncollapseAllTreeItem: function() {},

     onclearSelectionTreeItem: function() {

          var oTreeTable = this.getView().byId(“TreeTable”);



     Finally, Here is a TreeTable in Fiori(Web IDE) for multi level categorization of CRM WebUI;


     Choose one of category and click the ‘Submit’ button and then populate selected CategoryGuid!!!

     🙂 🙂

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Ted Kwon
      Ted Kwon

      Hi Sam,

      So impressive blog you have revealed in SCN !

      Your solution sheds lights on efficient and time-saving coding rules in association with Gateway Service & Odata.

      - Step by step screenshot is beautiful

      Tree structure or Hierarchical structure has been common topic for Fiori, MDG and Data Migration. for example, Cost Center Hierarchy can be understood by CTE(Recursive common table expressions) framework.


      One question: do you use Web IDE Cloud version or on Premise version ?

      Best Regards, Ted

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Ted,

      I am using Web IDE local for trial (Windows version) and SAP ECC 6 Ehp 7 / CRM 7.0 Ehp 3 system.

      I like Tree structure and I am sure that Tree structure is a good solution for ;

      - Cost Center Hierarchy

      - Organizational Model Structure
      - CRM Categorization

      - MDG Model Entity Hierarchy

      - etc



      Author's profile photo Mike Doyle
      Mike Doyle

      Nice blog Sam.  As long as the tree isn't too big this is a good solution.  It's great to keep things simple!

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks Mike,

      It is very good point.

      Fiori design guide (  says

      Ideally, a tree should have a maximum of four levels, the first two of which should contain the most important items.

      When you use trees, you should choose broad hierarchies over deep hierarchies. Deep hierarchies make finding items more complicated. So try to reduce hierarchical levels where possible, especially if the hierarchy is not natural.

      Also, I have made tree toolbar buttons;
      +, - : Resize tree table size
      Toggle : expand() or collapse() with selected row
      ExpandAll: expand all
      CollapseAll: collapseall()
      Clear: clearselection()

      Filter: filterProperty="fieldname" <example: filterProperty="catid">

      Sort: sortProperty="fieldname" <example: sortProperty="catid">

      NB: Class sap.ui.table.TreeTable do have method expand and do not have ExpandAll;


      Author's profile photo Former Member
      Former Member


      I have a requirement where i should be able to show multi level organization hierarchy using odata services which will be used in a fiori application later.I have created two entity sets and have created an association between them.When I use the $expand i only get a single level hierarchy. What should I do to get a multilevel hierarchy using only two entity sets.Please help.