Creating Tree UIBB in FPM application and displaying hierarchical records.
Scenario:
This document explains the step by step procedure to create Tree UIBB and display employee to manager relationship in tree or hierarchical form.
Final expected output:-
Prerequisite:
Knowledge on Object Oriented ABAP and ABAP WebDynpro.
Step by step Procedure: there are three development. 1. Creating Z table 2. Creating Z feeder class 3. Creating FPM WD application with tree UIBB.
- Create a Z table zrs_test – This table is simply a Z table which will store employees and its manager related information in following form.
- Creating feeder class –
1. Go to transaction SE24 and create class ZCL_TREE_UIBB_DEMO.
- Enter interface IF_FPM_GUIBB_TREE.
- Go to each method individually and add one or two blank row to re-implement it. If you don’t do so then once you enter feeder class in FPM configuration editor then the editor will dump.
- Add below code to private section of the class and methods.
- Activate the whole class and method.
- Create FPM Tree application and configuring it:
1.Go to SE80 transaction and enter FPM WD component FPM_OVP_COMPONENT. Expand Web-DynPro application node.
- Right click on web-dynpro application node and create a new WD application.
- Enter Component as ‘FPM_OVP_COMPONENT’ , interface view as FPM_WINDOW and plug name as default.
- Right click on newly created WD application and go to ‘Create/Change Configuration’. it will open configuration editor in browser window.
- Enter application configuration ID name for WD application and click on Create button.
- Click on Goto Compoment Configuration.
- Click on Create.
- Save to your package.
- Configuration editor will show component configuration.
- Create a Tree UIBB as below.
- Enter component name, configuration ID and view as below
- Component configuration does not exist. Click on configuration UIBB.
- Click on Create button.
- Save to your package.
- Enter the feeder class which you created in above steps.
- Below screen will be displayed.
- Click on Configure Columns and choose columns which you want to display in tree display.
- Enter column header names.
- Finally, save it and test it. Employee records are display in hierarchy.
