getting started with fpm bopf integration (fbi)

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

http://help.sap.com/saphelp_cei110/helpdata/en/03/1c7fb2a6fe409da7fd5e3a405854a7/frameset.htm


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.


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.


6

31. Return to the Component Configuration screen by clicking the second link below the

toolbar. Click UIBB and select Form Component.


33. In the Edit Feeder Class dialog, enter the /BOFU/CL_FBI_GUIBB_BOOTSTRAP feeder

class and click Edit Parameters.


Business Object: Name of the BO you have referred to; for example,


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.


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


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.


9



toolbar.

51. In the Main Page create another UIBB, choose List Component.


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


10

56. In the Component Configuration screen, List UIBB Schema pane, click Column and select

the columns to display in the list, for example:


Step 2 - Create and Configure a Tabbed UIBB


toolbar.

2. Click UIBB and select Tabbed Component.

3. Enter a Configuration ID, save the configuration and click Configure UIBB.


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.


Business Object: Name of the BO you have referred to; for example,


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.


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.


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:


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


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:


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.


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


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


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:


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.


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.


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

getting started with fpm bopf integration (fbi)

Documents