Skip to Content
Author's profile photo Ragavendra BR

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

Assigned Tags

      16 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo SAP User narayan
      SAP User narayan

      good job ragavendra.....looking for more such blogs from you..

       

       

       

       

      regards,

      narayan

      Author's profile photo Former Member
      Former Member

      Hery nice,

       

      it helped me a lot in my understanding of using a tree via FPM.

      Author's profile photo Aliaksandr Zhdanovich
      Aliaksandr Zhdanovich

      Useful guide. Thank you.

      Author's profile photo Joseph BERTHE
      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

      Author's profile photo Ragavendra BR
      Ragavendra BR
      Blog 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

      Author's profile photo Anusha Saxena
      Anusha Saxena

      Is there any way to read the personalized configuration of the table in Tree UIBB?

      Author's profile photo Ramakrishnan Murugan
      Ramakrishnan Murugan

      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.

      Author's profile photo Joseph BERTHE
      Joseph BERTHE

      Hello,

       

      Did you force : ev_data_changed = abap_true ?

       

      It is not mandatory but probably your issue comes from here

       

      Regards

      Author's profile photo Ramakrishnan Murugan
      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_data-parent_key      = ls_db-pernr.

             ls_data-is_leaf             = 'X'.

             ls_data-text                 = ls_db-bukrs.

             ls_data-werks               = ls_db-werks.

             ls_data-row_key           = ls_db-uname.

             ls_data-endda           = ls_db-endda.

             ls_data-uname            = ls_db-uname.

             ls_data-begda       = ls_db-begda.

             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.

      Author's profile photo Ragavendra BR
      Ragavendra BR
      Blog 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

      Author's profile photo Ramakrishnan Murugan
      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.

      Author's profile photo Anusha Saxena
      Anusha Saxena

      For the very root node u need to keep the parent key blank. Please check that too.

      Author's profile photo Anusha Saxena
      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?

      Author's profile photo Ricky Orea
      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!

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Sander Boers
      Sander Boers

      Where are steps 4, 5 and 6? Any special ways to create the Web Dynpro itself?

          

      Best, Sander