How to create FPM Tree UIBB – Detailed steps with screenshots

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.

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

2. Creating feeder class –

1. Go to transaction SE24 and create class ZCL_TREE_UIBB_DEMO.

2. Enter interface IF_FPM_GUIBB_TREE.

3. 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.
4. Add below code to private section of the class and methods.

5. Activate the whole class and method.

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

2. Right click on web-dynpro application node and create a new WD application.

3. Enter Component as ‘FPM_OVP_COMPONENT’ , interface view as FPM_WINDOW and plug name as default.

4. Right click on newly created WD application and go to ‘Create/Change Configuration’. it will open configuration editor in browser window.

5. Enter application configuration ID name for WD application and click on Create button.

6. Click on Goto Compoment Configuration.

7. Click on Create.

8. Save to your package.

9. Configuration editor will show component configuration.

10. Create a Tree UIBB as below.

11. Enter component name, configuration ID and view as below

12. Component configuration does not exist. Click on configuration UIBB.

13. Click on Create button.

14. Save to your package.

15. Enter the feeder class which you created in above steps.

16. Below screen will be displayed.

17. Click on Configure Columns and choose columns which you want to display in tree display.

18. Enter column header names.

19. Finally, save it and test it. Employee records are display in hierarchy.