May 03

Integrate SAP FPM and BOPF

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

  • Create an FPM Application on top of a BOPF business object
  • Configure the Application initial screen
  • Configure a main screen with header section, Item section, Text collection and Attachment section
  • Configure the wire schema of the application

The application is based on the custom business object ZRZ_SALES_QUOTE. Refer the blog Custom BOPF Business Object

Launch FPM creation wizard using 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 this context, choose the Wizard for Creating Empty FPM Applications.

2017-05-07 11_38_49- - Remote Desktop Connection

In the first step you have to provide the Web Dynpro Application name and description. Select a predefined floorplan. FPM provides three main floorplans:

  1. OIF – Object Instance Floorplan
  2. GAF – Guided Activity Floorplan
  3. OVP – Overview Page Floorplan.

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

2017-05-07 14_24_30- - Remote Desktop Connection

2017-05-07 14_26_26- - Remote Desktop Connection

In the final step, assign package and transport request.

2017-05-07 14_28_43- - Remote Desktop Connection

2017-05-07 14_32_44- - Remote Desktop Connection

Configure Initial Screen:

In this step we will create the initial screen of your application. The target of this screen is to select the sales quote to be displayed on the main screen.

Choose the Application configuration and click ‘Start Configurator’ button

2017-05-07 15_06_29- - Remote Desktop Connection

Click ‘Continue in Change Mode’:2017-05-07 15_08_30- - Remote Desktop Connection

Click the Component Configuration link:

2017-05-07 15_08_53- - Remote Desktop Connection

How to different page types in the component configuration:

2017-05-08 14_50_19- - Remote Desktop Connection

On the Initial page, I have added two UIBB with form component [FPM_FORM_UIBB]. 2017-05-07 15_10_29- - Remote Desktop Connection

Component configuration “ZRZ_SQ_FORM_CONFIG_INIT_PAGE” was created to display the Sales Quote field from ROOT node of ZRZ_SALES_QUOTE business object

Feeder class /BOFU/CL_FBI_GUIBB_ALTKEY_FDR, is a feeder class for simplified form, that exposes only alternative keys. 

2017-05-07 21_31_27- - Remote Desktop Connection

Refer to blog Create Alternative Key/Validation (BOPF)I have created QUOTE_ID as alternative key on ROOT node of ZRZ_SALES_QUOTE business object

2017-05-07 21_31_51- - Remote Desktop Connection

Add QUOTE_ID field on to the screen as shown below:

2017-05-07 21_44_01- - Remote Desktop Connection

Assign event FPM_LEAVE_INITIAL_SCREEN() to field QUOTE_ID to allow the navigation from initial page to main page. (Remember, we don’t have any other buttons on screen)

2017-05-07 21_59_56- - Remote Desktop Connection

Component configuration “ZRZ_SQ_FORM_BOOTSTRAP_CONFIG” is a bootstrap.

“Bootstrap is technical UIBB that is responsible to map the readable key entered in the initial screen to the technical key that is used by BOPF framework, and pass it to the UIBBs configured in the main screen”

/BOFU/CL_FBI_GUIBB_BOOTSTRAP is the feeder class for bootstrap

2017-05-08 10_56_51- - Remote Desktop Connection

Business Object           - ZRZ_SALES_QUOTE
Node                      - ROOT
URL Key Provider          - /BOFU/CL_FBI_URL_KEYPROVIDER and
Pre-selction Key Provider - /BOFU/CL_FBI_PRSEL_KEYPROVIDER

2017-05-08 10_57_14- - Remote Desktop Connection

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.

2017-05-08 11_04_13- - Remote Desktop Connection

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.

2017-05-08 11_04_41- - Remote Desktop Connection

Test the initial screen now..

2017-05-08 11_16_11- - Remote Desktop Connection2017-05-08 11_18_12- - Remote Desktop Connection

Configure Main Screen:

In this step I will configure the main screen and the target of this screen is to display header, item, long text and attachments of your selected sales quote.

2017-05-08 11_20_31- - Remote Desktop Connection

  • ZRZ_SQ_ROOT_FORM_CONFIG : Component configuration created to display the
    header fields of our business object

2017-05-08 11_34_52- - Remote Desktop Connection2017-05-08 11_35_24- - Remote Desktop Connection2017-05-08 11_36_08- - Remote Desktop Connection

  • ZRZ_SQ_ITEM_FORM_CONFIG : Component configuration created to display the
    item fields of our business object

2017-05-08 11_38_57- - Remote Desktop Connection2017-05-08 11_39_17- - Remote Desktop Connection2017-05-08 11_39_46- - Remote Desktop Connection

  • /BOFU/TEXT_COLLECTION_TAB and /BOFU/ATTACHMENT_FOLDER_TAB are reusable configurations. To know more about them, Click here..

Create Wiring:

2017-05-08 13_48_01-Microsoft PowerPoint - [New Microsoft Office PowerPoint Presentation]

We can make use of Create wire option or graphical option as highlighted below:

2017-05-08 13_50_23- - Remote Desktop Connection

Start wiring from Form UIBB on initial screen to Bootstrap. Make use of standard connector class “/BOFU/CL_FBI_CONNECTOR” and port type as “Collection”.

2017-05-08 14_13_20- - Remote Desktop Connection

Now, from bootstrap to Form UIBB (ROOT) on main screen to transfer the internal keys to business object.

2017-05-08 14_14_06- - Remote Desktop Connection

With association relation between ROOT and ITEM, transfer the internal keys by establishing wiring between Form UIBB (ROOT) and Form UIBB (ITEM). Under connector parameters, you can see the source node association as ITEM

2017-05-08 14_14_36- - Remote Desktop Connection

Also, create wiring between ROOT and other sub nodes Long text and Attachment.

2017-05-08 14_15_08- - Remote Desktop Connection2017-05-08 14_15_34- - Remote Desktop Connection

Final Test: