Creating and Configuring a Tree User Interface Building Block (UIBB)

Creation of UI Structure

1. In an SAP development system, enter transaction SE11. The ABAP Dictionary: Initial Screen appears.

2. Select the Data Type radio button.

3. Enter name for the data type.

4. Choose Create. The Create Type dialog box appears.

5. Select Structure and choose Continue. The Dictionary : Change Structure screen appears.

6. Enter the description in the Short Description field.

7. Enter the following fields in the Component Column:

   Component	Typing Method	Component Type
   PAR_KEY	TYPES	/BOBF/CONF_KEY
   IS_LEAF	TYPES	BOOLEAN
   EXAPNDED	TYPES	BOOLEAN
   IMAGE_SRC	TYPES	FPMGB_IMAGE_SRC
   CHILDREN_LOADED	TYPES	BOOLEAN
   TEXT	TYPES	FPM_TEXT

8. Save and Activate your entries.

Creation of Class to Map UI Structure and BO Node Structure

1. In an SAP development system, enter transaction SE80.

2. In the navigation area select Package.

3. Enter the name of the package in which the class has to be created.

4. Choose Display. The selected package structure appears.

5. Navigate to Class Library.

6. Right-click Class Library and choose Create ->Class. The Create Class dialog box appears.

7. Enter the class name in the Class field.

8. Enter a description.

9. Choose Public in the Instantiation field.

10. Select Usual ABAP Class in the Class Type radio button.

11. Select Final checkbox.

12. Save your entries. The Class Builder screen appears.

Maintaining the Class

1. Choose the Properties tab.

2. Choose the Superclass pushbutton.

3. Enter /BOFU/CL_FBI_VIEW_MAPPER in the Superclass field.

4. Save your entries.

5. Choose Methods tab.

6. Select /BOFU/IF_FBI_VIEW_DATA_MAPPER~MAP_DATA_BO_NODE_TO_UI method.

7. Choose the Redefine pushbutton.

8. Enter the following code in the method.

   FIELD-SYMBOLS:

   <is_ui_data> (Type the UI structure created in the section Creation of UI Structure)

   CALL METHOD Super -> /bofu/if_fbi_view_data_mapper~map_data_bo_node_to_ui

   Exporting

   it_node_data - it_node_data

   IMPORTING

   et_ui_data = et_ui_data

   LOOP AT et_ui_data ASSIGNING <is_ui_data>

   IF <is_ui_data>-par_key = <is_ui_data>-log_parent_key.

   CLEAR <is_ui_data>-log_parent_key.

   ELSE.

   <is_ui_data>-par_key = <is_ui_data>-log_parent_key.

   ENDIF.

   ENDLOOP.

9. Save your entries.

10. Check and Activate the class.

Creating an FBI View for Tree UIBB

1. Create an FBI View. For more information refer to Configuring an FBI View.

2. In the Header tab, enter the following additional details:

   • Node UI Structure — As created in the section Creation of UI Structure.

   • Mapper Class — As created in the section Creation of Class to Map UI Structure and BO Node Structure.

3. Save the FBI view configuration.

Creating a tree UIBB

1. Choose the Main Screen row in the table below the Navigation pane of the component configuration of your application.

2. To create a tree UIBB for the main page, on the Object Instance Schema tab, choose the UIBB button and select Tree Component.

3. Enter the following details for the tree GUIBB:

   • Component: FPM_TREE_UIBB

   • View: TREE_WINDOW

   • Configuration Name: An appropriate configuration name

4. Save your entries.

Configuring a Tree UIBB

1. Choose Configure UIBB.

2. To create the configuration for your UIBB, in the Editor for the Web Dynpro ABAP Component Configuration screen, choose New.

3. In the Create Configuration dialog box, enter the description and confirm your entry.

4. In the Select Package dialog box, enter the package and confirm your entry.

5. In the Edit Feeder Class dialog box, enter the /BOFU/CL_FBI_GUIBB_TREE feeder class and choose Edit Parameters.

6. In the Edit Parameters dialog box, enter the following feeder parameters and choose OK:

   • FBI view name as created in the section Creating an FBI View for Tree UIBB.

   • Select the Handles Toolbar checkbox.

   • Parent Key - LOG_PARENT_KEY

   • Row Key -KEY

   • Expanded -EXAPNDED

   • Is Leaf - IS_LEAF

   • Text -NAME

   • Children Loaded -CHILDREN LOADED

   • Image Source -IMAGE_SRC

7. On the Component Configuration screen, choose the Tree UIBB Schema tab.

8. Choose Column.

9. In the Edit Column dialog box, select the elements to be displayed on the tree and choose OK.

10. Save the tree UIBB configuration.

11. Return to the Component Configuration screen.

Creating Wires in Wiring Schema

1. On the Wire Schema tab, choose the Graphical Wire Editor.

2. Perform the required wiring. For more information, see Creating Wires in Wiring Schema.