Monday 4 May 2015

Steps to Create Tree UIBB

 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.
TYPESBEGIN OF t_st.
              INCLUDE STRUCTURE ls_wa.
TYPESemp_id(10TYPE c ,
              name(20TYPE c,
              contact_no(10TYPE n,
              mang_id(10TYPE c,
              is_leaf1(1TYPE c,
          END OF t_st.
  TYPEStt_st TYPE TABLE OF t_st.

Implementation of get_defination  method

METHOD if_fpm_guibb_tree~get_definition.

DATAlt_itab             TYPE   tt_st,  
           ls_field_descr   TYPE   fpmgb_s_treefield_descr.

*** add structure
eo_field_catalog ?= cl_abap_tabledescr=>describe_by_datap_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.
     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.
     config.png
  • Provide Application Configuration ID and click on New button to create.
     app.png
  • Provide description and click on OK.
        discr.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.
     save.png
  • To create Tree UIBB click in UIBB button choice and select Tree component.
     11.jpg
  • Provide Name of Configuration and click on Configure UIBB.
     8.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
3.jpg
  • Click on OK
5.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.
6.jpg
  • Save the application.
  • To Run the application right click on the application create and select test.
7.jpg