When I was starting to work with SAP CRM and in particular with Interaction Center functionality I was inspired by the document on how to add an IC toolbar button by John Burton. I still remember those funny feeling that there is always a place for fun during routine daily work. But since then I was interested in the following. Ok, we know how to add a button. But if there is a button then we need a place to put its logic in there. There were solutions similar to this one. But this was always a modification of js-files or standard basic components which would probably get you in trouble with any new standard updates in them shipped during next service package or OSS notes. Personally I’ve seen such issues when standard IC buttons or ICI integration stoped working.

BTW, user parameter WCF_IGNORE_ENHANCEMT set as A has been very handy to identify such issues.

During the latest project I realized that there is already new possibility to add a logic for z-button handling in IC toolbar. But let’s start from the scratch. System creates IC toolbar buttons in component ICCMP_CCS page fragment wsb_icon.htm. All buttons (even z-one) are created with onClientClick attribute as the call of buttonCallback function passing button’s ID.

There is the way I’m talking about in component CRMCMP_IC_FRAME in Pages with Flow Logic inside header_jscripts.js. No surprises yet.

The code which draw my attention is at the very end of wsb_handler function. This function is called from buttonCallback (which is in ICCMP_CCS/wsb_icon).


...
  try
  {
    /* simulate htmlb click in current view */
    var vWindow = contextArea.getApplicationWindow( );
    var vContainer = vWindow.document.getElementById( wsb_cButtons );
    if( vContainer == null )
      return ;
    var buttons = vContainer.children;
    var vRegExp = new RegExp( "_" + value + "$" );
    for( i = 0; i < buttons.length; i++ )
      if( buttons[ i ].id.search( vRegExp ) !=  - 1 )
        break;
    if( i >= buttons.length )
      return ;
    var button = buttons[ i ];
    if( button == null )
      return ;
    event.cancelSubmit = false;
    button.click( );
  }
  catch( ex ){}
...






There is a comment there which describes what is done. The logic we actually have is:

– find a container element with id ‘wsb_buttons’ (constant wsb_cButtons). The actual area where the system tries to find this element includes navigation bar area and work area.

– take its (direct) children and go through them looking for a ‘button’ with id formed as blablabla_<button_id> (RegExp call in mentioned code).

– click it.

Let’s assume that we want to handle our button which is defined in IC toolbar as zMyICButton (IMG -> CRM -> Basic Functions -> Communication Management Software Integration -> Define Toolbar Buttons and Define Toolbar Profiles).

So we need to create a container with ID ‘wsb_buttons’ and put a button inside it with id which ends with underscore and IC toolbar button ID. In our case IC toolbar button ID is zMyICButton. So our button should have an id for instance as btn_zMyICButton.

But where to put this stuff? First place which came to my mind was hidden view (CRMCMP_IC_FRAME/HiddenView ). As far as I started this blog to describe as much a ‘standard’ way as possible I wouldn’t be completely satisfied with this solution.

Exploring some other possibilities I found the way without enhancements. And the answer is Layout Profile

Layout profile (IMG -> CRM -> UI Framework -> Technical Role Definition -> Define Layout Profile) of a business role defines components which are loaded in navigation bar area.

We can create an own ‘hidden’ component and put our ‘buttons’ in it.

In my example this component will be quite simple. No context nodes. Just a component, a window, a view. For example ZTESTICBUTTONS component, ZTESTICBUTTONS/MainWindow window and ZTESTICBUTTONS/TestICButton view attached to it.  The htm page of the view should be the following:


<%@page language="abap" %>
<%@extension name="thtmlb" prefix="thtmlb" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<%@extension name="bsp" prefix="bsp" %>
<SPAN style = "display:none;">
<div id = "wsb_buttons" >
<thtmlb:link  id      = "btn_zMyICButton"
              text    = "standard"
              onClick = "zmyicbutton" />
<%--Other z-IC-buttons have to be placed here--%>
</div>
</SPAN>






Note that id is case sensitive here.

Certainly, extensions might be reduced. But I left this as it was.

You may complain: ‘Hey, it’s not a button! It’s a link!’. And you will be completely true. We can not use thtmlb:button element because when thtmlb:button is being rendered <a> tag, which includes onClick attribute and appropriate id, is surrounded with an additional <span> tag. And as far as above mentioned code from wsb_handler takes only direct children of ‘wsb_buttons’ element these <span> tags ruin all the logic.

The thtmlb:link element will satisfy our needs in this case.

Also we will need an event handler for zmyicbutton event in the view controller. Event handler is quite simply. Just for demonstration purpose:


METHOD eh_onzmyicbutton.
* confirm_poput is a view controller attribute:
* public section.
*
*  data CONFIRM_POPUP type ref to IF_BSP_WD_POPUP .
  IF confirm_popup IS NOT BOUND.
    DATA: lv_title TYPE string,
    lv_text TYPE string.
    lv_title = 'My IC Button'.
    lv_text = 'Does it work?'.
    CALL METHOD comp_controller->window_manager->create_popup_2_confirm
      EXPORTING
        iv_title          = lv_title
        iv_text          = lv_text
        iv_btncombination = if_bsp_wd_window_manager=>co_btncomb_yesnocancel
      RECEIVING
        rv_result        = confirm_popup.
  ENDIF.
  confirm_popup->open( ).
ENDMETHOD.






After the component is created define it as layout component ( IMG -> CRM -> UI Framework -> Technical Role Definition -> Define Layout Components ) and attach it to Layout Profile used in your business role.

layout component.png

Comp. Usage is freely (uniquely) defined.

And here the result:

Button.png

We can utilize these IC-buttons to open own popus (for example implementing directory search from SAP CRM using interface DAI from SAP BCM), implement quick dialing/transfer buttons etc.

But… We are not done yet. If a button not handled in standard way in wsb_handler, corresponding event will be sent to the system using a code just above the code which sends the click to buttons.


  if( bEventSend )
    wsb_action_event_send( value, paramA, paramB );






This particular code might generate for example a warning message in WebUI ‘You must be in an active call to use this function’ (message class CRM_IC_APPL_UI_CHMSG number 021) when pressing our own z-toolbar button (in phone channel it comes from CL_CRM_MCM_PHONE_CHANNEL->ACTION_HANDLER on send_bsp_msg( msg_type = ‘W’ msg_number = ‘021’. call ).

Unfortunately the call to wsb_action_event_send function is made before generating a button click in wsb_handler function. I didn’t found any suitable way to prevent this function call rather then avoid this warning message by implementing implicit enhancement in the very begining of CL_CRM_MCM_SESSION->ACTION_HANDLER class as:


METHOD action_handler .
ENHANCEMENT 1  ZMCMSESSION.    "active version
* All z-actions are not handled in MCM if this enhancement is active
  IF action CP 'z*' OR action CP 'Z*'.
    RETURN.
  ENDIF.
ENDENHANCEMENT.
  DATA: ex  TYPE REF TO cx_crm_mcm_exception.
....






Yes, we made one enhancement. But this enhancement is less painful comparing to enhancing js-files and basic components. We can even leave this enhancement aside and take the message as it is. There will be some issues openning confirmation popups. But popups with own components should work well.

Calling to SAP regarding this particular message: Probably it would be better if wsb_action_event_send call is made only if no corresponding button exists for IC toolbar button.

To report this post you need to login first.

11 Comments

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

  1. Mukul R. Kulkarni

    Dear Andrei,

    Thanks for a very informative blog.

    I have a similar requriement and hence trîed the second method of creating a custom component and then assigning it in the Layout Profile. But, the button is NOT visible in the IC Toolbar. Are there any other configurations or changes that you have done for it?

    Thank you,

    Regards,

    Mukul Kulkarni

    (0) 
      1. Mukul R. Kulkarni

        Dear Andrei,

        Thanks for the reply.

        I have also seen the blog SAP CRM 7.0 – Adding Icons to the Toolbar in the Interaction Center which guides in adding a button to the IC toolbar using SPRO customizing.

        But, I was referring to the above blog where instead of adding a button through SPRO, you had added it through Layout Profile.

        I have also created a custom component, created a Layout component and added it in the Layout Profile but the button is not visible in the IC toolbar instead it is shown after Create/Recent Items.

        So, just wanted to know whether there is anything more that I need to do in order to display it in the IC Toolbar.

        Thank you,

        Regards,

        Mukul Kulkarni

        (0) 
        1. Andrey Vishnevskiy Post author

          Dear Mukul,

          Wait for a second.

          Probably you didn’t get my idea completely. There are the following mandatory steps to accomplished the z-button handling:

          1. Add a z-button to the toolbar (described in mentioned blog)

          2. Add “invisible” button (surrounded with SPAN tag with display:none style and inside div tag with ID ‘wsb_button’) with appropriate id (id of this button has to be ended as _<your_buttonID_from_toolbar>). This step is described here in my blog.

          After this is done when you press your z-button in the toolbar the click is transferred to this invisible button and the appropriate onClick event is raised.

          So to fully cover the adding of new button and its handling you should follow both blogs.

          Hope I clarified your doubts.

          (0) 
  2. Sebastian Seiler

    Dear Andrei,

    from my perspective the easiest way to achieve a Z-Button functionality in the IC toolbar is as follows:

    – Creation of the custom button and including in the IC toolbar

    – Catching the event in the wsb_handler method of header_jscripts.js

    – Catching the triggered IC event in any component, such as CRMCMP_IC_FRAME (HiddenView) or even a custom hidden view

    Code in header_jscripts.js:

    if( value.charAt(0)==“Z” )
       {
         var contact = vConManager.getActive( wsb_currMedia );
         if( contact != null ){
           bEventSend = false;
           forwardCall( cAppEventCode, “ZICToolbarEvent”, value, contact.m_id, “”, “”, “”, “”, “”, “”, “”);
         }
       }

    The value represents the ID of the respective button, customized in the IC toolbar profile before.

    Subscription can be done in the DO_INIT of the controller class, for instance. The handling itsself by using interface IF_CRM_IC_EVENT_LISTENER in the same class.

    By this, all potential custom IC toolbar events can be handled at once without changes of JavaScript, etc.

    Best regards,

    Sebastian

    (0) 
    1. Andrey Vishnevskiy Post author

      Hello Sebastian,

      Your solution contains modification of header_jscript.js. I think there is no need to describe why it’s not convenient to modify header_jscript.js. Even once.

      The way I’m suggesting here does not modify anything.

      (0) 
      1. Sebastian Seiler

        Hello Andrei,

        there is no need to modify the header_jscript.js. You can copy it to a custom BSP application and replace the original one.

        Best regards,

        Sebastian

        (0) 
  3. DEEPAK PADMANABHA

    Hello Andrey,

     

    This was very helpful for me, i followed same steps and got it right.

    However i would require your help in one of my requirement.

    I created a custom button, when the user clicks on the button auto search in interaction center should happen based on Business agreement.

    In the event handler of custom button, i am calling the query and i am getting the result as well.

    I am stuck at a place now. How can i set the result view(Tree view in our case) in IC?

    We are part of Utilities project and the component which handles search is IUICOBJS.

    Please help me with an approach to achieve this requirement.

     

    Regards,

    Deepak

    (0) 
    1. Andrey Vishnevskiy Post author

      Hello Deepak,

      It’s quite a new approach for me to perform the search in IC role using the toolbar button. I’d recommend to use Identification screen instead.

       

      Anyway, it’s always good to raise such questions in discussions here:  https://answers.sap.com using CRM Interaction Center as a primary tag.

       

      According to my feeling, I’d propose to a navigation bind to your toolbar button which will land you where you want to present the result of the search. Then perform the search in this particular inport and set the result table from there.

      (0) 

Leave a Reply