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:
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.
good job ragavendra.....looking for more such blogs from you..
regards,
narayan
Hery nice,
it helped me a lot in my understanding of using a tree via FPM.
Useful guide. Thank you.
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
Is there any way to read the personalized configuration of the table in Tree UIBB?
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.
Hello,
Did you force : ev_data_changed = abap_true ?
It is not mandatory but probably your issue comes from here
Regards
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.
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
Dear Raga,
No, still am not getting the data in output table.
But in debugging, CT_DATA is being filled. Do I need to change some other thing????
BR,
RAM.
For the very root node u need to keep the parent key blank. Please check that too.
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
Where are steps 4, 5 and 6? Any special ways to create the Web Dynpro itself?
Best, Sander