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:

           

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_descr–name = ‘PARENT_KEY’.
ls_field_descr–column_type = if_fpm_guibb_constants=>gc_guibb_tree_columns–parent_key.
APPEND ls_field_descr TO et_field_description.

CLEAR ls_field_descr.
ls_field_descr–name = ‘ROW_KEY’.
ls_field_descr–column_type = if_fpm_guibb_constants=>gc_guibb_tree_columns–row_key.
APPEND ls_field_descr TO et_field_description.

CLEAR ls_field_descr.
ls_field_descr–name = ‘TEXT’.
ls_field_descr–column_type = if_fpm_guibb_constants=>gc_guibb_tree_columns–text.
APPEND ls_field_descr TO et_field_description.

CLEAR ls_field_descr.
ls_field_descr–name = ‘EXPANDED’.
ls_field_descr–column_type = if_fpm_guibb_constants=>gc_guibb_tree_columns–expanded.
APPEND ls_field_descr TO et_field_description.

CLEAR ls_field_descr.
ls_field_descr–name = ‘IS_LEAF’.
ls_field_descr–column_type = if_fpm_guibb_constants=>gc_guibb_tree_columns–is_leaf.
APPEND ls_field_descr TO et_field_description.

CLEAR ls_field_descr.
ls_field_descr–name = ‘CHILDREN_LOADED’.
ls_field_descr–column_type = if_fpm_guibb_constants=>gc_guibb_tree_columns–child_load.
APPEND ls_field_descr TO et_field_description.

CLEAR ls_field_descr.
ls_field_descr–name = ‘IMAGE_SRC’.
ls_field_descr–column_type = if_fpm_guibb_constants=>gc_guibb_tree_columns–img_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_data–parent_key      = ls_db–mang_id.
      ls_data–is_leaf             = ls_db–is_leaf1.
      ls_data–text                 = ls_db–name.
      ls_data–name               = ls_db–name.
      ls_data–row_key           = ls_db–emp_id.
      ls_data–mang_id           = ls_db–mang_id.
      ls_data–emp_id             = ls_db–emp_id.
      ls_data–contact_no       = ls_db–contact_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.

    

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

     

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

    

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

    

• Provide description and click on OK.

       

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

             

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

    

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

    

• Provide Name of Configuration and click on Configure UIBB.

    

• Enter description and click on OK

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

• Click on OK

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

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