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.
- Overview Page Floorplan(OVP) objects-
- Create Web Dynpro Application,
- Web Dynpro Application Configuration and
- Component Configuration for OVP.
- Create Feeder Class for Form UIBB.
- 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