Skip to Content

Introduction

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.

Quick Background

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 –

/wp-content/uploads/2012/12/p1_170208.jpg

We are going to use the SAP delivered hierarchy – PAO_HIER which has the following definition –

/wp-content/uploads/2012/12/p2_170209.jpg

Steps


  • Create a Web Dynpro Component with the used component as HIER_VIS_UI_WRAPPER(SAP delivered NAKISA Org Chart Rendering component).

/wp-content/uploads/2012/12/p3_170210.jpg

  • 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 –

/wp-content/uploads/2012/12/p4_170211.jpg

  • 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.
           lo_cmp_usage
->create_component( ).
         
endif.

          WD_THIS->lo_INTERFACECONTROLLER =   wd_this->wd_cpifc_ui_dataprovider( ).
          WD_THIS
->lo_interfacecontroller->reset_application(
               
EXPORTING     

                    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
               
IMPORTING
                    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) –

/wp-content/uploads/2012/12/p5_170214.jpg                                                  

  • Embed the Interface View – HRPDV_UI_WRAPPER in the VCU1 in the window definition –

/wp-content/uploads/2012/12/p6_170215.jpg

  • Create the FPM based application and embed this component as a Freestyle UIBB. Test the application to view the below Org Chart –

/wp-content/uploads/2012/12/p7_170216.jpg

To report this post you need to login first.

11 Comments

You must be Logged on to comment or reply to a post.

  1. Former Member

    Nice document Kuncham… 🙂

    I was trying to create a component following your document but I am getting an error message  “Unable to locate node in hierarchy“.

    Whereas I checked that details of the position that I am providing in the code has relationship to another.

    Regards,

    Sounak Ghosh

    (0) 
    1. Former Member Post author

      Hi Sounak,

      Thanks for your comment. Well, May i ask you if you have replaced the PERNR with the PERNR in your system ? If so, could you try to debugging the method PROCESS_BEFORE_OUTPUT method to see if there is any issue during the execution of the method –

      WD_THIS->lo_interfacecontroller->reset_application(
                     
      EXPORTING    

                          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
                     
      IMPORTING
                          e_ui_on
      =       lv_nakisa_switch                  ” boole_d ).

      Let me know your findings.

      Thanks

      Raja / Kuncham 🙂

      (0) 
      1. Former Member Post author

        Sounak,

        Also you want to make sure that you would have to either of the following components installed –

        1. EMBORGCH Add-on

        2. HR Renewal Components

        Thanks

        Kuncham

        (0) 
    2. Former Member Post author

      Hi Sounak,

      Thanks for your comment. Well, May i ask you if you have replaced the PERNR with the PERNR in your system ? If so, could you try to debugging the method PROCESS_BEFORE_OUTPUT method to see if there is any issue during the execution of the method –

      WD_THIS->lo_interfacecontroller->reset_application(
                     
      EXPORTING    

                          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
                     
      IMPORTING
                          e_ui_on
      =       lv_nakisa_switch                  ” boole_d ).

      Let me know your findings.

      Thanks

      Raja / Kuncham 🙂

      (0) 
  2. Former Member

    Hi all,

    i tried to get the PAO_HIER to work in a Z_WDA. To my pitty it didn’t work.

    Now my question: is it possible to use the component in an WDA without the FPM or POWL stuff. Just by using initializing it in the WDDOINIT or WDDOMODIFYVIEW?

    I put the Wrapper an the Dataprovider-Interface in the componenten Controller and the VIew. I linked the Compontents in the Windows to the ViewContainer but after syntax-check and testing the applikation i am geeting an errormessege saying “configuration missing for component”.

    Maybe someone can help on this?

    (0) 
    1. Former Member

      Hi Felix,

      If you want to test the Nakisa plugin, you could pass ‘HIERVISDEMO’ in iv_hier_vis_app.

      For a list of available hierarchies, you could look at View Cluster VC_HIER_VIS and VC_HIER_VIS_C.

      Best Regards,

      Zen

      (0) 
  3. Former Member

    I followed the steps as detailed in this blog and have encountered this error now:

    ERROR: Error in FLASH_ISLAND “ROOTUIELEMENTCONTAINER” of view “HIER_VIS_UI_WRAPPER.FLASH_VIEW”: Value “” is not permitted for property swfFile (termination: RABAX_STATE)

    Anyone can help to identify the cause of this issue?

    (0) 
  4. Former Member

    Hi Raja Sekhar,

    Thank you for your Excellent post.

    Would you please share the steps to Creat FPM based application and embeding this component as a Freestyle UIBB.

    I followed all the steps provided in this post. Instead of PROCESS_BEFORE_OUTPUT I have added the logic in WDDOINIT ( wd_this->lo_interfacecontroller->reset_application ) to test stand alone, data has been read but data not displayed.

    If you could share the Steps to FPM configuration that would be great help.

    Thanks,
    Ram.

     

    (0) 

Leave a Reply