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