First of all, I would like to explain some libraries to Display tree
- sap: hierarchy-node-for
- sap: hierarchy-level-for
- sap: hierarchy-parent-node-for
- sap: hierarchy-drill-state-for
Requirement
We had a requirement to display the projects and WBS Element information that is created in CJ20N Transaction in the Tree format, it felt quite challenging when I tried the first time. We have to display the WBS elements based on respected projects using OData annotations.
Let’s begin with an example,
I have used simple data to display in a tree
Data base tables: zabdemonode
Define your data base table
@EndUserText.label : 'Node structure of a simple tree'
@AbapCatalog.enhancementCategory : #NOT_CLASSIFIED
@AbapCatalog.tableCategory : #TRANSPARENT
@AbapCatalog.deliveryClass : #A
@AbapCatalog.dataMaintenance : #RESTRICTED
define table zabdemonode {
key mandt : mandt not null;
key node_key : tv_nodekey not null;
relatkey : tv_nodekey;
isfolder : as4flag;
expander : as4flag;
text : text40;
seq_no : abap.char(5);
}
I have prepared some test data statically to display
After defining your CDS view, here I have defined the view using one base view.
@AbapCatalog.viewEnhancementCategory: [#NONE]
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Hierarchy Display'
@Metadata.ignorePropagatedAnnotations: true
@ObjectModel.usageType:{
serviceQuality: #X,
sizeCategory: #S,
dataClass: #MIXED
}
@Search.searchable: true
define root view entity zc_hierarchy_demo
as select from zi_hierarchy_demo
{
@UI.facet: [{ id: 'ID1',type: #IDENTIFICATION_REFERENCE,position: 10,label: 'Project Details' }]
@UI:{lineItem: [{ position: 20,label: 'WBS Element ID'}],
identification: [{ position: 10,label: 'WBS Element ID' }],
selectionField: [{ position: 20 }]}
@EndUserText.label: 'Project'
@Search:{defaultSearchElement: true,fuzzinessThreshold: 0.9,ranking: #MEDIUM}
key NODE_KEY,
@UI:{lineItem: [{ position: 50,label: 'Relative Key' }],
identification: [{ position: 20,label: 'Reference WBS Element ID' }]}
@Consumption.valueHelpDefinition: [{ entity:{name: 'ZI_hierarchy_view',element: 'NODE_KEY'} }]
@Search:{defaultSearchElement: true,fuzzinessThreshold: 0.9,ranking: #MEDIUM}
RELATKEY
@UI.lineItem: [{ position: 30,label: 'OpenFolder' }]
ISFOLDER,
@UI:{lineItem: [{ position: 40,label: 'ExpanderCheck'}]}
EXPANDER,
@UI:{lineItem: [{ position: 10,type: #WITH_URL,label: 'WBS Element'}],selectionField: [{ position: 30 }],identification: [{ position: 30,label: 'WBS Element' }]}
@EndUserText.label: 'WBS Element'
@Consumption.valueHelpDefinition: [{ entity:{name: 'ZI_Dimension_view',element: 'TEXT'} }]
TEXT as Name,
@UI:{lineItem: [{ position: 50,label: 'Drill Down State' }],identification: [{ position: 40,label: 'Drill Down State' }]}
@Consumption.valueHelpDefinition: [{ entity:{name: 'zi_get_sqno',element: 'Number1'} }]
seq_no as SeqNo,
@UI.lineItem: [{ type: #FOR_ACTION,dataAction: 'View',label: 'View' }
cast('expanded' as abap.char( 285 )) as drill_state
}
Once you activate the view by following the Gateway Builder (SEGW) transaction create your project.
Then define your entities by using CDS view
It asks you the CDS view name in the pop-up screen enter your view click on next then define your key field there and click on the finish button
after you define the entity generate artifacts by clicking the button ‘Generate Runtime Artifacts’
once done open your MPC_EXT class and redefine the Define method to define the annotation code based
Follow the below code to Specifies the hierarchy annotation for a specific field
method define.
super->define( ).
data :lr_entity type ref to /iwbep/if_mgw_odata_entity_typ.
data :lr_property type ref to /iwbep/if_mgw_odata_property.
data :lr_annno type ref to /iwbep/if_mgw_odata_annotation.
lr_entity = model->get_entity_type( iv_entity_name = 'zc_hierarchy_demoType' ).
if lr_entity is bound.
lr_property = lr_entity->get_property( iv_property_name = 'NODE_KEY' ).
lr_annno=lr_property->/iwbep/if_mgw_odata_annotatabl~create_annotation( iv_annotation_namespace = /iwbep/if_mgw_med_odata_types=>gc_sap_namespace ).
lr_annno->add( iv_key = /iwbep/if_ana_odata_types=>gcs_ana_odata_annotation_key-hierarchy_node_for iv_value = 'NODE_KEY' ).
lr_property = lr_entity->get_property( iv_property_name = 'SeqNo' ).
lr_annno=lr_property
>/iwbep/if_mgw_odata_annotatabl~create_annotation( iv_annotation_namespace = /iwbep/if_mgw_med_odata_types=>gc_sap_namespace ).
lr_annno->add( iv_key = /iwbep/if_ana_odata_types=>gcs_ana_odata_annotation_key-hierarchy_level_for iv_value = 'NODE_KEY' ).
lr_property = lr_entity->get_property( iv_property_name = 'RELATKEY' ).
lr_annno=lr_property-
>/iwbep/if_mgw_odata_annotatabl~create_annotation( iv_annotation_namespace = /iwbep/if_mgw_med_odata_types=>gc_sap_namespace ).
lr_annno->add( iv_key = /iwbep/if_ana_odata_types=>gcs_ana_odata_annotation_key-hierarchy_parent_node_for iv_value = 'NODE_KEY' ).
lr_property = lr_entity->get_property( iv_property_name = 'drill_state' ).
lr_annno=lr_property->/iwbep/if_mgw_odata_annotatabl~create_annotation( iv_annotation_namespace = /iwbep/if_mgw_med_odata_types=>gc_sap_namespace ).
lr_annno->add(iv_key=/iwbep/if_ana_odata_types=>gcs_ana_odata_annotation_key-hierarchy_drill_state_for iv_value = 'NODE_KEY' ).
endif.
endmethod.
After Save (Ctlr+s) and Activate (Ctrl+F3) MPC_EXT and Generate your artifacts. Once done register your service and generate the metadata, here in the metadata file, you can notice one thing, the property that you have mentioned for hierarchy should display.
If not, the tree table will not display your hierarchy.
Let’s create a Fiori Application
Before starting the process, make sure to have the extension packages in VS code then only we can create the Fiori app.
Open VS Code Goto view in the menu and click on command palette(ctrl+shift+P), after search
Fiori: Open Application Generator; it will open the template Wizard
Select one template based on your requirement
Then Connect your backend system
If you are not registered you have to register your backend system else you can go with OData service directly.
After providing your OData service name and clicking on the next button
Then select your main entity and provide the project name after clicking on the Finish button
Then it will install some required dependencies for the Fiori Application, once done it will open the application info inside and click on ‘open page map’
Inside that edit your object page then click on the table option. It will open some properties related to the list report page there you have to change the type of your table.
After previewing your application you can see the expected outcomes
Conclusion:
this requirement helps in displaying the Hierarchy format using the Tree table in the Fiori application.
Hope I find it will we be helpful. If any queries please welcome on comment sections.
Note: All the images shown in this blog are the snapshots that are taken from my PC.
Regards,
Srinivasa M R
- SAP Managed Tags:
