Note: Special thanks to SAP consultant Marius Meissner who contributed to this blog. John and Marius are the authors of a full-length article published on CRM Expert Online called "Customize the Layout of the Interaction Center Context Area in SAP CRM 7.0". Subscribers of CRM Expert can find the article here: http://www.crmexpertonline.com/article.cfm?session=&uid=5159861f-003c-4be4-bcbc-e410f2c4a4dc.

 

Companies who use the CRM Interaction Center are often interested in customizing the default appearance, layout, and configuration of the header area of the application to better support their own corporate branding and user requirements. For example, SAP customers who don't use alerts often want to know if they can e.g., hide the Alerts element in the Context Area to make more room for displaying account information and communication information. And almost all companies are interested in replacing the default SAP CRM logon and "Interaction Center" text with their own corporate branding. Some companies even want to know if they can replace the text in the toolbar buttons with icons (and if so, whether they can upload and use their own icons instead of using the default SAP icons).

 

Up until release CRM 7.0 these types of changes were impossible, or required extensive code changes as documented in a consultant's cookbook. However, as of CRM 7.0 all of these requirements can now be handled quickly and easily via simple configuration! Let's take a look below.

 

Notes about terminology: Application Header is a term that is used to describe the static non-scrolling area located at the top of the SAP CRM application that is only rendered once per session. Inside the Interaction Center, the Application Header includes the corporate branding (corporate logo and brand message), SAP CRM standard links (user personalization options, SAP help center, SAP system news, and application logoff) and the IC Context Area. The Context Area provides access to IC-specific information and functionality such as screen pops, multi-channel communication toolbar, customer and communication-channel information, IC alerts, and scratch pad.

 

 

Repositioning, Resizing, and Adding / Removing Context Area Elements

 

Some adventurous companies have asked in the past how they can go about changing the default order, layout, and size of elements in the Context Area. The answer from SAP had always been "are you crazy!" or perhaps more politely, "SAP does not recommend this". However, as of CRM 7.0, SAP has introduced the power to easily change the layout of the Context Area using simple configuration - without any coding modification.

 

Here are the basic steps:

 

• Define a Context Area profile and assign the context area elements that you want to appear in the Context Area when running the Interaction Center
• Assign the Context Area profile to your IC-relevant CRM Business Role. Note that the context area can only be included in IC relevant business roles (i.e., CRM business roles for which the profile type has been set to Interaction Center Business Role in the business role profile configuration).
• Create a new Role Configuration Key via menu path IMG > Customer Relationship Management > UI Framework > Technical Role Definition > Define Role Configuration Key. Copy the DEFAULT_IC entry into new entry (e.g., Z_NEW_KEY). Then assign your new role configuration key to your CRM business role.
• Create a new UI Layout Configuration via the Component Workbench using transaction code BSP_WD_CMPWB. Select BSP component ICCMP_HEADER, and expand the Views folder and double-click the view set ICCMP_HEADER/HeaderViewSet. Select the Configuration tab and then select the Copy Configuration button. In the pop-up dialog box that appears, enter your role configuration key (e.g., Z_NEW_KEY).
• Create your own layout configuration! You are completely free to move the different elements around, resize them, or even remove any that you don't want.
• Optionally, you can also configure the layout of each element within the context area - such as the Account Information (BSP component ICCMP_HDR_CNTNT) or Communication Information element (BSP component ICCMP_HDR_CNTNT /CommunicationInfoVS).

 

For more information and step-by-step examples, you may also want to read the article, "Customize the Layout of the Interaction Center Context Area in SAP CRM 7.0" appearing Volume 5 (2009), Update 7 of CRM Expert Online http://www.crmexpertonline.com/article.cfm?session=&uid=5159861f-003c-4be4-bcbc-e410f2c4a4dc.

 

 

Replacing the Default "SAP CRM" logo and "Interaction Center" Text with Your Own Corporate Branding

 

One of the most commonly asked sets of questions on the Interaction Center (IC) discussion forum in the CRM BPX Community on SDN have to do with how to change the default branding and layout of the application header area of the Interaction Center. For example, the first thing companies want to do is to replace the default "SAP CRM" logo and "Interaction Center" text with their own corporate logo and text.

 

In CRM 7.0 the default "Interaction Center" text can easily be changed by replacing the OTR text CRM_IC_CMP_FRAME/APPLICATION_TITLE with the desired alternate text or OTR text via view Message.htm in component CRMCMP_IC_FRAME.

 

It is also possible to display a different logo than the standard SAP one. The logo is defined via CSS styles in MIMEs / sap_skins / <theme_name> / thtmlb_stand.css in BSP Application THTMLB_STYLES. In this CSS file, there is a class called th-l-logo with a background-image URL set to the location of the brand logo image file. To replace this logo with a different one, simply upload the new image file into this folder structure and change the background-image URL to this new file's location.

 

Customizing the Communication Toolbar and Adding Icons

 

Prior to CRM 7.0, the IC communication toolbar provided very limited possibilities for customization aside from controlling the sequence in which the toolbar push buttons appeared. However SAP CRM 7.0 provides many new capabilities for customizing the toolbar including:

 

• Grouping of toolbar buttons into generic or channel-specific groups, so that buttons like Accept, Reject, and End are grouped together and displayed separately with extra spacing between the channel-specific buttons like Consult, Transfer, etc.
• Ability to use icons (or a combination of icons and text) instead of pure text on the toolbar push buttons; ability to upload and use your own custom icons rather than SAP default icons
• Ability to dynamically control which buttons appear in the toolbar at any given time based on states such as logged off, idle, or busy. This allows you to hide certain buttons that an agent should not have access to based on a particular work mode or call state.
• Introduction of Cancel button on the toolbar that will cancel a newly created (but not yet saved) Interaction Record and reset the account identification.
• Introduction of new Reset CTI button that will reset the server between the SAP CRM Interaction Center and the underlying CTI server or communication management software (CMS) system.

 

Most of these settings can be made in the IMG activity Define Toolbar Profiles via IMG menu path: SAP Customizing Implementation Guide - Customer Relationship Management - Interaction Center WebClient - Basic Functions - Communication Channels - Define Toolbar Profiles. 

 

 

Figure 2. Define Toolbar Profile to Include Desired Buttons (with Text and/or Icons)

 

 

SAP customers who are interested in uploading and using their own icons in the IC communication toolbar can do in the IMG activity "Define Toolbar Buttons" via IMG menu path: SAP Customizing Implementation Guide - Customer Relationship Management - Interaction Center WebClient - Industry-Specific Functions - Define Toolbar Buttons. In order to use your own icons you must specify the location of each icon in the field Icon Path. In the example below I specify a URL, though obviously on a real customer project you would upload the icon to the CRM Server and specify the path.

 

 

Figure 1. Define New Toolbar Button with Icon

 

 

Once you have configured your toolbar button layout, the corresponding changes will be available to agents at runtime. Note the new "Walk the Plank!" button with the skull icon below that has replaced the standard End button.

 

Figure 3. Enjoy Your New Toolbar Configuration and Icons!