Skip to Content


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

   [SEGW]

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

/wp-content/uploads/2016/06/do_968103.jpg

   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 

     /wp-content/uploads/2016/06/structure_968104.jpg

     [SEGW]

     /wp-content/uploads/2016/06/segw_968105.jpg

     Entity Type 

     Entity type.jpg

     Entity Set 

     EntitySet.jpg

     Function Import 

     Function Import.jpg

     Function Import Para.jpg

     Execute Action in class DPC_EXT to get Multi Level Categorization entities

     /wp-content/uploads/2016/06/se24_968111.jpg

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

     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;

  /wp-content/uploads/2016/06/webide_968112.jpg

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

     🙂 🙂

To report this post you need to login first.

5 Comments

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

  1. 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.

    (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

    (0) 
    1. Jong Sam Park 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

      Thanks,

      Sam

      (0) 
    1. Jong Sam Park Post author

      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

      (0) 
  2. rohan poludasu

    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.

    (0) 

Leave a Reply