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

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]

[SEGW]

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

Structure

[SEGW]

Entity Type

Entity Set

Function Import

Execute Action in class DPC_EXT to get Multi Level Categorization entities

[/IWFND/GW_CLIENT]

/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”

rows=”…”

enableSelectAll=”false”

expandFirstLevel=”true”>

<table:toolbar>

<m:Toolbar>

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

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

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

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

</m:Toolbar>

</table:toolbar>

<table:columns>

<table:Column width=”10rem”>

</table:Column>

<table:Column width=”15rem”>

</table:Column>

</table:columns>

</table:TreeTable>

[Controller.js in Fiori(Web IDE)]

onInit: function() {

// reading OData

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

treeModel.loadData(“/sap/opu/odata/sap/ZMY_CATEGORY_SCHEMA_SRV/GetAllCategory?SchemaID=’CATEGORY_SCHEMA_TASKS’&Level=’

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

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

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

http://scn.sap.com/community/developer-center/front-end/blog/2016/05/29/as-easy-as-one-two-tree-simple-mapping-of-tree-table-to-json-model

var deeptreeData = this.treetransformTreeData(data);

this.treesetModelData(deeptreeData);

ontoggleTreeItem: function() {},

onexpandAllTreeItem: function() {},

oncollapseAllTreeItem: function() {},

onclearSelectionTreeItem: function() {

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

oTreeTable.clearSelection();

}

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!!!

🙂 🙂

5 Comments

You must be Logged on to comment or reply to a post.

Ted Kwon June 6, 2016 at 11:39 pm

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.

(https://en.wikipedia.org/wiki/Hierarchical_and_recursive_queries_in_SQL#Common_table_expression)

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

Best Regards, Ted

like (0)
1. Jong Sam Park Post authorJune 7, 2016 at 12:18 am
  
  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
  
  Thanks,
  
  Sam
  
  like (0)
Mike Doyle June 9, 2016 at 10:39 pm

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

like (0)
1. Jong Sam Park Post authorJune 9, 2016 at 11:36 pm
  
  Thanks Mike,
  
  It is very good point.
  
  Fiori design guide (https://experience.sap.com/fiori-design-web/ui-components/tree-table/) 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;
  
  https://openui5.hana.ondemand.com/docs/api/symbols/sap.ui.table.TreeTable.html
  
  Cheers,
  Sam
  
  like (0)
rohan poludasu May 17, 2017 at 4:45 am

hello,

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.

like (0)