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:
Steps:
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)
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.
Voila! We are done. The UI5 app will recognize the SAP annotations and will render the tree table nicely.
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:
- 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.
- SAP Managed Tags:
20 Comments
