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]
<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>
[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”>
<Label text=”ID”/>
</table:Column>
<table:Column width=”15rem”>
<Label text=”Description”/>
</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
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!!!
🙂 🙂
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
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
Nice blog Sam. As long as the tree isn’t too big this is a good solution. It’s great to keep things simple!
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
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.