My earlier blog( http://scn.sap.com/community/erp/hcm/blog/2012/12/29/new-org-chart-functionality) gives a decent introduction on the new features of NAKISA based Org Chart in EHP6 which was purely a “Functional ” blog. This document demonstrates the steps to create a custom application leveraging this Standard Org Chart functionality.
SAP has provided a Standard SAP Component – HIER_VIS_UI_WRAPPER which renders the Org Chart based on the data passed. The Org Chart i.e. Adobe Flash file is attached to this component as MIME Object –
We are going to use the SAP delivered hierarchy – PAO_HIER which has the following definition –
- Create a Web Dynpro Component with the used component as HIER_VIS_UI_WRAPPER(SAP delivered NAKISA Org Chart Rendering component).
- Being a new generation WD ABAP Developer , I started using the FPM Framework in most of my new components. So went ahead implementing the following FPM Interfaces –
- Create Component Controller Attributes for MO_FPM of type IF_FPM and MO_MESSAGE_MANAGER of type IF_FPM_MESSAGE_MANAGER.
- Implement the Interface method FPM_INITIALIZE of the Component Interface – IF_FPM_MULTI_INSTANTIABLE to set the component controller attributes –
wd_this->mo_fpm = io_fpm.
wd_this->mo_message_manager = io_fpm->mo_message_manager.
- Implement the Interface method FPM_IS_MULTI_INSTANTIABLE of the Component Interface – IF_FPM_MULTI_INSTANTIABLE to enable Multiple instantiate option –
rv_is_multi_instantiable = abap_true.
- Implement the Interface method – PROCESS_BEFORE_OUTPUT of the Component Interface – IF_FPM_UI_BUILDING_BLOCK to pass data to the HIER_* Component by calling the interface component –
* Hard code the Object ID for now –
lv_object_key = ’01 P 10002408′.
* Instantiate the Used Component and call the Interface method to start the render the hierarchy –
lo_cmp_usage = wd_this->wd_cpuse_ui_dataprovider( ).
if lo_cmp_usage->has_active_component( ) is initial.
WD_THIS->lo_INTERFACECONTROLLER = wd_this->wd_cpifc_ui_dataprovider( ).
iv_hier_vis_app = ‘PAO_HIER’ “Hierarchy name iv_object_key = lv_object_key ” hier_vis_obj_key
iv_search_relevant = abap_True ” boole_d
iv_selection_required = abap_true ” boole_d
e_ui_on = lv_nakisa_switch ” boole_d ).
- Create a View Container “VCU1″(with Height and Width set as 100%) in the default view created(Make sure you set the Layout of the ROOTUIELEMENTCONTAINER as Grid Layout with height as 700 pixels, “Stretched Horizontally” and “Stretched Vertically” enabled) –
- Embed the Interface View – HRPDV_UI_WRAPPER in the VCU1 in the window definition –
- Create the FPM based application and embed this component as a Freestyle UIBB. Test the application to view the below Org Chart –