This blog helps to create Form UIBB with OVP in SAP FPM with a quick, simple and easy steps.
Below are the main steps to be performed to create Form UBIBB with OVP in SAP FPM-
- 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.
1.1. Create Web Dynpro Application for OVP
Go to SE80 – Object Navigator and open Web Dynpro Component FPM_OVP_COMPONENT.
Right click on the Web Dynpro Applications node and select ‘Create’ from the context menu.
On the Create Web Dynpro Application dialog screen, enter the below values and click on ‘Continue’.
In the next screen, fill the Interface view and Plug Name as ‘FPM_WINDOW’ and ‘DEFAULT’, respectively and save the Web Dynpro Application.
A dialog box for ‘Create Administration Service’ will appear. Keep the checkbox for ‘Administration Service’ as ‘Unchecked’ and click on continue.
In the ‘Create Object Directory Entry’, click on ‘Local Object’.
A child node gets created under ‘Web Dynpro Applications’ node, in SE80.
1.2. Create Web Dynpro Application Configuration for OVP.
Right click on the Web Dynpro Application DA ZWDA_OVP_FLIGHT_BOOKING and select ‘Create/Change Configuration’.
A web page ‘Configure Application’ will get open. Fill the Configuration ID as ‘ZWDA_OVP_FLIGHT_BOOKING_CNF’ and click on ‘New’.
Enter the Description on the popup and click on ‘OK’.
On the Select Package popup, click on ‘Local Object’.
1.3. Create Component Configuration for OVP
On the next page, click on ‘Assign Configuration Name’.
Enter the Configuration ID as ‘ZCOMPCONF_OVP_FLIGHT_BOOKING’ and click on ‘OK’.
Configuration Name gets assigned to the Application Configuration. Click on ‘Save’
Click on the above highlighted Configuration Name ‘ZCOMPCONF_OVP_FLIGHT_BOOKING’ and enter the Description . Click ‘OK’.
Click on Local Object.
On the next page, click on ‘Save’.
2. Creating Feeder Class for Form UIBB
Create global class ZCL_FEEDER_FLIGHT_BOOKING_FORM using T-code SE24.
Implement interface ‘IF_FPM_GUIBB_FORM’ for Generic UI Building Block, which in turn implements interface ‘IF_FPM_GUIBB’ for Generic UI Building Block.
Create an attribute structure ST_SBOOK in the class.
Implement method IF_FPM_GUIBB~INITIALIZE and add the below code.
METHOD if_fpm_guibb~initialize.
SELECT * FROM sbook INTO st_sbook UP TO 1 ROWS.
ENDSELECT.
IF sy-subrc = 0.
ENDIF.
ENDMETHOD.
Implement method IF_FPM_GUIBB_FORM~GET_DATA and add the below code.
METHOD if_fpm_guibb_form~get_data.
cs_data = st_sbook.
ENDMETHOD.
Implement method IF_FPM_GUIBB_FORM~GET_DEFINITION and add the below code.
METHOD if_fpm_guibb_form~get_definition.
eo_field_catalog ?= cl_abap_structdescr=>describe_by_data( st_sbook ).
ENDMETHOD.
3. Creating Component Configuration for Form UIBB
On the next page, scroll down to the ‘Overview Page Schema’ section and click on ‘UIBB’. In the context menu, select ‘Form Component’.
A new row gets added under the Section row. Enter the Config ID, highlighted with red, as ZCOMPCONF_UIBB_FLT_BOOK and hit ‘Enter’. This is the component configuration which will be created for Form UIBB ‘FPM_FORM_UIBB_GL2’.
Select the UIBB row and click on ‘Configure UIBB’ button.
Click ‘Yes’.
In the next page, enter the Description for UIBB component configuration and click ‘OK’.
Click ‘Local Object’ on the ‘Select Package’ popup.
Enter the feeder class name created earlier and click on ‘Edit Parameters’.
On the Component configuration page, click on ‘Group’ button in the toolbar above the grid. A new line will be added on the grid with text ‘New Group’.
Double click on the group title and rename it to ‘Flight Booking Details’.
Scroll down in the page to ‘Form UIBB Schema’ section. Select the row for ‘Group 1’ and click on ‘Element’ button on the section toolbar. From the context menu click on ‘Add Element at Next Level’.
In the ‘Add Fields’ Popup, select the rows as per the below screenshot and click on ‘OK’.
The label and input field will get added to the screen. Click on ‘Save’ and close the web page.
Time to test the Web Dynpro Application…
Go to SE80 and open the Web Dynpro Component ‘FPM_OVP_COMPONENT’.
Expand the ‘Component Configurations’ node and you will find a child node ‘ZSM_OVP_DEMO1_COMP_CONF’ which we have created earlier.
Expand the ‘Web Dynpro Applications’ node and search for the WDA application ZWDA_OVP_FLIGHT_BOOKING. On expanding it you’ll find the WDA configuration ZWDA_OVP_FLIGHT_BOOKING_CNF which we have created earlier.
Now, double click on the WDA application ZWDA_OVP_FLIGHT_BOOKING node and go to the ‘Parameters’ tab in the right pane. Add an entry for columns Parameters and Value as ‘WDCONFIGURATIONID’ and ‘ZWDA_OVP_FLIGHT_BOOKING_CNF’, respectively. Save the changes.
To run the application, select the WDA and click the execute button in the toolbar as highlighted in the below screenshot.
The web application will open in a web browser. Congratulations!!!! You have successfully created a Form UBIBB with OVP in SAP FPM.
But, wait the page to title is very is incorrect. Aahhh!!! We’ll have to go to SE80 and do the corrections. ***Frustrating**** Don’t worry 🙂 we have used FPM, it’s very easy to do the corrections from the same web page. Yes, it’s true!
Right click on the web page and in the context menu, select ‘Techincal Help’.
In the Technical Help popup, click on the Component Configuration ‘ZCOMPCONF_OVP_FLIGHT_BOOKING’ highlighted in the below screenshot.
Change the Page title to ‘Flight Booking Details’ under the left ‘Navigation’ pane, as highlighted in the screenshot and click on ‘Save’.
Simply reload the web page and the web page title change is reflected!!!
Thank you for your time! Hope you have enjoyed this detailed tutorial on ‘Create Form UBIBB with OVP in SAP FPM’.