Cheatsheet to display a hierarchical tree data model using Fiori Elements

[christianjsosa]

Hierarchical tables are defined by there parent-child relationship that link entries with one another. For the general case, hierarchies can be arbitrary deep, wide or contain circular references. Parsing such data model has to be done recursively, which can be quite challenging. In this case we will analyze how we can leverage HANA Native capabilities and Fiori Elements to efficiently read and display a hierarchical table.

Requirement

Currently (July 2023), there's no Fiori equivalent for the SAP Transaction CJ20N displaying the Work Breakdown Structure tree and a simple App is needed to allow browsing the tree on a Fiori Launchpad.

Solution

Identify the data-source with hierarchical data (entries are linked by a parent-child relationship). In our case, the table PRHI will be used.

For Fiori to display a hierarchical data structure, the hierarchy level must be calculated for all rows. There's a very handy HANA native function for this calculation: HIERARCHY( ). To use it we'll need a Table Function[1] implemented by an AMDP.

...



SELECT 

    Object, Parent, Hierarchy_Level, Hierarchy_Tree_Size

    FROM HIERARCHY (

        SOURCE (

	      SELECT 

                Object as node_id, 

                Parent as parent_id

            FROM tab

        )

    )



...

Please bear in mind that the previous SQL Code cannot be used in an ABAP Class. It can only be created in Eclipse as an AMDP.

Create an SEGW Project and reference the hierarchical CDS-View. It is not possible to use the @OData: true annotation or variations, because explicit manupulation of the Model Provider classes is necessary (*_MPC_EXT).

Annotate the entity by redefining the DEFINE() method within the generated *_MPC_EXT Class. These annotations in the sap namespace are required for Fiori to render the hierarchies:

• sap:hierarchy-node-for


• sap:hierarchy-level-for


• sap:hierarchy-parent-node-for


• sap:hierarchy-drill-state-for

They should all point to the ID field, as can be seen in the official code samples for the Tree Table [2]

Publish the service and confirm that the annotations on the sap-namespace were applied correctly.

	<EntityType Name="Node">

		<Key>

			<PropertyRef Name="NodeID" />

		</Key>

		<Property Name="NodeID" Type="Edm.Int32" Nullable="false" edmanno:StoreGeneratedPattern="Identity" sap:hierarchy-node-for="NodeID"/>

		<Property Name="HierarchyLevel" Type="Edm.Int32" Nullable="false" sap:hierarchy-level-for="NodeID"/>

		<Property Name="Description" Type="Edm.String" Nullable="false" MaxLength="40" Unicode="true" FixedLength="false" />

		<Property Name="ParentNodeID" Type="Edm.Int32" Nullable="true" sap:hierarchy-parent-node-for="NodeID"/>

		<Property Name="DrillState" Type="Edm.String" Nullable="false" MaxLength="10" Unicode="true" FixedLength="false" sap:hierarchy-drill-state-for="NodeID" />

	</EntityType>

Generate a new Fiori Elements List Report using the development environment of your choice (Business Application Studio, VS Code or WebIDE) and establish the connection to the previously exposed service. Then configure it to display data as a TreeTable. Otherwise, responsive tables are used by default and these do not support hierarchical data. You can read more about Fiori Elements table types here [3].

Expected hierarchy Tree Table display

Outlook

Special care must be taken to implement filtering capabilities using this approach. Standard Fiori Elements filters only apply to the root nodes within a structure.

There's quite a lot to say about HANA native hierarchy functions. Check out this [4] documentation for a detailed reference of the functions available.

It would not come as a surprise if we saw more Standard Apps featuring this approach, especially considering the need to migrate CJ20N use cases to the web.

References

Fiori Elements- Complex Tree Hierarchical Reports – Challenges & Solution Design Part 2 | SAP Blogs

Fiori Elements Tree Table with SAP Annotations | SAP Blogs

Complex Tree Hierarchical Fiori Elements based List Report – Challenges & Technical Solution Design ...

HIERARCHY Function (Hierarchy Generator) | SAP Help Portal

SAP HANA Hierarchy Developer Guide