Step 3. Smart TreeTable UI for Hierarchies

[pavankumar_reddy90]

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

Link	Content
Hierarchy evaluation using CDS Table Function	Hierarchy evaluation using CDS Table Function in S/4
Step 1 – Hierarchies in S/4 HANA  Analytics	Step 1 – Hierarchies in S/4 HANA  Analytics
Step 2 – Define the Analytical Query CDS View	Step 2 – Define the Analytical Query CDS View
This part	Step 3 – Smart Tree Table UI for Hierarchies

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.