Skip to Content

In this document we will see how to add a custom button to the Shopping Cart and the code for this button in order to call to a custom component for show some data.

This can be applied also to other documents like PO, CTR, etc.

Creating the custom Component

Goto se80 and create a new component called ZZ_SC_EXTRA_INFO:

/wp-content/uploads/2012/03/1_82727.jpg

/wp-content/uploads/2012/03/2_82728.jpg

/wp-content/uploads/2012/03/3_82729.jpg

Retrieve the SC guid:

We need to know the guid of the shopping cart in order to obtain some data we want to show.

First we’re going to create a node in component controller to store that guid:

/wp-content/uploads/2012/03/4_82730.jpg

/wp-content/uploads/2012/03/5_82731.jpgCreate also an attribute:

/wp-content/uploads/2012/03/6_82732.jpg

/wp-content/uploads/2012/03/7_82733.jpg

Ok, now we need to fill this attribute, first we need to map the context node in our window, so go to the window and drag and drop the node:

/wp-content/uploads/2012/03/8_82734.jpgNow we’re going to create a parameter in the plug that will start the application, so go to the Inbound Plugs Tab and enter in the method HANDLEDEFAULT doing double click in the plug.

/wp-content/uploads/2012/03/9_82735.jpg

Create the parameter:

/wp-content/uploads/2012/03/10_82736.jpg

Now we’re going to use the code wizard/wp-content/uploads/2012/03/11_82737.jpg

in order to set the value of that guid to our context node:

/wp-content/uploads/2012/03/12_82738.jpg

 

DATA: lo_nd_zz_sc_guid TYPEREFTO if_wd_context_node,
 lo_el_zz_sc_guid TYPEREFTO if_wd_context_element,
 ls_zz_sc_guid TYPE wd_this->element_zz_sc_guid.

 lo_nd_zz_sc_guid = wd_context->get_child_node( name = wd_this->wdctx_zz_sc_guid ).
 lo_el_zz_sc_guid = lo_nd_zz_sc_guid->get_element( ).
 *   Set the parameter value to the context node;   
 ls_zz_sc_guid-sc_guid = zz_sc_guid.
 lo_el_zz_sc_guid->set_static_attributes(
 EXPORTING
 static_attributes = ls_zz_sc_guid ).

We need also to create a webdynpro application:

/wp-content/uploads/2012/03/13_82740.jpg

/wp-content/uploads/2012/03/14_82741.jpg/wp-content/uploads/2012/03/15_82763.jpg

Add the GUID as parameter using the matchcode in Parameters Tab:

/wp-content/uploads/2012/03/16_82743.jpgNow, you have the guid of your shopping cart and you can display the extra info you want in the main view, but I leave this part from your side.

In my case I’ve created a simple WDA adding two “text edit” to retrieve some data from a custom table, but if you want you can create a complex component for add some extra functionality to your solution.

/wp-content/uploads/2012/03/17_82744.jpg

Adding the button to SC

Define a custom action

Go to SPRO to the following path:

SAP Supplier Relationship Management -> SRM Server -> Cross-Application Basic Settings -> Extensions and Field Control (Personalization) -> Define and Assign Actions

/wp-content/uploads/2012/03/1_82727.jpg

We need to first define the action:

/wp-content/uploads/2012/03/2_82728.jpg

Then we need to assign that action to the SC:

Choose the set type ‘05’ for header and the object type BUS2121 for shopping cart.

/wp-content/uploads/2012/03/3_82729.jpg

Next step is active this action in the following path:

/wp-content/uploads/2012/03/4_82730.jpgActive the action for the mode ‘Display’ for the Shopping Cart. You must set to X the checkbox PDO Action Enabled.

/wp-content/uploads/2012/03/5_82731.jpg

At this point you can also specify a dynamic class and method for control the visualization of the button dynamically. In this example this is not necessary, but if you want to create one, you only need to go to tx SE24 and create a class with the super class /SAPSRM/CL_PDO_DYN_MDA_HD and a method with the following parameters:

/wp-content/uploads/2012/03/6_82732.jpgWithin the parameter CS_METADA you have a field called ACTION_ENABLED, you need to set it to X to display the button or set to SPACE to hide the button.

Changing the component configuration.

At this point the button is not displayed in the Shopping Cart yet. Why?

You need to change also the component configuration. Go to the portal and create a new SC. With the right button of the mouse choose “More Field Help”:

/wp-content/uploads/2012/03/7_82733.jpg

And here you have the component name, the view and the component configuration:

/wp-content/uploads/2012/03/8_82734.jpg

Go to that component in se80, open the folder called “Component Configurations” and find the Configuration ID:

/wp-content/uploads/2012/03/9_82735.jpg

Push the button “Start Configurator” and an internet browser will be opened: (Display configuration in new versions)

/wp-content/uploads/2012/03/10_82736.jpg

Choose Other Functions -> Enhance . Create a custom enhacement point

Click in the button called “Extensibility 1”:

/wp-content/uploads/2012/03/11_82737.jpgOk, we need to change the data of this button with the data of our button, like this:

/wp-content/uploads/2012/03/12_82738.jpg

We need to mark “Enabled” and put the name of our action in the field “FPM Event ID”. Also we need to set the Visibility to ‘Visible’ and fill other fields like Explanation, etc…

Push “Save” and now you should see our button in SC. Create a new one and try. Remember that we add the button only for Display mode, if you want to see the button in Edit mode you need to add another entry by customizing or leave empty the field Process Mode for display it in all the cases.

/wp-content/uploads/2012/03/13_82740.jpg

Adding some code to the button

Ok, now we need to add some code to our button. As we saw the webdynpro component is FPM_OIF_COMPONENT and the view CNR_VIEW. So, let’s go to that component and view.

In “Actions” tab we can see there is an action called “BUTTON_PRESSED”:

/wp-content/uploads/2012/03/14_82741.jpg

Ok, we need to create an enhancement point in order to add a post-exit for the method “ONACTIONBUTTON_PRESSED”. So, use the button  /wp-content/uploads/2012/03/15_82763.jpgand create a new one.

/wp-content/uploads/2012/03/16_82743.jpg

Now we need to use the button to create a Post-Exit in the method ONACTIONBUTTON_PRESSED:

/wp-content/uploads/2012/03/17_82744.jpgFor this part we need to check the standard code of that method and copying some parts and adding other custom parts the code could be:

DATA: lv_id TYPE string,
       lv_event_id TYPE fpm_event_id.

 DATA: lo_nd_oif_application TYPEREFTO if_wd_context_node,
 lo_nd_variant TYPEREFTO if_wd_context_node,
 lo_nd_toolbar TYPEREFTO if_wd_context_node,
 lo_nd_button TYPEREFTO if_wd_context_node,
 lo_el_button TYPEREFTO if_wd_context_element,
 lo_nd_other_functions TYPEREFTO if_wd_context_node.

 DATA: lv_substring TYPE string,
 lv_substring_i TYPEi,
 lv_node_name TYPE string,
 lv_position TYPE string,
 lv_length TYPEi,
 lv_seq TYPEi.

 DATA: lv_boid      TYPE bbp_guid.

 DATA:lt_keys TYPESTANDARDTABLEOF string,
 lv_key LIKELINEOF lt_keys.

 TYPES:BEGINOF y_parameters,
 name TYPE string,
 valueTYPE string,
 ENDOF y_parameters.
 DATA: lt_parameters TYPESTANDARDTABLEOF y_parameters,
 ls_parameter LIKELINEOF lt_parameters.

 * Obtain parameters;
 DATA: lo_fpm TYPEREFTO if_fpm.
 lo_fpm = cl_fpm_factory=>get_instance( ).
 lo_fpm->raise_event_by_id( lv_event_id ).
 lt_keys = lo_fpm->mo_app_parameter->get_keys( ).
 LOOPAT lt_keys INTO lv_key.
 ls_parameter-name = lv_key.
 lo_fpm->mo_app_parameter->get_value(
 EXPORTING  iv_key = lv_key
 IMPORTING  ev_value = ls_parameter-value  ).
 INSERT ls_parameter INTOTABLE lt_parameters.
 ENDLOOP.

 lv_id = wdevent->get_string( 'ID' ).
 lo_nd_oif_application = wd_context->get_child_node( name = wd_this->wdctx_oif_application ).
 lo_nd_variant = lo_nd_oif_application->get_child_node( name = wd_this->wdctx_variant ).
 lo_nd_toolbar = lo_nd_variant->get_child_node( name = wd_this->wdctx_toolbar ).
 lo_nd_other_functions = lo_nd_toolbar->get_child_node( name = wd_this->wdctx_other_functions ).
 lv_substring = lv_id.

 lv_length = STRLEN( lv_id ).
 lv_seq = lv_length - 3.
 IF lv_id+lv_seq = '_CP'.
 lv_substring = lv_substring(lv_seq).
 lv_id = lv_substring.
 ENDIF.
 WHILE lv_substring CS'_'.
 lv_position = sy-fdpos + 1.
 lv_substring = lv_substring+lv_position.
 ENDWHILE.
 IF lv_substring CO'1234567890'.
 lv_substring_i = lv_substring.
 ENDIF.

 * item action
 IF lv_id CS'_item'.

 ELSE.
 * header action
 IF lv_id CA '0123456789'.
 lv_position = sy-fdpos - 1.
 lv_node_name = lv_id(lv_position).
 IF lv_id CS 'OTHER_FUNCTIONS'.
 lo_nd_button = lo_nd_other_functions->get_child_node( name = wd_this->wdctx_button ).
 lo_nd_button->set_lead_selection_index( index = lv_substring_i ).
 lo_el_button = lo_nd_button->get_element(  ).
 TRY.
 lo_el_button->get_attribute(
 EXPORTING
 name =  `EVENT_ID`
 IMPORTING
 value = lv_event_id ).
 CATCH cx_wd_context.
 ENDTRY.

 *       Read the guid of the SC:
 READ TABLE lt_parameters INTO ls_parameter WITH KEY name = 'SAPSRM_BOID'.
 lv_boid = ls_parameter-value.

 *       Leave the method if it isn't a custom action
 IF lv_event_id(1) NE 'ZZ'.
 RETURN.
 ENDIF.
  *       Action triggered;
 CASE lv_event_id.
 WHEN 'ZZ_SC_EXTRA_INFO'.
 "We need to put here our code for the button...
 
 ENDCASE.
  ENDIF.
 ENDIF.
 ENDIF.

We need to add the code within the CASE statement. For call our custom webdynpro we use the classes CL_WD_UTILITIES and IF_WD_WINDOW_MANAGER:

DATA: lv_url TYPE string,
 d_url(255) TYPEc,
 lv_app_name TYPE string,
 host TYPE string,
 port TYPE string,
 out_protocol TYPE string,
 in_parameters TYPE tihttpnvp,
 wa_params LIKELINEOF in_parameters,
 lv_iview TYPE string,
 gf_value_old TYPE /sapsrm/char512,
 gf_clength TYPE int2.
 DATA:  lo_window_manager TYPEREFTO if_wd_window_manager,
 lo_api_component  TYPEREFTO if_wd_component,
 lo_window         TYPEREFTO if_wd_window.

 *   Use the WD application created and pass a value to the parameter SC_GUID:
 wa_params-name = 'ZZ_SC_GUID'.
 wa_params-value = lv_boid.
 APPEND wa_params TO in_parameters.
 lv_app_name = 'ZZ_SC_EXTRA_INFO'.

 CALLMETHOD cl_http_server=>if_http_server~get_location
 IMPORTING
 host         = host
 port         = port
 out_protocol = out_protocol.

 CALLMETHOD cl_wd_utilities=>construct_wd_url
 EXPORTING
 application_name = lv_app_name
 in_host          = host
 in_port          = port
 in_protocol      = out_protocol
 in_parameters    = in_parameters
 namespace        = 'sap'
 IMPORTING
 out_absolute_url = lv_url.

 lo_api_component  = wd_comp_controller->wd_get_api( ).
 lo_window_manager = lo_api_component->get_window_manager( ).

 CALLMETHOD lo_window_manager->create_external_window
 EXPORTING
 url    = lv_url
 RECEIVING
 window = lo_window.
 lo_window->open( ).

And now you can use the button for display the custom webdynpro you want:

/wp-content/uploads/2012/03/18_82762.jpg

 

To report this post you need to login first.

25 Comments

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

  1. Laurent Burtaire

    Hello Ricardo,

    your document is very usefull 🙂

    Nevertheless, i have one question. Instead of doing Component Configuration modification (a modification key is mandatory), i tried with a WDCC enhancement.

    Unfortunately, it does not work: custom buttons are not displayed…

    Have you already been confronted to such a problem ?

    Regards.

    Laurent.

    (0) 
    1. Ricardo Romero Mata Post author

      Hi Laurent,

      I’ve added several buttons to some documents and I’ve never needed a modification key to change the Component Configuration (or I don’t remember it), only ask for a transport request. 😕

      I’ve also added some buttons in other places, like accounting tab, creating an enhancement point and is working fine, but for this is not necessary the customizing part.

      (0) 
        1. Laurent Burtaire

          Hello Ricardo,

          finally, we made standard modification for concerned WDCC and now, it works: button are displayed.

          I think there is a bug in SRM 7.02 regarding WDCC enhancement.

          Regards.

          Laurent.

          (0) 
          1. Rohini Shankar
            Hi Laurent,  Even I am facing a similar problem.when I tried to edit the standard component configuration,it is asking for a modification key.Please let me know how have you resolved the issue.  Thanks, Rohini
            (0) 
            1. ruggo ruggo

              After you push the button “Start Configurator” and an internet browser is opened instead of the button “Change” use the button “Other Functions”->”Create Enhacement”. In the opened window chose Z* package and Z* configuration name. Now your Z* enhacement is the same as original configuration and will be shown instead of one. And you may change enhacement with your needs.

              (0) 
  2. debe 1104

    Hi Recardo,

    Great Job..! 🙂

    I have one doubt. Is there any possibility to control the visibility of FPM EDIT or any other button using code. In my case EDIT button needs to be enabled for some condition and some case it should be invisible also. Can we achieve such kind of scenario.

    (0) 
    1. Ricardo Romero Mata Post author

      Hi Debe,

      Yes, I think you can do it adding a new entry in “Configure Control of Actions on Header Level” for the action EDIT and the business object you want. Add a dynamic class and method to control de visibility of the button depending on your conditions.

      (0) 
      1. debe 1104

        Thanks for your time and quick response. !

        You are right. Its working perfect when I am trying to call from “My Requests”. But if it calls from “Approver Inbox” not triggering to the above mentioned place and not working.

        Is there any place to control when from Approver’s Inbox.

        (0) 
          1. krishna mohan

            Hi Recardo,

            i have added new column for the SRM standard field i.e MANU_PROD (Manufacturer part number ) to the item overview of shopping cart screen by enhancing the webdynpro component . i put the manufacuturer part number in that column and if i  press enter then  finally that column unable to hold the value. we are using SRM 7.02 version.

            My requirement is,  that column should hold the given value .

            Can you please suggest me how to do this ?

            Thanks and regards

            krishna mohan

            (0) 
  3. Devraj Singh

    Excellent Post!!! Thanks

    I have few open questions! ( SRM version 7.02 & higher )

    1 – If I need to add a button for additional functionality on any SRM business screen (.i.e. SC, PO, Inv, Rfx etc), Then

    Can’t we directly enhance FPM Component Configuration & use Extensibility buttons. I guess it’s not mandatory to implement SPRO config (.i.e Define Button, Assign etc).

    Regards

    Devraj

    (0) 
  4. Yayati Ekbote

    Hello Ricardo,

    Great post. I have a doubt. On line number 33 of the 1st code snapshot. How is the lv_event id populated? If it is the FPM_EVENT_ID in FPM configuration, then how do we receive it in field lv_event_id?

    Regards,

    Yayati Ekbote

    (0) 
  5. Shyam Agrawal

    Hello Ricardo,

    That’s really a great blog. Using this I am able to add a new custom button on SC header and add required functionality.

    For me, a bit difference in requirement is that I want this button only when an Approver is opening SC and not for regular display and edit options.

    So, when I am setting up metadata, do I still need to use same Metadata as per your document, i.e. Set-Type 05 or something else.

    (0) 

Leave a Reply