Skip to Content

Introduction:


     This is a generic design template for displaying data in a hierarchical list or tree that is implemented using the Web Dynpro component FPM_TREE_UIBB. we use this design template in application specific views (UIBB) where we want to display data in a hierarchical list or tree.

Structure

       A hierarchical list is structured as follows:

Master Column: The master column displays all the items in a list. When the system first displays a table, each top-level, parent item in the master column is preceded by an Expand or Collapse icon, which allows you to see the child (sub) items contained within it. A top-level item in the master column without child items has no Expand or Collapse icon preceding it.

Non-master columns: These columns display the details of each list item.

Rows: Each item in a list is displayed in a separate row.

Toolbar: A toolbar displays the Collapse All and Expand All buttons (if selected) and other buttons that you have created.

Step 1: Create a database table as below or use existing data base table.

Sample Data in Database:

        DB.png   

Step 2: Creating Feeder class:

Create a class with interface IF_FPM_GUIBB_TREE.

Create structure and table type in types tab

PRIVATE SECTION.
DATA ls_wa TYPE fpmgb_s_tree_master_column.
TYPES: BEGIN OF t_st.
              INCLUDE STRUCTURE ls_wa.
TYPES: emp_id(10) TYPE c ,
              name(20) TYPE c,
              contact_no(10) TYPE n,
              mang_id(10) TYPE c,
              is_leaf1(1) TYPE c,

          END OF t_st.

  TYPES: tt_st TYPE TABLE OF t_st.

Implementation of get_defination  method

METHOD if_fpm_guibb_tree~get_definition.

DATA: lt_itab             TYPE   tt_st
           ls_field_descr   TYPE   fpmgb_s_treefield_descr.

*** add structure
eo_field_catalog ?= cl_abap_tabledescr=>describe_by_data( p_data = lt_itab ).

****set property of fields
CLEAR ls_field_descr.
ls_field_descrname = ‘PARENT_KEY’.
ls_field_descrcolumn_type = if_fpm_guibb_constants=>gc_guibb_tree_columnsparent_key.
APPEND ls_field_descr TO et_field_description.

CLEAR ls_field_descr.
ls_field_descrname = ‘ROW_KEY’.
ls_field_descrcolumn_type = if_fpm_guibb_constants=>gc_guibb_tree_columnsrow_key.
APPEND ls_field_descr TO et_field_description.

CLEAR ls_field_descr.
ls_field_descrname = ‘TEXT’.
ls_field_descrcolumn_type = if_fpm_guibb_constants=>gc_guibb_tree_columnstext.
APPEND ls_field_descr TO et_field_description.

CLEAR ls_field_descr.
ls_field_descrname = ‘EXPANDED’.
ls_field_descrcolumn_type = if_fpm_guibb_constants=>gc_guibb_tree_columnsexpanded.
APPEND ls_field_descr TO et_field_description.

CLEAR ls_field_descr.
ls_field_descrname = ‘IS_LEAF’.
ls_field_descrcolumn_type = if_fpm_guibb_constants=>gc_guibb_tree_columnsis_leaf.
APPEND ls_field_descr TO et_field_description.

CLEAR ls_field_descr.
ls_field_descrname = ‘CHILDREN_LOADED’.
ls_field_descrcolumn_type = if_fpm_guibb_constants=>gc_guibb_tree_columnschild_load.
APPEND ls_field_descr TO et_field_description.

CLEAR ls_field_descr.
ls_field_descrname = ‘IMAGE_SRC’.
ls_field_descrcolumn_type = if_fpm_guibb_constants=>gc_guibb_tree_columnsimg_src.
APPEND ls_field_descr TO et_field_description.

ENDMETHOD.

Implementing of get_data method

METHOD if_fpm_guibb_tree~get_data.
DATA  : lt_data TYPE tt_st,
              ls_data TYPE t_st,
              lt_db TYPE TABLE OF zrt_test ,
              ls_db TYPE zrt_test.

IF io_event->mv_event_id = ‘FPM_START’.
**** fecthing data from DB
SELECT * FROM zrt_test INTO TABLE lt_db.

**** addigning to internal table
LOOP AT lt_db INTO ls_db.
      ls_dataparent_key      = ls_dbmang_id.
      ls_datais_leaf             = ls_dbis_leaf1.
      ls_datatext                 = ls_dbname.
      ls_dataname               = ls_dbname.
      ls_datarow_key           = ls_dbemp_id.
      ls_datamang_id           = ls_dbmang_id.
      ls_dataemp_id             = ls_dbemp_id.
      ls_datacontact_no       = ls_dbcontact_no.
APPEND ls_data TO lt_data.
ENDLOOP.
**** assign value to ct_data
ct_data = lt_data.
ENDIF.

ENDMETHOD.

Steps 3: Involve in creating a FPM Application

  • Goto Tcode SE80 and select your Package to create FPM Application.
  • Right click on WebDynpro Application and Create Web Dynpro Application.
  • Provide Name of Application and description and click on ok.

     Application.png

  • Provide Name of FPM Standard Component (Here We are creating and  FPM_OVP_COMPONENT).
  • Interface view FPM_WINDOW and plug name is DEFAULT.

      OVP.png

  • Right click On Application created and choose Create/Change configuration.

     /wp-content/uploads/2013/05/config_212688.png

  • Provide Application Configuration ID and click on New button to create.

     /wp-content/uploads/2013/05/app_212689.png

  • Provide description and click on OK.

        /wp-content/uploads/2013/05/discr_212693.png

  • Click on Assign Configuration Name and enter the configuration ID and click on OK.

              application config.png

  • Click on newly create configuration name to configure.
  • Provide description and Save the configuration.

     /wp-content/uploads/2013/05/save_212695.png

  • To create Tree UIBB click in UIBB button choice and select Tree component.

     /wp-content/uploads/2013/05/11_212735.jpg

  • Provide Name of Configuration and click on Configure UIBB.

     /wp-content/uploads/2013/05/8_212734.jpg

  • Enter description and click on OK

Untitled-1 copy.jpg

  • In the Next step It will ask for Feeder class provide name of feeder class and click on Edit Parameter

/wp-content/uploads/2013/05/3_212726.jpg

  • Click on OK

/wp-content/uploads/2013/05/5_212728.jpg

  • To add column use Column button under Tree UIBB Schema tab and select the column which have to added to UI and click on OK.

/wp-content/uploads/2013/05/6_212732.jpg

  • Save the application.
  • To Run the application right click on the application create and select test.

/wp-content/uploads/2013/05/7_212733.jpg

To report this post you need to login first.

16 Comments

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

  1. Joseph BERTHE

    Nice, thanks for this blog.

     

    Just a little modification in the GET_DATA method. To show up the data into the output table we have to add this peace of code :

     

    ev_data_changed = abap_true.

     

    Kind regards

    (0) 
    1. Ragavendra BR Post author

      Hi Joseph BERTHE,

       

      ev_data_changed = abap_true is not required if the data is loaded for first time .i.e. io_event->mv_event_id = ‘FPM_START’.

       

      but if you change data after the event ‘FPM_START’ then you should make ev_data_changed = abap_true.

       

      Regards,

      Ragavendra

      (0) 
      1. Ramakrishnan Murugan

        Hi Joseph,

         

        Yes am doing it. But still I didn’t get the output table records.

         

        **** addigning to internal table

             LOOP AT lt_db INTO ls_db.

               ls_dataparent_key      = ls_dbpernr.

               ls_datais_leaf             = ‘X’.

               ls_datatext                 = ls_dbbukrs.

               ls_datawerks               = ls_dbwerks.

               ls_datarow_key           = ls_dbuname.

               ls_dataendda           = ls_dbendda.

               ls_datauname            = ls_dbuname.

               ls_databegda       = ls_dbbegda.

               APPEND ls_data TO lt_data.

             ENDLOOP.

        **** assign value to ct_data

             ct_data = lt_data.

         

        ev_data_changed = abap_true.


        In debugging, I can able to get all the values. Don’t know what is the problem.



        BR,

        RAM.

        (0) 
        1. Ragavendra BR Post author

          Hi Ram,

           

          Check with the parent_key field data and is_leaf is always ‘X’ according to your code (is_leaf = ‘X’ if the record is not having any child node).

           

          or try to insert only one line item and execute the application.

           

          Regards,

          Ragavendra

          (0) 
          1. Ramakrishnan Murugan

            Dear Raga,

             

            No, still am not getting the data in output table.

             

            Debugger.png

             

            But in debugging, CT_DATA is being filled. Do I need to change some other thing????

             

             

            BR,

            RAM.

            (0) 
  2. Anusha Saxena

    I have built the tree UIBB dynamically, however I am unable to find any parameter in the provided interfaces IF_FPM_GUIBB_TREE  to set the ‘default buttons set’ setting in the program to display the standard toolbar buttons for expand all and collapse function.

     

    The set_settings( ) method of Interface IF_FPM_GUIBB_TREE_CONFIG has a parameter

    IV_SUPPRESS_SELECTION_BUTTONS but it does not cause any changes.

     

    Please let me know if there is any way to enable these standard button which I have missed to check?

    (0) 
  3. Ricky Orea

    hi there, how do you code if you added the collapse all and expand all buttons, I cant find any example out there.

     

    I was able to add the buttons but I don’t know what to code when the events are triggered.

     

    thanks very much!

    (0) 
  4. Sheetanshu Gautam

    Hey Ricky,

    Implement process event method of your tree GUIBB  feeder class to handle Button event. Then in the event handler refresh your tree with removing values for EXPANDED attribute . EXPANDED field of tree determines if the hierarchy needs to be expanded or collapse.

     

    Thanks

    Sheetanshu

    (0) 

Leave a Reply