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]

     <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

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

     🙂 🙂