Getting Started with FPM BOPF Integration (FBI) Summary
Creating a Tabbed UIBB and Using a Tabbed Exit
Author: Sharon Dassa Company: SAP AG Created on: 20 August 2013
Level of complexity: Beginner Time required for completion: 45 min.
www.sap.com
TABLE OF CONTENTS
INTRODUCTION ............................................................................................................................................... 3
PROPOSED PRE-READINGS AND RELATED DOCUMENTS ...................................................................... 3
SOLUTION SUMMARY ..................................................................................................................................... 3
DETAILED PROCEDURE ................................................................................................................................. 4 Step 1 - Create and Configure a Web Dynpro Application .......................................................................... 4 Step 2 - Create and Configure a Tabbed UIBB ........................................................................................... 10 Step 3 - Using a Tabbed Exit (optional) ....................................................................................................... 14 Create and Configure a Master UIBB for a Tab Configuration ........................................................................ 15 How to Unhide the Tab .................................................................................................................................... 18 Override the Exit Class .................................................................................................................................... 19 Hiding a Tab Using a Condition ....................................................................................................................... 20
Getting Started with FPM BOPF Integration (FBI)
3
INTRODUCTION
Floor Plan Manager (FPM) enables you as the application developer to create modification-free
applications composed of discrete UI Building Blocks (UIBBs). Generic UIBBs (GUIBBs) are
centrally provided UIBBs, in which the application provides the data and layout configuration, while
the rendering is done by the GUIBB.
FPM offers three types of GUIBBs:
Form (FPM_FORM_UIBB)
List (FPM_LIST_UIBB)
Tabbed (FPM_TABBED_UIBB)
Search (FPM_SEARCH_UIBB)
FBI aims to provide generic GUIBB feeder classes for consumer services of BOs in FPM
applications. This enables you to create UI layouts as Web Dynpro configurations for standard
GUIBBs and assemble the discrete GUIBB configurations in an application configuration.
You can use a tabbed UIBB to group together different GUIBBs such as form and list, which can
be stored under tabs that hold related data, allowing for modularity in the design.
This document describes how you as an application developer can create and configure a tabbed
UIBB.
PROPOSED PRE-READINGS AND RELATED DOCUMENTS
Pre-reading
For background information on Floorplan Manager BOPF Integration (FBI), see the
corresponding section on the BOPF Reusables SAP Help page.
SOLUTION SUMMARY
To create and configure a tabbed UIBB, you must first create and configure a Web Dynpro
application. You can use a tabbed UIBB to group together different GUIBBs under tabs that hold
related data which allows for modularity in the design. Because of the modular design of the
tabbed UIBB, GUIBBs can be reused across other component configurations. For example, as part
of the Text Collection reusable UI configuration.
This document describes the following configuration measures:
How to create and configure a Web Dynpro application
How to create and configure a tabbed UIBB
How to use a tabbed exit
How to test the application configuration
Getting Started with FPM BOPF Integration (FBI)
4
DETAILED PROCEDURE
As a prerequisite, you must first create an application business object. To create and configure a
tabbed UIBB execute the following steps:
Step 1 - Create and Configure a Web Dynpro Application
1. In the SAP development system, open a new session and enter the transaction code for the
SE80 Object Navigator transaction.
2. In the navigation area, select Package.
3. Select the /BOFU/DEMO package and click Display ( ).
4. In the context menu of Web Dynpro, navigate to Create > Web Dynpro Application.
5. In the Create Web Dynpro Application dialog, enter an application name and click Continue.
6. In the Create Web Dynpro Application screen, enter the following field values:
Component: FPM_OVP_COMPONENT
Interface View: FPM_WINDOW
Plug Name: DEFAULT
7. Save the Web Dynpro application to the appropriate package.
8. In the context menu of your newly created application, click Create/Change Configuration.
9. In the Change Web Dynpro Application screen, enter in the Configuration ID field the
required value and click New.
10. In the Create Configuration dialog, add a description, if required, and click OK.
11. In the Select Package dialog, select the appropriate package and click OK.
12. To assign the configuration to a Web Dynpro component, in the Application Configuration
screen, click Assign Configuration Name.
13. In the Assign Configuration Name dialog, add your configuration name and click OK. The
configuration name appears as a link.
14. Save the configuration.
15. To configure the newly created component, select the link of the configuration name you
just added.
Getting Started with FPM BOPF Integration (FBI)
5
16. In the Editor for the Web Dynpro ABAP Component Configuration screen, click New.
17. In the Create Configuration dialog, enter any required description and confirm your entry.
18. In the Select Package dialog, enter your required package and confirm your entry.
19. In the Navigation panel (right side of the screen), navigate to New > Initial Page.
20. Choose UIBB and select Form Component.
21. Enter a configuration name and click Configure UIBB.
22. In the new form UIBB screen, General Settings tab, click Feeder Class.
23. In the Edit Feeder Class dialog, enter the feeder class as:
/BOFU/CL_FBI_GUIBB_ALTKEY_FDR and choose Edit Parameters.
24. In the Edit Parameters dialog, enter the following parameters and click OK:
Business Object: Name of the BO which you have referred to; for example,
/BOFU/DEMO_SALES_ORDER
Node: Name of the node; for example, ROOT
Alternate Key: Name of the alternative key you use to query the root node; for example,
ORDER_ID
25. In the Component Configuration screen, Form UIBB Schema pane, navigate to Element >
Add Element at Current Level.
26. In the dialog window select the alternative key element, for example ORDER_ID.
27. Navigate to Element >Element add Button at Current Level.
28. In the Choose Action dialog select FPM_LEAVE_INITIAL_SCREEN.
29. In the Attributes of Button pane (bottom of the screen) fill the Text attribute (e.g. 'OK').
30. Save the UIBB configuration.
Getting Started with FPM BOPF Integration (FBI)
6
31. Return to the Component Configuration screen by clicking the second link below the
toolbar. Click UIBB and select Form Component.
32. Enter a configuration name and click Configure UIBB.
33. In the Edit Feeder Class dialog, enter the /BOFU/CL_FBI_GUIBB_BOOTSTRAP feeder
class and click Edit Parameters.
34. In the Edit Parameters dialog, enter the following parameters and click OK:
Business Object: Name of the BO you have referred to; for example,
/BOFU/DEMO_SALES_ORDER
Node: Name of the node; for example, ROOT
URL Key Provider: /BOFU/CL_FBI_URL_KEYPROVIDER
Pre-Selection Key Provider: /BOFU/CL_FBI_PRSEL_KEYPROVIDER
35. Save the UIBB configuration and return to the Component Configuration screen.
Getting Started with FPM BOPF Integration (FBI)
7
36. Under General Settings, choose Floorplan Settings and select Application Controller
Settings.
37. In the Change Application-Specific Parameters dialog, enter the following parameters and
choose OK:
Web Dynpro Component/Class: /BOFU/WDC_FBI_CONTROLLER
Configuration Name: /BOFU/WDCC_FBI_CONTROLLER_NEW
38. In the Component Configuration screen, Navigation pane, choose the Main Page table row.
39. Click UIBB and select Form Component.
40. Enter a configuration name.
41. Click Configure UIBB.
42. Enter description and save into package.
43. In the Edit Feeder Class dialog, enter /BOFU/CL_FBI_GUIBB_FORM and choose Edit
Parameters.
44. In the Edit Parameters dialog, enter the following feeder parameters and click OK:
Business Object: for example /BOFU/DEMO_SALES_ORDER
Node: for example ROOT
Getting Started with FPM BOPF Integration (FBI)
8
Select the Handles Toolbar checkbox.
45. In the Component Configuration screen, Form UIBB Schema pane, click Element and
select Add Group.
46. In the Attributes pane, enter a text title for the group, for example ‘Sales Order Header’.
47. Choose Element and select Add Element at Current Level.
48. In the Add Fields dialog, select the elements and click OK.
Getting Started with FPM BOPF Integration (FBI)
9
49. Save the UIBB configuration.
50. Return to the Component Configuration screen by clicking the second link below the
toolbar.
51. In the Main Page create another UIBB, choose List Component.
52. Enter a configuration name and click Configure UIBB.
53. Enter description and save into package.
54. In the Edit Feeder Class dialog, enter /BOFU/CL_FBI_GUIBB_LIST and click Edit
Parameters.
55. Enter the following feeder parameters and click OK:
Business Object: for example /BOFU/DEMO_SALES_ORDER
Node: for example ITEM
Getting Started with FPM BOPF Integration (FBI)
10
56. In the Component Configuration screen, List UIBB Schema pane, click Column and select
the columns to display in the list, for example:
57. Save the UIBB configuration.
Step 2 - Create and Configure a Tabbed UIBB
1. Return to the Component Configuration screen by clicking the second link below the
toolbar.
2. Click UIBB and select Tabbed Component.
3. Enter a Configuration ID, save the configuration and click Configure UIBB.
Getting Started with FPM BOPF Integration (FBI)
11
4. Configure the new tabbed UIBB:
Create a dummy form for the tabbed UIBB - click Master UIBB and select Form
Component.
5. Enter the details for the UIBB, save the configuration and choose Configure UIBB.
6. In the Edit Feeder Class dialog, enter /BOFU/CL_FBI_GUIBB_FORM and click Edit
Parameters.
7. In the Edit Parameters dialog, enter the following parameters and click OK:
Business Object: Name of the BO you have referred to; for example,
/BOFU/DEMO_SALES_ORDER
Node: Name of the node; for example, ITEM
8. Save the configuration and return to the tabbed UIBB configuration.
The master UIBB is always a dummy form.
9. Create UIBB Tabs as forms or lists as per your requirements.
Getting Started with FPM BOPF Integration (FBI)
12
In the Attributes of Tab pane fill the Tab Name.
10. Configure UIBBs of the different tabs, specify feeder class and add the elements for each
UIBB.
For example:
Create a tab for sales order item details:
Feeder Class: /BOFU/CL_FBI_GUIBB_FORM
Business Object: /BOFU/DEMO_SALES_ORDER
Node: ITEM
Create a tab for sales order item product details:
Feeder Class: /BOFU/CL_FBI_GUIBB_FORM
Business Object: /BOFU/DEMO_PRODUCTS
Node: ROOT
11. Save the configurations.
12. Create the tabbed UIBB wiring:
a. In the Wire Schema tab, click Graphical Wire Editor.
Getting Started with FPM BOPF Integration (FBI)
13
The wire schema diagram appears on the configuration screen. You can see two parts
of the screen. Under Available UIBBs, there are the GUIBBs you created during the
configuration, and the other part is empty.
b. Connect the master UIBB dummy form and the other Tabs UIBBs.
In the Connector Details dialog, select /BOFU/CL_FBI_CONNECTOR as the connector
class.
For example:
c. Click Done.
The configuration screen appears.
13. Save the component configuration.
14. Go back to the OVP Configuration.
15. Create the OVP Configuration wiring:
a. In the Wire Schema tab, click Graphical Wire Editor.
b. Connect the different UIBBs.
In the Connector Details dialog, select /BOFU/CL_FBI_CONNECTOR as the connector
class.
For example:
The sequence of the wiring: Alt Key > Bootstrap > Main Form > List > Tabbed
Getting Started with FPM BOPF Integration (FBI)
14
c. Click Done.
The configuration screen appears.
16. Save the component configuration.
17. Test your application.
In this example, select a sales order in the initial screen.
Continue to the main screen and check that when selecting a sales order item in the list
UIBB, the correct item and product details are displayed in the tabbed UIBB.
Step 3 - Using a Tabbed Exit (optional)
You can use the /BOFU/WDX_FBI_TABBED_EXIT tabbed exit to enable or disable tabs based on
certain data such as the value of a variable.
For this feature to be used, the tabbed UIBB should be connected to a list UIBB.
In the Overview Page Schema of the Main Page, select the Tabbed UIBB Element and choose
Configure UIBB:
Getting Started with FPM BOPF Integration (FBI)
15
Create and Configure a Master UIBB for a Tab Configuration
1. Select the Tabbed UIBB and select Configure UIBB.
In the Tabbed UIBB Schema tab, click Master UIBB and select Freestyle Component.
Enter a configuration name.
Getting Started with FPM BOPF Integration (FBI)
16
Enter the following Master UIBB details and click Save:
Component: /BOFU/WDC_FBI_TABBED_EXIT
Window Name: W_MAIN
Configuration Name: an appropriate configuration name
2. Choose the tab for which you wish to configure the exit attributes. Keep note of the Tab ID
for the next steps (in this example: TAB_1).
3. For the master UIBB, click Configure UIBB.
4. Navigate to New > tabControl
Fill in the Tab ID (of the tab which you would like to do the configuration for, e.g. in the
above example – TAB_1) and mark Hide if No lead Sel.
5. Select the viewidentity under Configuration context
In the left side fill the BO details, for example:
BO: /BOFU/DEMO_SALES_ORDER
Node: ITEM
Getting Started with FPM BOPF Integration (FBI)
17
6. Add a new model:
Navigate to New > Model
The default exit class is /BOFU/CL_FBI_TABBED_EXIT (therefore it is not mandatory to
specify it)
You can specify a field to be displayed as a dynamic title, for example: PRODUCT_ID
The value of the field will be displayed in runtime as an additional title, for example:
7. Save and return to the tabbed UIBB component configuration screen.
8. In General Settings navigate to GUIBB Settings > Application Controller Settings
Getting Started with FPM BOPF Integration (FBI)
18
Fill the parameters:
Web Dynpro Component/Class: /BOFU/WDC_FBI_TABBED_EXIT
Configuration Name: The configuration name of the tabbed exit Master UIBB
(W_MAIN)
9. Click Save.
10. Create the tabbed UIBB wiring:
a. In the Wire Schema tab, click Graphical Wire Editor.
b. Wire the tabbed exit master UIBB (W_MAIN) to the master dummy form.
c. In the Connector Details dialog, select /BOFU/CL_FBI_CONNECTOR as the
connector class.
For example:
11. Test your application: the tab (in this example TAB_1) should be hidden if there is no line
selected in the item list.
How to Unhide the Tab
1. Select the tabbed exit master UIBB (W_MAIN) and click Configure UIBB.
Getting Started with FPM BOPF Integration (FBI)
19
2. Select tabControl and unmark Hide if No Lead Sel.
3. Click Save.
4. Test your application: verify that the tab is visible now even if no line is selected in the item
list.
Override the Exit Class
The exit class can be inherited and overridden.
For example, to hide a tab:
1. Open transaction SE24 and create a new class (e.g. CL_TABBED_EXIT), with a super
class of: /BOFU/CL_FBI_TABBED_EXIT.
2. Overwrite method OVERRIDE_CONFIG_TABBED:
TRY.
io_tabbed->remove_tab(
EXPORTING
iv_tab_id = 'tab name' "Fill the tab name (e.g.
'TAB_1')
).
CATCH cx_fpm_floorplan.
ENDTRY.
3. Save and activate.
4. Update the tabbed exit class in the Master UIBB (of W_MAIN).
Fill the new exit class that you created (e.g. CL_TABBED_EXIT)
5. Click Save.
6. Test your application: verify the tab is hidden.
Getting Started with FPM BOPF Integration (FBI)
20
Hiding a Tab Using a Condition
1. If you want to hide a tab using a condition based on a certain value:
a. Select the tabControl row
b. Navigate to New > condition (or right click the tabControl and choose the Add >
Condition).
2. Configure the condition by entering the required attributes, for example:
3. Test your application: for this attribute configuration example, the tab will be visible only for
items where AMOUNT_CURR value is INR.
© 2014 SAP AG. All rights reserved.
SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP
BusinessObjects Explorer, StreamWork, SAP HANA, and other SAP
products and services mentioned herein as well as their respective
logos are trademarks or registered trademarks of SAP AG in Germany
and other countries.
Business Objects and the Business Objects logo, BusinessObjects,
Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and
other Business Objects products and services mentioned herein as
well as their respective logos are trademarks or registered trademarks
of Business Objects Software Ltd. Business Objects is an SAP
company.
Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL
Anywhere, and other Sybase products and services mentioned herein
as well as their respective logos are trademarks or registered
trademarks of Sybase Inc. Sybase is an SAP company.
Crossgate, m@gic EDDY, B2B 360°, and B2B 360° Services are
registered trademarks of Crossgate AG in Germany and other
countries. Crossgate is an SAP company.
All other product and service names mentioned are the trademarks of
their respective companies. Data contained in this document serves
informational purposes only. National product specifications may vary.
These materials are subject to change without notice. These materials
are provided by SAP AG and its affiliated companies ("SAP Group")
for informational purposes only, without representation or warranty of
any kind, and SAP Group shall not be liable for errors or omissions
with respect to the materials. The only warranties for SAP Group
products and services are those that are set forth in the express
warranty statements accompanying such products and services, if
any. Nothing herein should be construed as constituting an additional
warranty.
www.sap.com