Professional Documents
Culture Documents
Getting Started With FPM BOPF Integration
Getting Started With FPM BOPF Integration
Summary
This tutorial aims to provide you with the basic knowledge on how to create a simple FPM (Floor Plan
Manager) application UI based on a BOPF (Business Object Processing Framework) BO (Business Object).
The UI will consist of a form to display header data, and a list to display item details.
Level of complexity:
Time required for completion:
Author:
Company:
Created on:
Beginner
45 min.
Matan Taranto
SAP AG
20 August 2013
TABLE OF CONTENTS
BEFORE YOU START ...................................................................................................................................... 3
Objectives ......................................................................................................................................................... 3
Prerequisites ...................................................................................................................................................... 3
Systems, releases,and authorizations ............................................................................................................... 3
Knowledge ......................................................................................................................................................... 3
CREATE AND CONFIGURE THE FPM APPLICATION .................................................................................. 4
Procedure ......................................................................................................................................................... 4
Launch FPM creation wizard in FPM_WB ......................................................................................................... 4
Configure the Web Dynpro / FPM Application ................................................................................................... 4
Assign Package and Transport Request ........................................................................................................... 4
Result ................................................................................................................................................................ 5
CONFIGURE THE INITIAL SCREEN ............................................................................................................... 6
Prerequisites .................................................................................................................................................... 6
Procedure ......................................................................................................................................................... 8
Create a New Initial Screen ............................................................................................................................... 8
Create a Form UIBB for selecting the Sales Order Instance............................................................................. 8
Configure the Form UIBB .................................................................................................................................. 9
Configure the form UIBB Schema ................................................................................................................... 10
Configure the Actions of the initial screen ....................................................................................................... 11
Create and configure a Form UIBB for the bootstrap ...................................................................................... 12
Test the initial screen configuration ................................................................................................................. 13
Result .............................................................................................................................................................. 14
CONFIGURE THE MAIN SCREEN ................................................................................................................. 15
Procedure ....................................................................................................................................................... 15
Create and configure the form UIBB for the main screen ............................................................................... 15
Create and configure the list UIBB for the main screen .................................................................................. 16
Test the screen configuration .......................................................................................................................... 18
Result .............................................................................................................................................................. 18
CONFIGURE THE WIRING............................................................................................................................. 19
Procedure ....................................................................................................................................................... 19
Wire the initial screen ...................................................................................................................................... 19
Wire the main screen ....................................................................................................................................... 20
Test the configuration ...................................................................................................................................... 21
Result .............................................................................................................................................................. 22
The application is based on the business object /BOFU/DEMO_SALES_ORDER. We need data from the
ROOT and ITEM nodes. The nodes are connected via the composition association ITEM.
Prerequisites
In order to be able to perform the Getting Started, the following prerequisites have to be fulfilled:
Knowledge
Understanding BOPF data models from a consumption perspective
Procedure
Launch FPM creation wizard in FPM_WB
The transaction FPM_WB provides the design time for creating FPM applications. To get an initial
configuration of the underlying Web Dynpro application, it offers wizards for dedicated purposes. In the
context of FBI, choose the Wizard for Creating Empty FPM Applications.
Result
You have created a Web Dynpro / FPM Application, with an application configuration and an OVP
component configuration.
Prerequisites
You can access the configuration tool either from the result page of the wizard or in the ABAP Workbench
SE80. In the result page simply select the link Edit Configuration (FLUID) and continue with the steps
described in the next paragraph.
Or you use the ABAP Workbench: Start the transaction SE80, select the local objects for your user id and
expand the Folder Web Dynpro and the subfolder Application Configurations. Select your application
configuration created in the previous step via double click. Start the Configuration Tool with the button Start
Configurator.
Continue with the button Continue in Change Mode on the next screen.
On the following screen, you see the default settings of your application created by the FPM creation wizard.
To start with your configuration, select the configuration name.
Procedure
Either via the launch from the result page of the creation wizard or from SE80, you start the configuration on
the Component Configuration screen.
Now you should link it to the BOPF data model: press the Edit Parameters button.
Enter the the business object as /BOFU/DEMO_SALES_ORDER, the node as ROOT and the alternate key
as ORDER_ID. Then confirm the data entered with the OK button.
10
In the following popup the available fields are displayed and you can select the one you want to position on
the screen. In the case of alternate keys, the list is restricted to the alternate keys defined in the BOPF
model. Choose it and confirm the selection.
Take care the row for the element ORDER_ID is selected. Under Action Assignment, select the FPM event
ID as FPM_LEAVE_INITIAL_SCREEN(). This function will close the window after having entered a value in
ORDER_ID and pressed the return key.
Save your settings.
11
Return to the component configuration by selecting the OVP link in the breadcrumb navigation.
12
Return to the component configuration screen by selecting the OVP link in the breadcrumb navigation. Open
the General Settings section, choose the Floorplan Settings menu and select Application Controller
Settings.
13
Result
You have configured and tested the initial screen of your application with a form UI building block to select
the sales order by id.
14
Procedure
Select the component configuration screen as described in the prerequisites of the preceding chapter. Select
the main page in the navigation pane.
Create and configure the form UIBB for the main screen
Repeat the steps as described in the preceding chapter to create a form UI building block.
Click the UIBB menu button and select Form Component. Enter the configuration Id as
Z<nn>_SO_HEADER. Click the Configure UIBB button. Confirm the popup to save the configuration. Enter
a description and assign the configuration to your local objects.
Enter the form feeder class /BOFU/CL_FBI_GUIBB_FORM in the feeder class popup. Select the Edit
Parameters button to enter the feeder class parameters. Since you want to display Sales Order Header
data, fill the business object as /BOFU/DEMO_SALES_ORDER and the node as ROOT.
Confirm the entries with the OK button.
15
The tool prompts you to define the schema of the form UIBB. Now add a group to the form by choosing the
menu button Element and selecting the function Add Group. To define the fields displayed in the form,
choose again the menu button Element and select Add Elements at Next Level.
A popup shows you the fields of the root node. Select the ones you want to be displayed on your page. You
may use ORDER_ID, CUSTOMER_ID, AMOUNT and AMOUNT_CURR. Confirm your selection with the OK
button.
On the next screen, you can change the order of the fields using the Up and Down buttons for a selected
field.
You have now configured your Form UIBB. Save the configuration and return to the component configuration
screen by selecting the OVP link in the breadcrump navigation .
Create and configure the list UIBB for the main screen
16
You will now create and configure the list UIBB for the items. Take care that the main page is still selected in
the navigation pane.
To create the list UIBB, choose the List Component in the menu button UIBB in the Overview Page
Schema tab. Enter the configuration id as Z<nn>_SO_ITEMS, the component as FPM_LIST_UIBB and the
window name as LIST_WINDOW. Press the Configure UIBB button and confirm the save request. Enter a
description and assign the configuration to your local objects.
For the list UIBB, use the feeder class /BOFU/CL_FBI_GUIBB_LIST and edit the feeder parameters. Fill the
business object as /BOFU/DEMO_SALES_ORDER and the node as ITEM. Confirm the entries with the OK
button.
The system prompts you to the List UIBB Schema tab to define the columns of the table. Choose the
Column button.
17
The list of the fields of the ITEM node is displayed. Select all fields and confirm the popup with the OK
button. You can change the order of the table columns. Save your configuration and return to the component
configuration by selection the OVP link in the breadcrumb navigation.
Result
You have now configured the main screen to display the sales order header in a form and the items in a list.
18
Procedure
Return to the component configuration screen by clicking the OVP link in the breadcrumb navigation and
select the Wire Schema tab. Use the Graphical Wire Editor.
All building blocks are displayed in the left pane with their connection points for the wiring and data flow.
There are different types of outports to each UIBB (lead selection,
selection and collection), the use of each outport should be decided according to the essence of the
wire.
19
20
Continue with wiring the items list with the header form: drag the items list to the right pane and draw an
arrow from the collection outport of the header form to the inport of the items list. Use the connector class
/BOFU/CL_FBI_CONNECTOR as before.
Up to now only data from the root node was used. Now you will access data of the item node. For this you
will have to specifiy how the root node data is related with the item's data. FBI can navigate in the business
object by following associations modeled in BOPF. Therefor you should enter the relevant association name.
In this case it is the composition association from ROOT node to ITEM node , named ITEM. Confirm the
configuration with the OK button.
The wiring is now completed, therefore click the Done button in the toolbar. Back on the component
configuration, save the data.
21
Result
You have now configured and tested your application and got some insights in the principles of FPM. FBI is
the adapter between FPM and BOPF. If you want to continue with the FPM UI technology, we recommend
you to learn more about FPM. In this guide we only touched very few basic principles and features.
22
www.sap.com