Step 3. Smart TreeTable UI for Hierarchies

For space requirements this blog has been split in 4 parts:

In continuation to previous blog define the analytical query using CDS here I will create a smart TreeTable UI for hierarchies display.

Define the main application view. For this, open view HierarchyView.view.xml, and replace its content by this code:

<mvc:View controllerName="ZHierarchy.controller.HierarchyView" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
 xmlns:layout="sap.ui.layout" xmlns:table="sap.ui.table" xmlns:smarttable="sap.ui.comp.smarttable"
 xmlns:smartfilterbar="sap.ui.comp.smartfilterbar">
 <App>
  <pages>
   <Page title="{i18n>title}">
    <content>
     <VBox fitContainer="true">
      <smartfilterbar:SmartFilterBar id="SmartFilterBar" entitySet="ZEMH_C_EMPLOYEEQUERY3">
       <smartfilterbar:controlConfiguration>
        <smartfilterbar:ControlConfiguration key="CostCenter" index="1" groupId="_BASIC" />
          </smartfilterbar:controlConfiguration>           
      </smartfilterbar:SmartFilterBar>
      <smarttable:SmartTable id="smartTable_org_hier" smartFilterId="SmartFilterBar" visible="true" entitySet="ZEMH_C_EMPLOYEEQUERY3" class="sapFioriListReportSmartTable"
       header="Manager Employee Hierarchy"
       tableBindingPath="/ZEMH_C_EMPLOYEEQUERY3" beforeRebindTable="onBeforeRebindTable"
       enableAutoBinding="false" useVariantManagement="false" showVariantManagement="false" useTablePersonalisation="true">
       <table:TreeTable id="hierTable_org_hier" rootLevel="0"
         selectionMode="Single"
        visibleRowCount="20" visibleRowCountMode="Fixed">
       </table:TreeTable>
      </smarttable:SmartTable>
     </VBox>
    </content>
   </Page>
  </pages>
 </App>
</mvc:View>

Define a controller(HierarchyView.controller.js) for this view. It is needed, because currently this is the only way to specify certain control Parameters to the TreeTable binding . Replace its content by this code

sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";

	return Controller.extend("ZHierarchy.controller.HierarchyView", {
 onBeforeRebindTable: function(oEvent) { 
           var oBindingParams = oEvent.getParameter("bindingParams");
    
           oBindingParams.parameters.threshold = 50000;
           oBindingParams.parameters.countMode = 'Inline';
           oBindingParams.parameters.operationMode = 'Server';
           oBindingParams.parameters.numberOfExpandedLevels = 1;
       }
	});
});

Now development is done ready to run the application :

The application UI shows a filter bar with a costcenter field for data selection and a table below that will display matching employees in a tree. Press Go to fetch the entire hierarchy of manger employee.

From the settings button you can personalize the default attributes. Result shows employee’s hierarchy with cost center and utilization measure , it has a Cost center smart filter as well.

Form the series of blogs you got to now step by step procedure of evaluating hierarchies in S/4 HANA analytics.

Below are the others blogs which you can refer for better understanding of hierarchies in S/4

Hierarchies in CDS VIews

How to consume a hierarchy in CDS view analytical query

How to build a custom hierarchy in ABAP CDS Views

Hope this series of blogs are helpful 🙂

Your suggestions, feedback, comments on this blog are most welcome.