Fiori Elements Tree Table with SAP Annotations

[SumitKundu]

Purpose:

This blog is to show an example of how to show hierarchical data in a tree table by utilizing Fiori Elements (List Report template) using ABAP CDS views.

Example Scenario:

The case at hand is to show a list of purchase orders with their different versions (i.e. revisions) in a Tree table. Different versions of purchase order will be displayed as a subordinate node in a tree table. 

Figure 1 shows the example fiori app: first version (Rev. column value = 0) is the parent node and next versions (Rev. column value > 0)  are the children nodes.



Figure 1 : Purchase Orders app w Hierarchy

 

Preparation:

Like any application built using ABAP programming model for SAP Fiori, the data model has to be finalized before anything else.

The entity data model of the example scenario is depicted in the figure below.



Figure 2 : Entity Data Model depicted

The root entity is based on a consumption CDS view ZCDS_C_USER which has an association to intermediate CDS view ZCDS_I_ORDER_PO_HEADER.

ZCDS_C_USER is to show only the purchase orders the user is entitled to see.

Note: This is just a sample to illustrate the hierarchy annotation approach I have built, the root entity is not mandatory or important here.

The purchase order entity has below properties among others:

Property	Use
Id	This is the key field of the entity => unique for each node (including parent and child)
ParentId	This field will act as a link on the current child entity node to the parent entity node. In other words, this property will hold the value of key field 'Id' of the parent entity node
HierLevel	This property will hold the depth of the node. In the sample, we are having two levels only but this can be according to your requirement. For example, 0 => Root node and 1 => Child node
DrillDownState	This property will determine whether the node will be expanded or collapsed by default on the UI. leaf => Collapsed, i.e. the OData service will not fetch the data of children nodes yet expanded => nodes are expanded on UI and OData will have fetched the data of children nodes

Steps:

1. CDS view has the business logic to select purchase orders. Among other properties in projection list, CDS view has also the fields stated above. Below is a snippet of CDS view ZCDS_I_ORDER_PO_HEADER:

2. The ABAP CDS entity will be used in OData service. In this case, we have used 'Reference Data Source' approach to create the OData service in SEGW because we need to add following 'sap' annotations in metadata. Please refer to this blog by andre.fischer for detailed steps.



3. Next we add following code in the method 'DEFINE' of the model provider class (...MPC_EXT)

...



super->define( ).



...



* To create hierarchical CDS

    lr_entity = model->get_entity_type( iv_entity_name = 'ZCDS_I_ORDER_PO_HEADERType' ).

    IF lr_entity IS  BOUND.

      lr_property = lr_entity->get_property( iv_property_name = 'ID' ).

      lr_annotation = lr_property->/iwbep/if_mgw_odata_annotatabl~create_annotation(

                             iv_annotation_namespace =  /iwbep/if_mgw_med_odata_types=>gc_sap_namespace ).

      lr_annotation->add(

          iv_key      = 'hierarchy-node-for' "/IWBEP/IF_ANA_ODATA_TYPES=>GCS_ANA_ODATA_ANNOTATION_KEY–hierarchy_node_for

          iv_value    = 'ID' ).







      lr_property = lr_entity->get_property( iv_property_name = 'HierLevel' ).

      lr_annotation = lr_property->/iwbep/if_mgw_odata_annotatabl~create_annotation(

                             iv_annotation_namespace =  /iwbep/if_mgw_med_odata_types=>gc_sap_namespace ).

      lr_annotation->add(

          iv_key      =  'hierarchy-level-for'"/IWBEP/IF_ANA_ODATA_TYPES=>GCS_ANA_ODATA_ANNOTATION_KEY–hierarchy_node_for

          iv_value    = 'ID' ).





      lr_property = lr_entity->get_property( iv_property_name = 'ParentId'  ).

      lr_annotation = lr_property->/iwbep/if_mgw_odata_annotatabl~create_annotation(

                              iv_annotation_namespace =  /iwbep/if_mgw_med_odata_types=>gc_sap_namespace ).

      lr_annotation->add(

          iv_key      = 'hierarchy-parent-node-for'

          iv_value    = 'ID' ).





      lr_property = lr_entity->get_property( iv_property_name = 'DrillDownState'  ).

      lr_annotation = lr_property->/iwbep/if_mgw_odata_annotatabl~create_annotation(

                              iv_annotation_namespace =  /iwbep/if_mgw_med_odata_types=>gc_sap_namespace ).

      lr_annotation->add(

          iv_key      = 'hierarchy-drill-state-for'

          iv_value    = 'ID' ).



    ENDIF.

For details on sap annotation for OData refer to this page.

5. This will result in a metadata which will like below:

6. Now that OData service is ready, we simply create the UI5 app by using Fiori Elements List Report.

Please follow the following blogs by jocelyn.dart for detailed steps.

Fiori Elements – How to develop a List Report – Basic Approach

Fiori Elements – How to Develop a List Report – Using Local Annotations

Please set the 'tableType' property of list page as 'TreeTable' in manifest.json created from the 'Fiori List Report' template as shown below.

"sap.ui.generic.app": {

		"_version": "1.3.0",

		"settings": {},

		"pages": {

			"ListReport|ZCDS_I_ORDER_PO_HEADER": {

				"entitySet": "ZCDS_I_ORDER_PO_HEADER",

				"component": {

					"name": "sap.suite.ui.generic.template.ListReport",

					"list": true,

					"settings": {

						"smartVariantManagement": true,

						"tableType": "TreeTable"

					}

				},

....

}

 

Voila! We are done. The UI5 app will recognize the SAP annotations and will render the tree table nicely.