Getting Started with FPM BOPF Integrationdocshare04.docshare.tips/files/20984/209842775.pdf · · 2017-03-04Getting Started with FPM BOPF Integration. ... BOPF and 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.

Author: Matan Taranto Company: SAP AG Created on: 20 August 2013

Level of complexity: Beginner Time required for completion: 45 min.

Getting Started with FPM BOPF Integration

2

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


3

BEFORE YOU START

Objectives

By the end of this Getting Started, you will be able to:

Create an FPM Application on top of a BOPF business object

Configure the Application initial screen (see fig. 1)

Configure a main screen with header section, and Item list section (see fig. 2)

Configure the wire schema of the application

Fig 1: Intitial Screen Fig 2: Main Screen

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.

Fig. 31: Business Object used in this guide

Prerequisites In order to be able to perform the Getting Started, the following prerequisites have to be fulfilled:

Systems, releases,and authorizations BOPF and FPM-BOPF Integration (FBI) are part of the Business Suite Foundation Layer, and therefore

included in the following SAP Business Suite releases:

SAP Business Suite EHP6, SP05

SAP Business Suite EHP7, any SP

For creation of an FPM UI, your SAP user should have the S_DEVELOP authorization

Knowledge Understanding BOPF data models from a consumption perspective


4

CREATE AND CONFIGURE THE FPM APPLICATION

In this step, you will create a sample FPM application keeping your pages together.

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.

Fig. 4: FPM Workbench

Configure the Web Dynpro / FPM Application In the first step you have to provide the Web Dynpro Application name and description. As we will display sales orders, use the name SALES_ORDER. Assign a namespace, which will be applied for all entities created in the application. For test purposes use the prefix Z<nn>_, nn being your initials to avoid naming conflicts. Last but not least, you have to select a predefined floorplan. FPM provides three main floorplans:

OIF – Object Instance Floorplan

GAF – Guided Activity Floorplan

OVP – Overview Page Floorplan. We will use the Overview Page Floorplan. With the selection the names for the derived components are proposed.

Fig. 5: Web Dynpro Application

Assign Package and Transport Request Click Next and the wizard will guide you to the package and transport request page. To start with, assign the components to your Local Objects in using the package $TMP and click Save.


5

Fig. 6: Package and Transport Request

Result

You have created a Web Dynpro / FPM Application, with an application configuration and an OVP component configuration.

Fig. 7: FPM Creation Wizard Result Message


6

CONFIGURE THE INITIAL SCREEN

In this step you will create the initial screen of your application. The target of this screen is to select the sales order to be displayed in the main screen. FPM provides reuse components with which you can compose your floorplans. These components are called Generic UI Building Blocks (GUIBB). In the following steps you will compose the initial screen with a form GUIBB and configure it.

Fig. 8: Initial Screen Building Block

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.


7

Fig. 9: FLUID Tool in the ABAP workbench

Continue with the button Continue in Change Mode on the next screen.

Fig. 10: Editor for the Web Dynpro Application Configuration

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.

Fig. 11: Configuration Selection


8

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.

Create a New Initial Screen The main page of our application has already been created by the wizard. Create another page for the initial screen by choosing Initial Screen in the drop down menu of the New button.

Fig. 12: Component Configuration Screen

Create a Form UIBB for selecting the Sales Order Instance Creating the initial screen already proposes a section and a new UIBB. To create it, you have to enter the UIBB component. As it is a form UIBB, use the generic FPM building block FPM_FORM_UIBB. The Window Name is FORM_WINDOW. Last but not least, you have to name the configuration of the reuse component in Configuration ID, use Z<nn>_SO_INITIAL_SCREEN. Save the screen (an error message will be displayed since this new UIBB configuration has not yet been created, still you can save the screen despite this error message).

Fig. 13 Form UI Building Block


9

Configure the Form UIBB

Take care that the row of the UIBB is selected. The button Configure UIBB is active now. Press this

button, and enter a description on the following popup to create the UIBB Configuration.

Fig. 14: UIBB Configuration

Assign the configuration to your local objects on the following screen. Then you are requested to enter the feeder class. The feeder class is responsible for the data mapping from the UI building block to the backend, so it is the link to your BOPF data model. FBI provides you with generic feeder classes, so that you do not have to program the mapping again and again. The business object name is a parameter of the feeder class. In this example we you need a feeder to select the ID of the Sales Order to be displayed in the main screen. Feeder class /BOFU/CL_FBI_GUIBB_ALTKEY_FDR, is a feeder class for simplified form, that exposes only alternative keys (in this example the Order ID).

Fig. 15: Feeder Class

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

Fig. 16: Feeder Class Parameters

Configure the form UIBB Schema Confirming the parameter popup guides you to the Form UIBB Schema tab where you define the screen elements. Choose the menu button Element and select Add Group.

Fig. 17: Element Group in the form

A new group is created; the corresponding row in the table is selected. Take care that the group is still selected, choose the menu button Child Element and select Add Elements to Group.


11

Fig. 18: Elements of the Group

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.

Fig. 19: Element Selection

Configure the Actions of the initial screen The initial screen should close after having entered the order id and pressing the return key. This behavior will now be configured. Choose the Attribute button in the toolbar to open the attributes section.

Fig. 20: Attributes Display

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.

Fig. 21: Action Assignment


12

Return to the component configuration by selecting the OVP link in the breadcrumb navigation.

Fig. 22: Breadcrump Navigation

Create and configure a Form UIBB for the bootstrap The Bootstrap is a technical UIBB that is responsible to map the readable key entered in the initial screen to the technucal key that is used by BOPF framework, and pass it to the UIBBs configured in the main screen. Create a second form UIBB in the initial screen. Choose the UIBB button and select Form Component. Enter the configuration name as Z<nn>_SO_BOOTSTRAP and save the new form. Press the Configure UIBB button, and assign the configuration to your local objects. Enter the /BOFU/CL_FBI_GUIBB_BOOTSTRAP feeder class in the Edit Feeder Class dialogue. In the edit parameter dialogue enter the parameters Business Object /BOFU/DEMO_SALES_Order, Node ROOT, URL Key Provider /BOFU/CL_VBI_URL_KEYPROVIDER and Preselction Key Provider /BOFU/CL_FBI_PRSEL_KEYPROVIDER (these are the reusable classes that do the actual key conversions). Confirm the popup and save the configuration.

Fig. 23: Parameters of the BOOTSTRAP Feeder Class


13

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.

Fig. 24: General Settings

In the Change Application-Specific Parameters dialogue, enter the class /BOFU/WDC_FBI_CONTROLLER as Web Dynpro Component/Class. Enter /BOFU/WDCC_FBI_CONTROLLER_NEW as configuration name. The application controller defined here enables FBI to react to FPM events in the application level, and not just in the individual UIBB level.

Fig. 25: Controller Class Assignment

Confirm the popup and save the configuration.

Test the initial screen configuration You can now test the initial screen. Select the configuration in SE80 as described in the prerequisites of this chapter. In the context menu of the navigation tree, you can select the test function. This launches the initial screen where you can enter an Order Id. The return key prompts you to the main screen, which has to be configured in the next chapter.


14

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.


15

CONFIGURE THE MAIN SCREEN

In this step you will configure the main screen of your application. The target of this screen is to display header information and items of your selected sales order. The screen consists of two building blocks – a form UIBB for the header data and a list UIBB for the item table.

Fig. 26: Main Screen Building Blocks

Procedure

Select the component configuration screen as described in the prerequisites of the preceding chapter. Select the main page in the navigation pane.

Fig. 27: Main Page Selection

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.


16

Fig. 28: Feeder Class Parameters for the Form UIBB

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.

Fig. 29:Form UIBB Layouting

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


17

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.

Fig. 30: Feeder Class Parameters for the List UIBB

The system prompts you to the List UIBB Schema tab to define the columns of the table. Choose the Column button.


18

Fig. 31: List Columns

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.

Test the screen configuration In SE80 you can test your screen definition. If you enter a Sales Order Id in the initial screen and press the return key, the main page is displayed – without data. The data flow between the UI building blocks is not yet defined. And this is what you will do in the next chapter: configure the wiring of the building blocks to define the data flow.

Result

You have now configured the main screen to display the sales order header in a form and the items in a list.


19

CONFIGURE THE WIRING

In this step you will configure the wiring of the UI building blocks to establish the relations between the different UIBBs in your application.

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.

Fig. 32: Wire Schema

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.

Wire the initial screen Start with wiring the initial screen: drag and drop the initial form and the bootstrap form from the left to the right pane. Drag an arrow from the collection outport of the initial form to the inport of the bootstrap form. The system prompts you to enter the connector class. FBI provides a generic connector class /BOFU/CL_FBI_CONNECTOR. Enter the class name and confirm with the OK button.


20

Fig. 33: Wiring of the Initial Screen

Wire the main screen Now wire the main screen: first connect the bootstrap form with the header form. Drag the header form to the right pane and draw an arrow from the collection outport of the bootstrap form to the inport of the header form. Use connector class /BOFU/CL_FBI_CONNECTOR and confirm the wiring. With this wiring the sales order id that is entered in the initial screen is passed to the main screen in order to display the corresponding data in the header form.

Fig. 34: Wiring of the Initial and Main Screen


21

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.

Fig. 35: Wiring of the Form and List Building Blocks

The wiring is now completed, therefore click the Done button in the toolbar. Back on the component configuration, save the data.

Test the configuration Test your application, either by using the context menu in SE80 or the Test function in the menu button Additional Functions. Now the sales order id entered on the initial screen is used to select the appropriate header data and the items data from the BO.

Fig. 36: Application Test


22

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.

Fig. 37: The Application

© 2013 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 Objcts 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

Documents

Getting Started with FPM BOPF Integrationdocshare04.docshare.tips/files/20984/209842775.pdf · · 2017-03-04Getting Started with FPM BOPF Integration. ... BOPF and FPM-BOPF Integration