Gratis demo

How to add buttons to the IC Webclient Toolbar

Pieter Rijlaarsdam, 15 september 2010
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 );



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, “”, “”, “”, “”, “”, “”, “”, “”)

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:


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
              event = event.

CHECK event->get_name( ) = ‘Z_TOOLBAR_EVENT’.

CALL METHOD event->get_param
        name = ‘Parameter1’
        value = lv_param.

CASE lv_param.

    WHEN ‘ZGG’.
    WHEN ….


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.

Pieter Rijlaarsdam

Read all my blogs

Receive our weekly blog by email?
Subscribe here: