Summary Creating a List GUIBB with a Related View Level of complexity: Time required for completion: Beginner 45 min. Author: Sharon Dassa Company: SAP AG Created on: 20 February 2013
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
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. 3
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 4
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 5
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. 6
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 7
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 8
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 9
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: 10
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 11
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. 12
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 13
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 14
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 15
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. 16
www.sap.com 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.