Wednesday, September 15, 2010

How to add buttons to the IC Webclient Toolbar

In the Interaction Center, the agent usually has several buttons in the top of the screen to handle the communication channels like phone and email.

This toolbar consists of several standard deliverd buttons.

This article explains how you can add buttons which launch your own ABAP code (like navigating to a screen, calling ERP transactions, changing the status of the interaction record...)

The implementation of a new button consists of 5 steps:

 1. Creating a new button
 2. Adding the button to the profile
 3. Adding logic in the javascript that handles the buttons
 4. Subscribing to the event
 5. Implementing logic to be called when the event is raised.


1. Creating a new button
The IMG enables you to define your own toolbar buttons.

- SAP Customizing Implementation Guide
  - Customer Relationship Management
    - Interaction Center WebClient
      - Customer-Specific System Modifications
        - Define Toolbar Buttons

2. Adding the button to the profile
In the IMG you have the ability to activate or deactivate buttons in the toolbar profile.

- SAP Customizing Implementation Guide
  - Customer Relationship Management
    - Interaction Center WebClient
      - Basic Functions
        - Communication Channels
          - Define Toolbar Profiles

These new buttons can now be assigned to the toolbar profile, and thus will show up on the screen.

The idea of new buttons is to add DTMF-Tone buttons. A specified DTMF-tone would then be sent when the agent clicks on the button. We will not be discussing this now.

Let's for the example create a button called 'ZGG' and assign it to the profile.
The new button now shows up as expected.

3. Adding logic in the javascript that handles the buttons
In the BSP Workbench (BSP_WD_CMPWB), you should enhance component CRMCMP_IC_FRAME.
This component contains pages with flow logic, one of which we will be changing. This is an enhancement, so let's keep it as general as possible.

Open page header_jscripts.js, and change the logic.
A change needs to be made in function wsb_handler. This function handles all the buttons. If you take a look at it, you will notice that the buttons are handled here one by one.

After the following code:
------------------------------------------
else if( value == "Logon" )




{


mcmPublish( cAppEvtLogon, value, null, null ,null , null );


return;


}
---------------------------------------------------
We will insert our own code. As this is JavaScript, bear in mind that statements are different from ABAP. For instance // is comment.
--------------------------------------------
//INS If the value is Z*, raise our event Z_TOOLBAR_EVENT.

else if(value.charAt(0)=="Z"){ // lets just forward all z-buttons as events :-)
                forwardCall( cAppEventCode, "Z_TOOLBAR_EVENT", value, "", "", "", "", "", "", "", "")
                                       }

//ENDINS
--------------------------------------------
 
So now, if a button is clicked where the technical name starts with a Z, the function forwardcall is raised with parameters Z_TOOLBAR_EVENT and the technical name of the button (in our case ZGG).
 
The forwardcall function will raise the event Z_TOOLBAR_EVENT, and will supply the event with the Parameter1, which is occupied with the name of the button (ZGG).
 
4. Subscribing to the event
Now the event is raised, still nothing really happens, because there are no subscribers yet for the event. Our new event Z_TOOLBAR_EVENT is now raised like other events like 'END_CONTACT'  or 'INTERACTION_ENDED'.
We will be subscribing to the event in component CRMCMP_IC_FRAME (we were already enhancing it).
 
In order to implement the subscription, we should enhance CRMCMP_IC_FRAME/HiddenView.

If the system tells you an enhancement is not possible because class CL_CRM_IC_CONTEXTAREAVIEW_CTXT is marked final, implement SAP 
Note 1142110

 
Now in our newly created subclass of CL_CRMCMP_I_HIDDENVIEW_IMPL, we will redefine method DO_INIT, and add the following code:

CALL METHOD SUPER->DO_INIT.

DATA: esrv TYPE REF TO if_crm_ic_event_srv.
* Subscribe to the z_toolbar_event.
esrv = cl_crm_ic_services=>get_event_srv_instance( ).
esrv->subscribe( event_name = 'Z_TOOLBAR_EVENT'
                        listener        = me ).

We have now subscribed to the event.

5. Implementing logic to be called when the event is raised.
The logic to be called when the event is raised, will be implemented in the redefinition of the IF_CRM_IC_EVENT_LISTENER~HANDLE_EVENT of our created subclass of CL_CRMCMP_I_HIDDENVIEW_IMPL.


--------------------------------------------
CALL METHOD super->if_crm_ic_event_listener~handle_event
         EXPORTING
              event = event.

CHECK event->get_name( ) = 'Z_TOOLBAR_EVENT'.

CALL METHOD event->get_param
    EXPORTING
        name = 'Parameter1'
    IMPORTING
        value = lv_param.

CASE lv_param.

    WHEN 'ZGG'.
        ..............
        ..............
        ..............
    WHEN ....

    WHEN OTHERS.
      .........
ENDCASE.
--------------------------------------------


As the above class is within the IC Framework, we have the ability to read the GDC for instance, to check if (and which) businesspartner is selected, or to read the current interactionrecord.


This allows us to implement complex logic.


You can also implement navigation to a certain screen if you want.

20 comments:

  1. Hi Pieter, when trying to enhance CRMCMP_IC_FRAME/HiddenView as described in your blog, I get the error message: Context class CL_CRM_IC_CONTEXTAREAVIEW_CTXT cannot be extended. The class is marked as FINAL and cannot be inherited. Can you please advice?
    Many thanks, Herbert

    ReplyDelete
  2. Hi Pieter,

    perfect.

    Many thanks again,
    Herbert

    ReplyDelete
  3. Good Morning Pieter,
    is there a way to access crm tables from header_jscripts.js (e.g. SYST)?
    I am trying to call a URL to open in a new browser window when my Z-button
    is pressed. To create that URL I need some information from CRM tables which is not available as a variable in header_jscripts.js.

    Many thanks,
    Herbert

    ReplyDelete
  4. Herbert,

    I don't think you can access CRM data from the script. I suppose the way to go would be to raise an event (like in the example), and in the event, to read CRM data and then call the URL.

    If you really want to do this right, I suppose you would call a logical link that refers to a launch transaction of the type URL that calls the URL and uses parameters from the BDC.

    Regards,
    Pieter

    ReplyDelete
  5. Hi Pieter,
    Here do we have to add the button to any of the profiles or create own profile.

    ReplyDelete
  6. You can add buttons per profile. Either to the standard profiles or to a newly created one.
    The coding as described in the blog is to handle the event that is raised when the button is clicked.

    ReplyDelete
  7. Many thanks for your response

    ReplyDelete
  8. Hi Peiter,

    I have a related query. Is component CRMCMP_IC_FRAME not called in every instance Web UI is launched? I am trying to add some code in view Message so that in the space besides the SAP CRM Logo (as see in the first image in blog), i want the user role to be displayed. the objective is to let users with multiple roles to know in which role they are logged in, at any point of time. While my code works with some users, it does not get triggered in some other users. Can you help? I appreciate that.

    ReplyDelete
  9. Amar, the CRMCMP_IC_FRAME is only called for IC business roles, so not for the 'normal' UI roles such as salespro.

    I think your requirement is something worth investigating, as this is probably something other people are also looking for, so I will look in to how I would fix this.

    Feel free to email me by the way if you need more help.

    Regards,
    Pieter

    ReplyDelete
  10. Thanks Pieter. I realised what you said.

    My requirement just got a little deeper. Within the IC, I have my users with same business role assigned to multiple org units. I want the user to know with which Org Unit assignment he logged in, at any point of time in the Web UI. I could find all the org units assigned to user but in real time I need to find the 'live' Org Unit through which the user is logged in. Any ideas?

    ReplyDelete
  11. I am trying to fetch Org unit through GET_ORG_UNIT of CL_CRM_IC_SERVICES in CRMCMP_IC_FRAME/Message in the htm page. However, the methods return nothing! Tried CL_CRM_AUI_SERVICE too, nothing is returned. Any idea Peiter, what is wrong here in CRMCMP_IC_FRAME? I appreciate your time and help.

    ReplyDelete
  12. Amar,

    I actually think that while logging on to the CRM system, the organisational model is used to determine the business role, but only the business role is stored in the GDC (so not the organisational unit that was clicked on). I think it is thus not possible to determine the org unit in a later stage (sorry).

    Regards,
    Pieter

    ReplyDelete
  13. Hi Pieter,

    Thanks for the wonderful blog. I am facing an issue as an offshoot of making this change. After i enhance the component CRMCMP_IC_FRAME, somehow the 'waiting/busy wheel' that use to show up when system is busy getting any data does not show up anymore. If i remove the enhancement for CRMCMP_IC_FRAME then the wheel shows up fine. Any hints ??

    Appreciate your help.
    Tej

    ReplyDelete
  14. Hi,
    I tryied to modify the js file but the standard doesn't allow me.
    My customer don't want to modify the standard.
    Do you know another way to add the event?
    thanks
    Marco

    ReplyDelete
  15. Hi,

    Can you please explain how to delete Buttons in IC Web client? Is this the work of functional consultant ????????????

    ReplyDelete
  16. Simi,

    customizing of the interaction center toolbar is done in SPRO

    - SAP Customizing Implementation Guide
    - Customer Relationship Management
    - Interaction Center WebClient
    - Customer-Specific System Modifications
    - Define Toolbar Buttons

    This can be done by a functional consultant indeed.

    Regards,
    Pieter

    ReplyDelete
  17. Hi,
    i have added button on screen but when i change header_jscripts.js to add code for new button it is giving me an error

    Carry out modification comparison for WAPP CRMCMP_IC_FRAME HEADER_JSCRIPTS.JS first. No changes possible

    kindly suggest..

    ReplyDelete
  18. Hi Pieter,

    Your way is really cool but i need one more help. For enhancing to "header_jscripts.js", how can i enhance this object. When i try to enhance, system ask me access for repair.


    Thank you,
    Utku Y.

    ReplyDelete
  19. Wonderful addition. Thank you for the helpful information.
    WK

    ReplyDelete