getting started with fpm bopf integration (fbi) · getting started with fpm bopf integration (fbi)...

Getting Started with FPM BOPF Integration (FBI) Summary

Creating a List GUIBB with a Related View

Author: Sharon Dassa Company: SAP AG Created on: 20 February 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 Configure the FBI views..................................................................................................................................... 4 Configure the Related View ............................................................................................................................... 5 Integrate the main view and the related view .................................................................................................... 6 Create and configure a Web Dynpro application ............................................................................................... 7 Configure the Web Dynpro / FPM Application ................................................................................................... 7 Create a new Initial Screen ............................................................................................................................... 9 Create a Form UIBB for selecting the Sales Order Instance ....................................................................... 9 Configure the Form UIBB .................................................................................................................................. 9 Test the configuration ...................................................................................................................................... 15 Result .............................................................................................................................................................. 16

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, where the application only provides the data and a layout configuration. The rendering is done by the GUIBB. Currently FPM offers several types of GUIBBs like:

Form (FPM_FORM_UIBB)

List (FPM_LIST_UIBB)

Tabbed (FPM_TABBED_UIBB) FBI aims at providing generic GUIBB feeder classes to consume services of BOs in FPM applications. This enables you to create UI layouts as Web Dynpro configurations for standard GUIBBs and assemble such discrete GUIBB configurations in an application configuration. An FBI view is an FBI design-time configuration object that helps join application data across multiple related BO nodes. This helps convenient presentation of application data in GUIBBs. This document describes how you as an application developer can perform the common task to create and configure a list GUIBB with a related view.

Proposed pre-readings and related documents

Pre-reading

For a detailed list of FBI features, see the corresponding Help:

http://help.sap.com/erp2005_ehp_05/helpdata/en/03/1c7fb2a6fe409da7fd5e3a405854a7/content.htm?frame

set=/en/b4/9b3862dd5042f39fd1a79c3168998e/frameset.htm

Solution summary

The BO model that we will use in this document:

Fig. 1: BO Model

The UI will have an Initial Screen that will enable the user to select the Sales order, and a main screen that

will display the selected sales order details.

In the main screen there will be a form to display the Data from the sales order invoice, and a list that will

show the sales order Items.

http://help.sap.com/erp2005_ehp_05/helpdata/en/03/1c7fb2a6fe409da7fd5e3a405854a7/content.htm?frameset=/en/b4/9b3862dd5042f39fd1a79c3168998e/frameset.htm

http://help.sap.com/erp2005_ehp_05/helpdata/en/03/1c7fb2a6fe409da7fd5e3a405854a7/content.htm?frameset=/en/b4/9b3862dd5042f39fd1a79c3168998e/frameset.htm


4

The list should also display the Item's description (in the correct logon language), so the list will need to be

based on two different nodes ITEM & ITEM_TEXT.

To include fields from more than one node we need to use FBI Views.

The FBI view is used enhance the FPM configuration of the data source used by the feeder class. In this

example we will use the FBI view to join application data across multiple related nodes. It can be used to join

data of different nodes in the same business object or across different business objects.

This document describes the following configuration measures in detail:

How to configure a main FBI view

How to configure a related view

How to create and configure a Web Dynpro application

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 (or higher)

SAP Business Suite EHP7, any SP (or higher)

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

Knowledge Understanding BOPF data models from a consumption perspective

Configure the FBI views Note: The first view is the main view and the second view is the related view, which

will be integrated with the main view.

In the SAP development system, open a new session and enter the transaction code for the SE80

Object Navigator transaction.

In the navigation area, select Web Dynpro Comp./Intf.

Select the /BOFU/FBI_VIEW component and click Display ( ).

In the context menu of the /BOFU/FBI_VIEW object, choose Create/Change Configuration.

The Editor for the Web Dynpro ABAP Component Configuration screen appears. Enter an appropriate configuration ID and choose the New button.

In the Create Configuration dialog, enter an appropriate description for the configuration and

choose the OK button.

In the Select Package dialog, enter the package name and choose the OK button.

The Component Configuration screen appears. Here, you can view and edit the main FBI view.

On the Header tab, enter the following field values:

In the Create Web Dynpro Application screen, enter the following field values:

Business Object: BO name; for example, /BOFU/DEMO_SALES_ORDER

Node: BO node name; for example, ITEM


5

Fig. 2: Component Configuration

Configure the Related View In the SAP development system, open a new session and enter the transaction code for the SE80

Object Navigator transaction.

In the navigation area, select Web Dynpro Comp./Intf.

Select the /BOFU/FBI_VIEW component and choose the Display button.

In the context menu of the /BOFU/FBI_VIEW object, choose Create/Change Configuration.

The Editor for the Web Dynpro ABAP Component Configuration screen appears.

Enter an appropriate configuration ID and choose the New button.

In the Create Configuration dialog, enter an appropriate description for the configuration and

choose the OK button.

In the Select Package dialog, enter the package name and choose the OK button.

The Component Configuration screen appears. Here, you can view and edit the related FBI view.

On the Header tab, enter the following field values:

Business Object: BO name; for example, /BOFU/DEMO_SALES_ORDER

Node: BO node name; for example, ITEM_TEXT


6

Fig. 3: Component Configuration

Save the second FBI view by clicking the Save button.

Integrate the main view and the related view In the SAP development system, open a new session and enter the transaction code for the SE84

Repository Information System.

Navigate to Web Dynpro folder -> Component Configuration

Type the FBI view name that you created earlier and Press Execute button (F8).

Fig. 4: Search the FBI view

Double click on the Object name to display the FBI View. Fig. 5: Open the FBI view

In the first FBI view configuration, navigate to the Related Views tab, click on the Add button. The

first row of the Related View table is selected.

In the Related View column of the selected row, type the name of the related view or choose the

search icon to search for the related view.


7

In the Output Struc. Suffix column, enter a 2 characters suffix (we use IT in this example to

represent Item Text node) as the output structure suffix , this is done in order to distinguish

between similar fields names in different nodes - in Runtime the suffix is added to the relevant

fields (e.g. DESCRIPTION_IT), this way we know to which related view it belongs to.

Example: if we have two nodes that have both an 'ID' field, the FBI View suffix will be added

to each field's name. In that way the combine structure that the FBI Views create will not

have 2 fields with the same name.

In the Association column, select the association between the node in first view and node in the second view.

Fig. 6: Component Configuration – Related View

Save the view configuration.

Create and configure a Web Dynpro application 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. 7: FPM Workbench

Configure the Web Dynpro / FPM Application In the first step you have to provide the Web Dynpro Application name and description. Assign a namespace, which will be applied for all entities created in the application. For test purposes use the prefix Z. Last but not least, you have to select a predefined Floorplan. FPM provides three main Floorplans: OIF – Object Instance Floorplan


8

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. 8: 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. Fig. 9: Package and Transport Request

You have created a Web Dynpro / FPM Application, with an application configuration and an OVP component configuration. Fig. 10: FPM Creation Wizard Result Message


9

Create a new Initial Screen The purpose of this screen is to select the sales order to be displayed in the main 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. 11: 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>_<application name>_INITIAL_SCREEN. Save the screen (an error message will be displayed, it will disappear after the next step) Fig. 12: Form UI Building Block

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. 13: UIBB Configuration


10

Assign the configuration to your local objects on the following screen. Then you are requested to enter the feeder class. In this example we 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). In the Edit Parameters dialog, enter the following parameters and choose the OK button:

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

Fig. 14: Edit Feeder Class Parameter

In the Form UIBB Schema tab, choose the Element button and select Add Group.

In the Group Title column, enter a suitable title for the group.

Choose the Child Element button and select Add Elements to Group.

In the Edit Group dialog, select the element and choose the OK button.

Choose the Attributes button (from the upper menu).

Under Action Assignment, select the FPM event ID as FPM_LEAVE_INITIAL_SCREEN ().

Save the UIBB configuration.

Return to the component configuration screen by clicking the second link in the crumb bread navigation.

Choose the UIBB button and select Form Component.

Enter a suitable configuration name, save and choose the Configure UIBB button. Press New and enter package.

In the Edit Feeder Class dialog, enter the /BOFU/CL_FBI_GUIBB_BOOTSTRAP feeder class and choose the Edit Parameters button.

In the Edit Parameters dialog, enter the following parameters and choose the OK button:


11

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

Fig. 15: FPM Creation Wizard Result Message

Save the UIBB configuration and return to the component configuration screen.

Under General Settings, choose the Floorplan Settings button and select Application Controller

Settings.

In the Change Application-Specific Parameters dialog, enter the following parameters and choose

the OK button:

Enter /BOFU/WDC_FBI_CONTROLLER as Web Dynpro component/class.

Enter /BOFU/WDCC_FBI_CONTROLLER_NEW as the configuration name.

Fig. 16: Application-Specific Parameters

Create and configure a list UIBB

On the component configuration screen, in the Navigation pane, choose the Main Page table row.

To create a list UIBB for the main page, on the Overview Page Schema tab, choose the UIBB

button and select List Component.

Enter the following details for the list GUIBB and choose the Save button:

Component: FPM_LIST_UIBB

View: LIST_WINDOW


12

Configuration Name: An appropriate configuration name

Fig. 17 List UIBB Configuration

Save and choose the Configure UIBB button.

To create the configuration for your UIBB, in the Editor for the Web Dynpro ABAP Component

Configuration screen, choose the New button.

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

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

In the Edit Feeder Class dialog, enter the /BOFU/CL_FBI_GUIBB_LIST_ATS feeder class and

choose the Edit Parameters button.

Fig. 18: List Feeder Class

Note: You can use F4 help to get this feeder class.


13

In the Edit Parameters dialog, enter the following feeder parameters and choose the OK button:

Enter the FBI View name that you created before.

Fig. 19: Edit Feeder Class Parameters

Under List UIBB Schema Tab choose the Column button.

In the List UIBB Schema you can see all the fields from the both FBI views which were created

before. Select the elements to be displayed on the list and choose the OK button.

Fig. 20: Edit Feeder Class Parameters


14

Fig. 21: Fields in the component configuration are taken from the FBI view & FBI related view

Save the configuration.

Return to the component configuration screen.

In the Toolbar Schema tab of the Initial Screen choose the Global Toolbar, and then choose the

Toolbar Element button. In the resulted popup select the Continue standard function and press OK.

Fig. 22: Global Toolbar - Continue button

Configure the Wiring

In the Wire Schema tab choose the Graphical Wire Editor button.

Fig. 23: Wire Schema


15

Perform the required wiring as shown in the following diagram - during wiring, select the connector

class as /BOFU/CL_FBI_ CONNECTOR.

The sequence of the wiring should be: Alt Key Bootstrap List.

Fig. 24: Wiring Connector Class

Choose the Done button & Save.

Test the configuration

Test your application, either by using the context menu in SE80 or the Test function in the menu button Additional Functions.

Fig. 25: Application Test

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. 26: Initial Screen for Order ID


16

The item list includes the related item_text fields (language and descriptions)

Fig. 27: Test Results

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.

© 2015 SAP SE or an SAP affiliate company. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company. SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company) in Germany and other countries. Please see http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark for additional trademark information and notices. Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors. National product specifications may vary. These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate company 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. In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

www.sap.com

http://www.sap.com/corporate-en/legal/copyright/index.epx#trademark

getting started with fpm bopf integration (fbi) · getting started with fpm bopf integration (fbi)...

Documents