Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
former_member215610
Active Participant

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.


16 Comments
Labels in this area