Create List UIBB with OVP in SAP FPM

Today, we will explore the steps to create List UIBB with OVP in SAP FPM.

There are 3 main steps required to create a List UIBB with OVP.

  1. Overview Page Floorplan(OVP) objects-
    1. Create Web Dynpro Application,
    2. Web Dynpro Application Configuration and
    3. Component Configuration for OVP.
  2. Create Feeder Class for Form UIBB.
  3. Create Component Configuration for Form UIBB.

We’ll use the OVP Application and component configurations of the blog – Create Form UBIBB with OVP in SAP FPM

Creating Feeder Class for List UIBB – FPM_LIST_UIBB

Use the below code to create the Feeder class ZCL_FEEDER_FLIGHT_BOOKING_LIST.

CLASS zcl_feeder_flight_booking_list DEFINITION
  PUBLIC
  FINAL
  CREATE PUBLIC .

  PUBLIC SECTION.

    INTERFACES if_fpm_guibb .
    INTERFACES if_fpm_guibb_list .

    DATA tab_bookings TYPE ty_bookings .
  PROTECTED SECTION.
  PRIVATE SECTION.
ENDCLASS.



CLASS zcl_feeder_flight_booking_list IMPLEMENTATION.


* <SIGNATURE>---------------------------------------------------------------------------------------+
* | Instance Public Method ZCL_FEEDER_FLIGHT_BOOKING_LIST->IF_FPM_GUIBB_LIST~CHECK_CONFIG
* +-------------------------------------------------------------------------------------------------+
* | [--->] IO_LAYOUT_CONFIG               TYPE REF TO IF_FPM_GUIBB_LIST_CONFIG
* | [<---] ET_MESSAGES                    TYPE        FPMGB_T_MESSAGES
* +--------------------------------------------------------------------------------------</SIGNATURE>
  METHOD if_fpm_guibb_list~check_config.
  ENDMETHOD.


* <SIGNATURE>---------------------------------------------------------------------------------------+
* | Instance Public Method ZCL_FEEDER_FLIGHT_BOOKING_LIST->IF_FPM_GUIBB_LIST~FLUSH
* +-------------------------------------------------------------------------------------------------+
* | [--->] IT_CHANGE_LOG                  TYPE        FPMGB_T_CHANGELOG
* | [--->] IT_DATA                        TYPE REF TO DATA
* | [--->] IV_OLD_LEAD_SEL                TYPE        I(optional)
* | [--->] IV_NEW_LEAD_SEL                TYPE        I(optional)
* +--------------------------------------------------------------------------------------</SIGNATURE>
  METHOD if_fpm_guibb_list~flush.
  ENDMETHOD.


* <SIGNATURE>---------------------------------------------------------------------------------------+
* | Instance Public Method ZCL_FEEDER_FLIGHT_BOOKING_LIST->IF_FPM_GUIBB_LIST~GET_DATA
* +-------------------------------------------------------------------------------------------------+
* | [--->] IV_EVENTID                     TYPE REF TO CL_FPM_EVENT
* | [--->] IT_SELECTED_FIELDS             TYPE        FPMGB_T_SELECTED_FIELDS(optional)
* | [--->] IV_RAISED_BY_OWN_UI            TYPE        BOOLE_D(optional)
* | [--->] IV_VISIBLE_ROWS                TYPE        I(optional)
* | [--->] IV_EDIT_MODE                   TYPE        FPM_EDIT_MODE(optional)
* | [--->] IO_EXTENDED_CTRL               TYPE REF TO IF_FPM_LIST_ATS_EXT_CTRL(optional)
* | [<---] ET_MESSAGES                    TYPE        FPMGB_T_MESSAGES
* | [<---] EV_DATA_CHANGED                TYPE        BOOLE_D
* | [<---] EV_FIELD_USAGE_CHANGED         TYPE        BOOLE_D
* | [<---] EV_ACTION_USAGE_CHANGED        TYPE        BOOLE_D
* | [<---] EV_SELECTED_LINES_CHANGED      TYPE        BOOLE_D
* | [<---] EV_DND_ATTR_CHANGED            TYPE        BOOLE_D
* | [<---] EO_ITAB_CHANGE_LOG             TYPE REF TO IF_SALV_ITAB_CHANGE_LOG
* | [<-->] CT_DATA                        TYPE        DATA
* | [<-->] CT_FIELD_USAGE                 TYPE        FPMGB_T_FIELDUSAGE
* | [<-->] CT_ACTION_USAGE                TYPE        FPMGB_T_ACTIONUSAGE
* | [<-->] CT_SELECTED_LINES              TYPE        RSTABIXTAB
* | [<-->] CV_LEAD_INDEX                  TYPE        SYTABIX
* | [<-->] CV_FIRST_VISIBLE_ROW           TYPE        I
* | [<-->] CS_ADDITIONAL_INFO             TYPE        FPMGB_S_ADDITIONAL_INFO(optional)
* | [<-->] CT_DND_ATTRIBUTES              TYPE        FPMGB_T_DND_DEFINITION(optional)
* +--------------------------------------------------------------------------------------</SIGNATURE>
  METHOD if_fpm_guibb_list~get_data.
    CASE iv_eventid->mv_event_id.
      WHEN 'FPM_START'.
        ct_data = tab_bookings.
        ev_data_changed = abap_true.
      WHEN OTHERS.
    ENDCASE.
  ENDMETHOD.


* <SIGNATURE>---------------------------------------------------------------------------------------+
* | Instance Public Method ZCL_FEEDER_FLIGHT_BOOKING_LIST->IF_FPM_GUIBB_LIST~GET_DEFAULT_CONFIG
* +-------------------------------------------------------------------------------------------------+
* | [--->] IO_LAYOUT_CONFIG               TYPE REF TO IF_FPM_GUIBB_LIST_CONFIG
* +--------------------------------------------------------------------------------------</SIGNATURE>
  METHOD if_fpm_guibb_list~get_default_config.
  ENDMETHOD.


* <SIGNATURE>---------------------------------------------------------------------------------------+
* | Instance Public Method ZCL_FEEDER_FLIGHT_BOOKING_LIST->IF_FPM_GUIBB_LIST~GET_DEFINITION
* +-------------------------------------------------------------------------------------------------+
* | [<---] EO_FIELD_CATALOG               TYPE REF TO CL_ABAP_TABLEDESCR
* | [<---] ET_FIELD_DESCRIPTION           TYPE        FPMGB_T_LISTFIELD_DESCR
* | [<---] ET_ACTION_DEFINITION           TYPE        FPMGB_T_ACTIONDEF
* | [<---] ET_SPECIAL_GROUPS              TYPE        FPMGB_T_SPECIAL_GROUPS
* | [<---] ES_MESSAGE                     TYPE        FPMGB_S_T100_MESSAGE
* | [<---] EV_ADDITIONAL_ERROR_INFO       TYPE        DOKU_OBJ
* | [<---] ET_DND_DEFINITION              TYPE        FPMGB_T_DND_DEFINITION
* | [<---] ET_ROW_ACTIONS                 TYPE        FPMGB_T_ROW_ACTION
* | [<---] ES_OPTIONS                     TYPE        FPMGB_S_LIST_OPTIONS
* +--------------------------------------------------------------------------------------</SIGNATURE>
  METHOD if_fpm_guibb_list~get_definition.
    eo_field_catalog ?= cl_abap_tabledescr=>describe_by_data( tab_bookings ).
  ENDMETHOD.


* <SIGNATURE>---------------------------------------------------------------------------------------+
* | Instance Public Method ZCL_FEEDER_FLIGHT_BOOKING_LIST->IF_FPM_GUIBB_LIST~PROCESS_EVENT
* +-------------------------------------------------------------------------------------------------+
* | [--->] IO_EVENT                       TYPE REF TO CL_FPM_EVENT
* | [--->] IV_RAISED_BY_OWN_UI            TYPE        BOOLE_D(optional)
* | [--->] IV_LEAD_INDEX                  TYPE        SYTABIX
* | [--->] IV_EVENT_INDEX                 TYPE        SYTABIX
* | [--->] IT_SELECTED_LINES              TYPE        RSTABIXTAB
* | [--->] IO_UI_INFO                     TYPE REF TO IF_FPM_LIST_ATS_UI_INFO(optional)
* | [<---] EV_RESULT                      TYPE        FPM_EVENT_RESULT
* | [<---] ET_MESSAGES                    TYPE        FPMGB_T_MESSAGES
* +--------------------------------------------------------------------------------------</SIGNATURE>
  METHOD if_fpm_guibb_list~process_event.
  ENDMETHOD.


* <SIGNATURE>---------------------------------------------------------------------------------------+
* | Instance Public Method ZCL_FEEDER_FLIGHT_BOOKING_LIST->IF_FPM_GUIBB~GET_PARAMETER_LIST
* +-------------------------------------------------------------------------------------------------+
* | [<-()] RT_PARAMETER_DESCR             TYPE        FPMGB_T_PARAM_DESCR
* +--------------------------------------------------------------------------------------</SIGNATURE>
  METHOD if_fpm_guibb~get_parameter_list.
  ENDMETHOD.


* <SIGNATURE>---------------------------------------------------------------------------------------+
* | Instance Public Method ZCL_FEEDER_FLIGHT_BOOKING_LIST->IF_FPM_GUIBB~INITIALIZE
* +-------------------------------------------------------------------------------------------------+
* | [--->] IT_PARAMETER                   TYPE        FPMGB_T_PARAM_VALUE
* | [--->] IO_APP_PARAMETER               TYPE REF TO IF_FPM_PARAMETER(optional)
* | [--->] IV_COMPONENT_NAME              TYPE        FPM_COMPONENT_NAME(optional)
* | [--->] IS_CONFIG_KEY                  TYPE        WDY_CONFIG_KEY(optional)
* | [--->] IV_INSTANCE_ID                 TYPE        FPM_INSTANCE_ID(optional)
* +--------------------------------------------------------------------------------------</SIGNATURE>
  METHOD if_fpm_guibb~initialize.
    SELECT * FROM sbook INTO TABLE tab_bookings.
    IF sy-subrc = 0.

    ENDIF.
  ENDMETHOD.
ENDCLASS.
Creating component configuration for List UIBB – FPM_LIST_UIBB

Open Web Dynpro component FPM_LIST_UIBB_ATS in T-code SE80.

Create a component configuration, by right clicking on the Component Configurations node and selecting ‘Create’ from the context menu.

A new web page ‘Configure Component’ gets open. Enter ‘Configuration ID’ as ‘ZCOMPCONF_LIST_FLT_BOOK’ and click on ‘New’.

Enter the description and click on ‘OK’.

In the ‘Select Package’ popup, click on ‘Local Object’.

Enter Feeder Class ‘ZCL_FEEDER_FLIGHT_BOOKING_LIST’ and click on ‘Edit Parameter’.

Click on ‘OK’.

On the Configure Component page, click on the ‘Column’ button as highlighted in the below screenshot and select the required columns from ‘Add Column’ popup.

The columns are added on the Configure Component page. Click on Save.

Now that our List UIBB is ready, let’s add it to the OVP component configuration ZWDA_OVP_FLIGHT_BOOKING_CNF, which was created in the blog Create Form UIBB with OVP in SAP FPM.

Go to Component Configurator from SE80 for Web Application ZWDA_OVP_FLIGHT_BOOKING, as shown in the below screenshot.

Click on ‘Continue in Change Mode’.

Click on the hyperlink for Component configuration ZCOMPCONF_OVP_FLIGHT_BOOKING, as highlighted in the below screenshot.

On the Configure Component page, scroll down to ‘Overview Page Schema’ section and click on ‘UIBB’ button. From the context menu, select List Component.

A new row gets added under Section. Maintain the Configuration ID as ‘ZCOMPCONF_LIST_FLT_BOOK’ and Title as ‘List of Flight Bookings’.

Finally, it’s time to test the application. Execute the Web Dynpro Application ‘ZWDA_OVP_FLIGHT_BOOKING’.

Web page ‘Flight Booking Details’ is launched.

Now that we have a List and Form UIBB on the same Floorplan, it makes logical sense to connect them using wiring schema, which is covered in the blog Create wiring between UIBBs in SAP FPM