Skip to Content

Step by Step guide to create a simple FPM Tree UIBB application

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

16 Comments
You must be Logged on to comment or reply to a post.
  • 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

    • 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

  • Hi Raga,

     

    Have followed the exact logic from you, but am not getting the data displayed in the output table.

     

    Am I missing anything???

     

     

    BR,

    RAM.

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

        • 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

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

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

  • 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