This tutorial is intended for ABAP webdynpro developers working in SRM7 with good knowledge on FPM. Most of the requirements we encounter in projects involves modifying web ui components. Almost all of the applications in SRM are built based on ABAP webdynpro FPM. Modifying FPM based applications is bit different than modifying normal ABAP webdynpro applications. In the coming sections we will see different methods of achieving this.
If you are not familiar with webdynpro go through the below links first to get a hang of ABAP webdynpro
If you are familiar with ABAP webdynpro but not with FPM go through the below docs and elearning material first.
- Getting started with Floor Plan Manager (Web Dynpro for ABAP)
- Building a Simple RoadMap Application using Floor Plan Manager GAF (Guided Activity Floorplan)
Go through the below excellent e learning material on SDN.
After the above tutorial download the developer guide from the link below
Ok… enough of material.. let’s get into some action now »
Basically there are three ways of modifying the PO FPM elements depending on the requirement.
1. If you want to hide/remove MAIN/SUBVIEWS or indivudual UIBBs contained in them and you want to make these changes visible across all roles then enhance the standard component configuration and make the necessary changes.
2. If you want hide/remove fields with in specific UIBB ( for example you want to hide PO number field in ‘Overview* tab ) based on some logic. you can use WD_BADI_DOMODIFYVIEW BADI, create an implementation with filters component ‘/SAPSRM/WDC_PO_DOFC_OV_HD ‘ and view ‘V_PO_DOFC_OV_GN_HD ‘ and write the below code (to get the component and view name , right click on the field in web ui and go to ‘more field help’)
DATA : lo_ref TYPE REF TO cl_wd_transparent_container.
lo_ref ?= view->get_element( 'LEFT_CONTAINER' ).
IF lo_ref IS NOT INITIAL.
lo_ref->remove_child( id = 'PO_NUMBER_LABEL' ).
lo_ref->remove_child( id = 'PO_NUMBER' ).
ENDIF.
3. If you want to hide/remove/add MAIN / SUBVIEWS based on some logic, then you have to follow the method I mentioned below.
First let’s look at the standard purchase order display screen and understand the difference components and configurations that it uses.
Login with the employee role and go to shopping area->My Pos POWL query where you will see bunch of POs. Open any of the PO by clicking on it. Right click on any of the tabs ( Overview, Header, Approval etc., ) and go the ‘More field help’ of the UI element. You will see below information
Header 1 |
Header 2 |
Application | /SAPSRM/WDA_L_FPM_OIF |
Webdynpro component | FPM_OIF_COMPONENT |
Window Information | FPM_WINDOW |
View Information | CNR_VIEW |
Configuration ID | /SAPSRM/WDCC_FPM_OIF_PO_PURCH |
Now go to component FPM_OIF_COMPONENT from SE80 and locate the application /SAPSRM/WDA_L_FPM_OIF. This application will have different application configurations associated with it. We need to figure out which application configuration is getting called at run time. To know this we need to go to PFCG and see the Employee role, go to ‘display purchase order’ webdynpro application and click on details button.
Now double click on application configuration /SAPSRM/WDAC_I_FPM_OIF_PO_PURCH and select ‘Start Configurator’, which will take you to application configuration browser window. Click on ‘Other funcitons’ dropdown button and select create enhancement. This will open up a pop up window asking for the name of new configuration, description and package. Enter a configuration name starting with Z or Y and click OK
Click on ‘Create’ button to go to the individual component configuration view. The component configuration that is currently used by application is displayed there.
We need to create an enhancement for this component configuration as well and use it in the apllication configuration enhancement. To create enhancement for component configuration /SAPSRM/WDCC_FPM_OIF_PO_PURCH, expand the component configuraiton section of FPM_OIF_COMPONENT and locate the configuration /SAPSRM/WDCC_FPM_OIF_PO_PURCH. start the configurator and select ‘create enhancemnet’ from the ‘other functions’ button dropdown. Enter any name starting with Z or Y and select OK. save the configuration. Now replace /SAPSRM/WDCC_FPM_OIF_PO_PURCH with the Z component configuration that we just created.
After this is done click on ‘go to compoent configuration’ and select ‘change’ -> ‘global settings’. you will see under ‘application specific parameters’ , webdynpro component and confguration used for AppCC.
we need to create our own custom AppCC component by copying the standard WD component /SAPSRM/WDC_FPM_OIF_CONF and component configuration /SAPSRM/WDCC_FPM_APPCC_PO_PURCH. Go to se80 and create both ( configuration can not be copied. so just look at the standard configration /SAPSRM/WDCC_FPM_APPCC_PO_PURCH and creata Z configuration similar to it ).
Once we have created the custom AppCC component and configuration, replace the standard AppCC component and configuration with custom ones.
Ok… we are done with the enhancement part . As we have created a custom AppCC component, we can now add/remove main/subviews as we want. let’s look at a simple scenario.
The requirement is to change the name of the ‘Header’ mainview to ‘Header after change’ and remove the subview ‘Budget’ from the mainview ‘Header’ and also add a new subview with name ‘ FPM is Cool’ which holds a custom component ( YTEST ) as an UIBB.
The above requirement can be achived by just changing the custom component configurationZENH_SAPSRM_WDCC_PO_PURCH that we had created earlier. But what if we need to do that based on some logic, we need a place to write the code. This is where the interface method OVERRIDE_EVENT_OIF of AppCC component comes into picture. Go to the component controller of component ‘ ZWDC_FPM_OIF_COMP ‘ and open the method OVERRIDE_EVENT_OIF’ and write the below code at the end.
TYPES:
BEGIN OF ty_s_uibb,
component TYPE string,
interface_view TYPE string,
config_id TYPE wdy_config_id,
config_type TYPE wdy_config_type,
config_var TYPE wdy_config_var,
needs_stretching TYPE fpm_needs_stretching,
location TYPE fpm_location,
index TYPE fpm_index,
END OF ty_s_uibb .
DATA: ls_uibb TYPE ty_s_uibb,
lt_uibb TYPE STANDARD TABLE OF ty_s_uibb .
ls_uibb-component = 'YTEST'.
ls_uibb-interface_view = 'YTEST'.
APPEND ls_uibb TO lt_uibb.
CASE io_oif->mo_event->mv_event_id.
WHEN 'FPM_START'.
TRY.
*rename the main view Header to Header after change
CALL METHOD io_oif->rename_mainview
EXPORTING
iv_variant_id = 'PO_PUR'
iv_mainview_id = 'PO_HDR'
iv_new_name = 'Header After Change'
*remove subview 'Budget' under main view Header .
CALL METHOD io_oif->remove_subview
EXPORTING
iv_variant_id = 'PO_PUR'
iv_mainview_id = 'PO_HDR'
iv_subview_id = 'Budget'.
add subview FPM is coll in Header mainview
CALL METHOD io_oif->add_subview
EXPORTING
iv_variant_id = 'PO_PUR'
iv_mainview_id = 'PO_HDR'
iv_subview_id = 'mysubview'
iv_subview_name = 'FPM is Cool'
it_uibb = lt_uibb.
CATCH cx_fpm_floorplan .
ENDTRY.
ENDCASE.
This is how PO screen looks after the code change. Header description is changed, ‘Budget’ subview is removed and there is a new subview with name ‘ FPM is Cool’ added.
If you now click on subview ‘FPM is Cool’, you can see the custom component YTEST ( I had created a simple component YTEST with single button and some text)
I hope this tutorial will be of some help to ABAP webdynpro developers working in SRM 7.
Next in the series: How to Access PO Details from Custom Component Embedded in Standard FPM in SRM7