Page tree
Skip to end of metadata
Go to start of metadata

Introduction

The general prerequisites for this tutorial are that you already implemented a Metadata Provider and Service Provider and defined an Application Building Block ID (ABBID).

To implement your Floorplan Manager (FPM) UI with the help of the FPM SPI Integration (FSI) you need to do the following:

  1. Create and configure a Web Dynpro application that will be the entry point of your UI.
  2. Create a Floorplan configuration which will be the frame of your UI.
  3. Create UI Building Block (UIBB) configurations and add them to your Floorplan configuration.
  4. Create Wires between the UIBBs within your Floorplan configuration to pass key information from one UIBB to another at runtime.

Optionally you can also do the following:

Create and Configure a Web Dynpro Application

The Web Dynpro application is the entry point for your UI.

It is always Floorplan-specific and therefore you need to decide which type of Floorplan you want to pick before you can create an application.

Prerequisites

You have already created a Metadata Provider, Service Provider and defined an Application Building Block ID (ABBID) as described in the tutorial 'Getting Started with SPI'.

Procedure

Create a Web Dynpro Application

  1. Start transaction SE80.
  2. Navigate to your package.
  3. Right-click on your package name and select 'Create', 'Web Dynpro', 'Web Dynpro Application'.
  4. Enter the name of your application in the dialog box and click on OK.
  5. Enter the Floorplan type, component name, window name and plug depending on the Floorplan you have chosen:

    Floorplan type

    Component name

    Window name

    Plug

    OIF

    FPM_OIF_COMPONENT

    FPM_WINDOW

    DEFAULT

    GAF

    FPM_GAF_COMPONENT

    FPM_WINDOW

    DEFAULT

    OVP

    FPM_OVP_COMPONENT

    FPM_WINDOW

    DEFAULT

  6. Save your entries.

Create a Web Dynpro Application Configuration

  1. Start transaction SE80.
  2. Navigate to your Web Dynpro application.
  3. Right-click on your Web Dynpro application name and select 'Create/Change Configuration'.
  4. Enter a configuration ID in the upcoming browser window.
  5. Enter the description of your application configuration in the dialog box and click on OK.
  6. Enter the name of your package in the next dialog box and click on OK.
  7. Save your entries.

Next Step

Now you need to configure the Floorplan component that fits to your application.

Configure a Floorplan

A Floorplan is the surrounding component encapsulating all UI Building Blocks (UIBBs).
Within the Floorplan configuration you define the layout of the application, create the main toolbar, add wires between the UIBBs and set general application settings.

The FPM SPI Integration (FSI) supports all Floorplans that are offered by the Floorplan Manager:

  • Overview Page (OVP)
  • Guided Activity Floorplan (GAF)
  • Object Instance Floorplan (OIF)

Prerequisites

You have created and configured a Web Dynpro application.

Procedure

  1. Start transaction SE80.
  2. Navigate to your Web Dynpro application configuration and open it.
  3. Go to change mode and enter a new configuration name for the Floorplan component.
  4. Save your entries.
  5. Open the component configuration. (If it doesn't exist yet, you need to press 'New' in the next screen to create it)
  6. Enter a description in the dialog box and press OK.
  7. Enter your package name and click OK. (You will now enter the Floorplan configuration)
  8. Open the Floorplan settings and then the application controller settings.
  9. Now enter the Web Dynpro component '/PLMU/WDC_FRW_APPL_CNTRL' as you application controller.
  10. Save your changes

Example

An example of an OVP Floorplan configuration is /PLMU/WDC_FRW_TEST_OVP_CFG.
The application controller class that is used here is /PLMU/CL_FRW_TEST_OVP_APPCC.

Next Step

Add UIBBs to the Floorplan Configuration.

Add UIBBs to the Floorplan Configuration

You can either configure Generic UI Building Blocks (GUIBB) (recommended) or create and configure freestyle UI Building Blocks (in case you have special UI requirements that can't be fulfilled when using GUIBBs).

A comparison of the two approaches, their strengths and weaknesses can be found in the UI Building Block (UIBB) chapter.

Prerequisites

You created and configured a Web Dynpro application and created a Floorplan configuration.

Procedure

  1. Start transaction SE80.
  2. Navigate to the Web Dynpro component configuration of your Floorplan and open it in edit mode.
  3. In the 'Overview Page/Object Instance/Guided Activity Schema' tab (the name is depending on the Floorplan type) click on the 'Add UIBB' button and select the desired component.
  4. Now you need to maintain the attributes of the newly added UIBB
    1. In case you selected a GUIBB like a form, list, tree or search component you need to enter now a new configuration name.
    2. When picking a freestyle UIBB you need to enter its Web Dynpro component name and the according window name.
  5. Save the Floorplan configuration.
    When you didn't pick a GUIBB you are done now, otherwise ensure that the new GUIBB is selected and press 'Configure UIBB'.
  6. In the next window click on 'New' to actually create the configuration.
  7. Enter a description and package for the new configuration.
  8. You are now asked to enter a feeder class.
    You can directly use one of the generic feeder classes of the FPM SPI Integration (FSI):

    GUIBB

    Feeder Class

    Form

    /PLMU/CL_FRW_G_FEEDER_FORM

    List

    /PLMU/CL_FRW_G_FEEDER_LIST

    Tree

    /PLMU/CL_FRW_G_FEEDER_TREE

    Search

    /PLMU/CL_FRW_G_FEEDER_SEARCH

    Alternatively you can implement an application specific feeder class that inherits from the generic one.
    Either way it is still possible to exchange the feeder class at a later point in time for an existing configuration.

  9. After you entered the feeder class, press the 'Edit Parameters' button.
  10. Fill out the feeder parameters and press ok (Find more info regarding the feeder parameters in the general GUIBB chapter and its GUIBB type specific subchapters).
  11. Add UI elements like buttons, fields and so on to the configuration.
  12. Save the component configuration.

Next Step

Add further UIBBs to the Floorplan configuration or connect the created UIBBs using the Wiring.

Create Wires between the UIBBs

The purpose of a wire is to transfer data from one UIBB to another UIBB. It also defines the parent child relationship of all the UIBBs and ensures a PROCESS_BEFORE_OUTPUT sequence according to this hierarchy.
The wires are created via configuration.
For more info regarding the usage and implementation of the wiring please refer to the Wiring chapter.

Prerequisites

You created and configured a Web Dynpro application, created a Floorplan configuration and added UIBBs to your Floorplan configuration.

Procedure

  1. Open your Floorplan component configuration (OIF/GAF/OVP) in edit mode.
  2. To define a wire you can either manually fill the "Wire Schema" table or use the graphical wire editor
    • To define a wire manually do the following:
      1. Click the 'Add' button in the toolbar of the wire schema table
        Add a new Wire
      2. Fill the attributes of the wire which will become visible when the according wire is selected and the 'Properties' button of the main toolbar is toggled.
        Find more info regarding the wire connector and its parameters in the Wiring chapter.
        Wire Attributes
    • To define a wire via the graphical wire editor you need to:
      1. Click on the 'Graphical Wire Editor' button
        How to Open the Graphical Wire Editor
      2. Define new wires by dragging an outbound port of a UIBB and dropping it onto another UIBB.
        Here you will also be asked for a connector and certain additional parameters, which you can read more about in the Wiring chapter.
        Graphical Wire Editor

Implement an Application Specific Feeder Class

The FPM SPI Integration (FSI) offers generic feeder classes for all GUIBBs.
If you want to have a feeder class that deviates from the standard logic of the generic feeder you can inherit from our generic feeder classes and create your own application specific feeder class. Therefore the FSI provides some interfaces which are called by the generic feeder at certain points in time to allow you to implement your own logic.

Reuse Feeder Classes

We recommend to use the generic feeder classes of the FSI whenever possible.
If you create application specific feeder classes it is advisable not to create one feeder class for each GUIBB instance but to try to reuse them for multiple GUIBBs wherever it makes sense.

Prerequisites

There are no prerequisites.

Procedure

  1. Start transaction SE80.
  2. Open the context menu via right-click on your package and select 'Create', 'Class Library', 'Class'.
  3. Now a popup gets opened where you need to enter a description of your feeder class.
  4. Afterwards you need to press the 'Create Inheritance' button.
  5. Enter the according feeder class of the FPM SPI Integration (FSI).
    The available generic feeder classes are:
    • /PLMU/CL_FRW_G_FEEDER_FORM for the Form UIBB
    • /PLMU/CL_FRW_G_FEEDER_LIST for the List UIBB
    • /PLMU/CL_FRW_G_FEEDER_TREE for the Tree UIBB
    • /PLMU/CL_FRW_G_FEEDER_SEARCH for the Search UIBB
  6. Implement the feeder interface(s) that you require for adjusting the logic of the generic feeder class – this depends on your specific use-case.
    Find a complete list of the available interfaces in the GUIBB chapter.
  7. Implement the interface methods.
  8. Save the class.

Next Step

Use the feeder class in your GUIBB configuration.

Implement an Application Specific Controller

To implement an application specific application controller a BAdI implementation is needed in enhancement spot /PLMU/ES_FRW_CONSUMER_APPCC.
There is a BAdI definition for each type of Floorplans within the enhancement spot:

  • OIF – /PLMU/EX_FRW_CONSUMER_APPCC
  • GAF – /PLMU/EX_FRW_APPCC_GAF
  • OVP – /PLMU/EX_FRW_APPCC_OVP

Each BAdI has two filter parameters:

Parameter

Description

WD_APPLICATION_NAME

Web Dynpro Application Name

WDAPPLICATIONCONFIGURATIONID

Web Dynpro Application Configuration ID

Prerequisites

You created and configured a Web Dynpro application and created a Floorplan configuration.

Procedure

  1. Start transaction SE18 or use customizing (SPRO: Cross-Application Components, Processes and Tools for Enterprise Applications, Settings for BO Framework and Navigation, UI Framework, BAdI: Consumer Application Controller )
  2. Right-click on the BAdI definition according to your Floorplan type
  3. Select "Create BAdI Implementation" from the context menu
    Create BAdI Implementation
  4. Select or create an enhancement implementation
    Create Enhancement Implementation
  5. After you select the enhancement implementation a popup will be opened, where you can maintain your BAdI details
    Create BAdI Implementation
  6. Click on the 'Filter' button in the BAdI Implementation
  7. Create a new filter combination by pressing the according button
    Add Filter for BAdI Implementation
  8. Select both parameters and fill them with your values.
    Maintain BAdI Implementation Filter
  9. Save and activate your changes
  • No labels

2 Comments

  1. Former Member

    Mr. Schneider,

    You are writing,

    "Alternatively you can implement an application specific feeder class that inherits from the generic one.
    Either way it is still possible to exchange the feeder class at a later point in time for an existing configuration."

    I did exactly the the same in term of /PLMU/CL_FRW_G_FEEDER_FORM and then during definition of Feeder Class in Configuration  in CONSTRUCTOR of Class /PLMU/CL_FRW_G_CALLBACK_PROXY occured an ERROR because of casting  lo_feeder_form ?= io_feeder.

    Our System: EHP6 FOR SAP ERP 6.0

    Thanks for Infos


    1. Dear Mr. Lazar,

      normally if you inherit from a generic feeder class this exception shall not be raised because it only occurs if the class that uses the callback-proxy class is not a subclass of the /PLMU/CL_FRW_G_FEEDER_* classes. Without debugging in your system it is difficult to tell why this dump occurs now.
      In case you cannot find the source of the issue yourself please create a customer ticket for component CA-EPT-SPI-FSI as mentioned in chapter contact.

      Best regards,
      Maximilian Schneider