Skip to Content

This blog 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

http://fuller.mit.edu/web_dynpro/WebDynproABAPpart1.pdf

http://fuller.mit.edu/web_dynpro/WebDynproABAPpart2.pdf

http://fuller.mit.edu/web_dynpro/WebDynproABAPpart3.pdf

If you are familiar with ABAP webdynpro but not with FPM go through the below docs and elearning material first.

http://www.****************/Tutorials/WebDynproABAP/FloorPlanManager/Page1.htm

http://www.****************/Tutorials/WebDynproABAP/FloorPlanManager/GAF2.htm

go through the below excellent e learning material on SDN.

http://wiki.sdn.sap.com/wiki/display/WDABAP/eLearning+Tutorials+-+Floorplan+Manager+for+Web+Dynpro+ABAP

after the above tutorial download the developer guide from the link below

http://scn.sap.com/docs/DOC-26081

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.

pfcg.JPG

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

newappconfig.JPG

click on ‘Create’ button to go to the individual component configuration view. The component configuration that is currently used by application is displayed there.

compconfig.JPG

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

newcompconfig.JPG

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.

appcc.JPG

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.

appccchange.JPG

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 configuration ZENH_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.

fpmafterchange.JPG

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)

fpmcool.JPG

NOTE: The other option to achieve the above functionality would be to create a post-exit for OVERRIDE_EVENT_OIF method of component controller for WD component  /SAPSRM/WDC_FPM_OIF_CONF and write the code in the post-exit.

I hope this blog will be of some help to ABAP webdynpro developers working in SRM 7.

Thank you so much for reading the blog

thanks,

sankara rao bhatta.

To report this post you need to login first.

10 Comments

You must be Logged on to comment or reply to a post.

  1. Tushar Shinde

    Awesome blog, with lots of inputs on customizing FPM views by code using AppCC component.

    Thanks a ton…n keep blogging…

    Best Regards

    Tushar Shinde

    (0) 
  2. Matteo Montalto

    Excellent howto, I’m dealing on a modification in SRM 7.0 exactly on the same argument (PO, and contract overview) and found your guide really interesting.

    Just a question; I need to introduce a selection popup after the pressure of an  FPM OIF button and the above approach requires a lot of work… As you stated in the end of your article, another option is to enhance the componentcontroller of the WD component /SAPSRM/WDC_FPM_OIF_CONF by making an exit.
    Do you think this could be considered a “clean” solution as well? Or it could bring any drawback? Isn’t that WD component “shared” by multiple applications?

    (0) 
    1. Tushar Shinde

      Hi,

      Can you explain us in more detail about your requirement,

      As per my understanding, you wish to show a pop-up on click of FPM Button, that is possible, in that case you can enhance the component configuration and add your own custom UIBB in targetted SubView and you can handle the raised FPM Event in your custom UIBB to display selection pop-up, also there is huge amount of shared data thorugh classes, which can help you in your context of development.

       

      Thanks & Regards,

       

      Tushar.

      (0) 
      1. Matteo Montalto

        Hi Tushar, I raised a post on SCN for the task. Basically, I need to open a popup window on click of the FPM “Print Preview” button. That popup will let the user choose an entry on a multiple radiobutton, then proceed with the event execution. I’m actually in contact with Sankar for the task, but it doesn’t seem so straightforward.

        (0) 
        1. Tushar Shinde

          Hi Matteo,

           

          What I understand as per the explanation provided by you,

          1. Display Pop-Up on Print Preview button.

                 -> Create a UIBB component with One Blank View & another View which will be having multiple radiobuttons. Add the UIBB in FPM Config, On click of Print Preview button you can handle the event in the UIBB developed process_event( ) method, and display the View containing Radio Button as a popup -> by raising a event from Component COntroller & creating a Event Handler in Blank view to generate a Pop-Up.

                 -> Another way around is to implement interface IF_FPM_APP_CONTROLLER through which you can control the custom processing in method BEFORE_PROCESS_EVENT( ), wherein you can override with your own custom event being raised to generate a Pop-Up as required, again upon selection in Pop-Up, you can re-trigger Print Preview Event with required information in event parameters.

           

          Let me know if things are working fine.

           

          Thanks & sorry for late reply.

           

          Best Regards

          Tushar Shinde

          (0) 
  3. ANURAG CHOPRA

    Hi Sankara,

     

    Great Insight, Just want to highlight one thing here that if the scope of the requirement is to change the layout of UIBBs or hiding existing elements, one could use the config mode = X in the url or create your own ID and achive the same instead of doing the enhancement, code free.

     

    Regards

    Anurag Chopra

    (0) 

Leave a Reply