In every SAP CRM release after SAP CRM 2005, starting with SAP CRM 2006s and SAP CRM 2007, it is possible for you to control the overall look and feel of SAP CRM through the use of user interface (UI) skins (also known as themes) and other UI personalization options. The theme controls various visual elements of the user interface, including color scheme, icon appearances, and font style. SAP delivers various themes, including options such as Default, High Contrast, Serenity, New Hope, and SAP Signature Design. Additionally, you are even free to design and upload your own UI skins using industry-standard Cascading Style Sheet (CSS) technology.

While the ability to choose different UI skins certainly provided SAP CRM customers with a great deal of flexibility and control over the look and feel of the application for most SAP CRM business roles, one key customization capability was still missing for the Interaction Center (IC) application: the ability to easily change the default SAP branding logo and text and to add, remove, resize, or reposition the individual components of the IC context area.

However, with SAP CRM 7.0, SAP introduced the power to easily change the default branding and component layout of the context area in the IC using simple configuration — without any code modifications. Needless to say, it is always desirable to avoid actual code modifications whenever possible and instead use more flexible options, such as standard configuration or the SAP enhancement framework concept, to avoid potential source-code conflicts when upgrading SAP CRM releases or applying SAP Notes or Support Packages within a particular release.

Before You Begin

The context area of the IC is host to several important elements that are responsible for displaying information about the current customer interaction, as well as providing access to key IC-specific functionality such as the IC Alerts, a scratch pad, and communication toolbar. Figure 1 shows an example of the context area as viewed in the SAP Signature Design theme.

Figure 1

Default context area layout for the IC

At the top of the context area is the branding area, consisting of the corporate logo and brand message, as well as a set of standard SAP CRM links. Below the branding area is the scratch pad, customer information area, IC Alerts, and communication information area. The scratch pad allows an agent to quickly type down some notes while the customer is speaking, and then later to automatically import the notes into the business transaction. The account information displays the name of the customer and contact person (if applicable). The alerts area provides rule-based information and guidance to the agent. The communication information shows all the pertinent details of the current customer communication, such as the type of communication (e.g., email, phone, chat), duration, and so on. At the bottom is a communication toolbar (i.e., softphone control) and agent work-mode indicator that together provide integration to underlying communication management software for telephony, email, or chat integration.

While Figure 1 shows the default layout of the context area, it is also possible to change the look and feel of the context area to suit your own business needs and facilitate your own corporate branding. Not only can you replace the default SAP logo and IC text with your own corporate logo and brand message, but you can also reposition, resize, or remove the various elements of the context area. You can even add your own custom elements if desired.

In the following sections, we discuss the necessary steps to reposition, resize, or remove elements on the context area — as well as how to add your own elements to the context area if necessary.

Define Context Area Profile

You can access the basic customizing for the context area via menu path IMG > Customer Relationship Management > Interaction Center WebClient > Basic Functions > Define Context Area Profile (Figure 2). Here you can maintain your context area profile and then assign the various context area elements that you want to appear in the IC.

Figure 2

Maintenance of the context area profile

Assign a Context Area Profile to CRM Business Role

Once you have created your context area profile and assigned the desired context area elements, you need to assign your context area profile to the CRM business role where you would like to make the context area visible. 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).

To assign your context area profile to a CRM business role, follow menu path IMG > Customer Relationship Management > Business Roles > Define Business Role. Once you select the desired CRM business role, select the Assign Function Profile folder, add an entry for Function Profile ID CONTEXTAREA, and select the profile value that you created when you defined your Context Area Profile (Figure 3).

Figure 3

Assignment of context area profile to CRM business role

Create Role Configuration Key

To change the layout of the context area in the IC for a given CRM business role, you first define a role configuration key. The role configuration key controls which screen views appear in the SAP CRM application when you access a particular Business Server Page (BSP) component in the CRM WebClient UI. For example, if you want to change a default screen by adding, moving, or renaming a field, you do so in the UI Configuration Tool by creating a new role configuration key. Similarly, the role configuration key is how you enable your desired changes to the IC context area layout.

To create a new role configuration key, follow 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_MY_KEY). Afterwards, assign your newly created role configuration key to your desired CRM business role.

Create UI Layout Configuration

Now that you have created your own role configuration key, you create your own UI Layout Configuration for the context area and assign it to your role configuration key. For those of you who are not familiar with the layout configuration concept, the UI Layout Configuration controls which views (i.e., sub screens) and view sets are shown as part of a particular BSP component (e.g., screen) as well as which fields are shown within each view.

To create a new UI layout configuration for the context area, access the BSP Web Dynpro [WD] Component Workbench tool using transaction code BSP_WD_CMPWB or IMG menu path Customer Relationship Management > UI Framework > UI Framework Definition > Access BSP Component Workbench. The Component Workbench is one tool (among a larger holistic set of UI tools) provided by SAP to allow users with limited knowledge of the SAP CRM technology stack to configure the UI.

From the Component Workbench, select BSP component ICCMP_HEADER, which is the BSP component for the context area. Expand the Views folder and double-click the view set ICCMP_HEADER/HeaderViewSet. Click the Configuration tab. Then click the Copy Configuration button. In the pop-up dialog box that appears, enter the name of your role configuration key (e.g., Z_MY_KEY). You can leavet the defaults for the other fields (Figure 4). Now you are ready to start adjusting the layout of the context area as desired.

Figure 4

Copy default configuration using your own role configuration key

When creating your own layout configuration, you are free to move the different elements around, resize them, or even remove some. For example, look at the standard default layout configuration of the context area in Figure 5. Then compare the default layout configuration in Figure 5 to the alternate layout configuration in Figure 6. The version in Figure 6 depicts a variant of the context area layout configuration that SAP delivers in SAP CRM 7.0 for non-IC business roles (such as the sales professional role). These roles require some basic computer telephony integration (CTI) but don’t need the full functionality provided by the IC context area, such as alerts, scratch pad, and detailed communication information.

Figure 5

Standard default layout configuration of the context area

Figure 6

Example of an alternate “slim” layout configuration of the context area

In the layout in Figure 6, you can see that some elements of the default context area have been removed and that other elements have been repositioned and resized to fit the entire context area into a single line on the screen. This was done to conserve screen real estate and to create a slim, low-profile version of the context area.

Within the context area shown in Figure 5, you can configure several elements further. Both the Account and Communication elements consist of multiple data fields. For example, as shown in Figure 7, the Account element contains two data fields by default: ContactName and AccountName. You are free to change the order or layout of these fields or even to remove individual fields if you don’t want them to be displayed in the context area.

Figure 7

Default account element with ContactName and AccountName fields

Similar to the overall layout of the context area, the layout of each element within the context area — such as the Account information box — can also be configured via the component workbench. For example, to change the default layout of the account information element, you restart the BSP WD Component Workbench with BSP component ICCMP_HDR_CNTNT.

Then you again expand the Views folder and double-click the view set ICCMP_HDR_CNTNT /AccountInformationVS. Click the Configuration tab and then click the Copy Configuration button. In the pop-up dialog box that appears, enter the name of your role configuration key (e.g., Z_MY_KEY). Again, leave the defaults for the other fields (Figure 4). You are then ready to start adjusting the layout of the Account Information element. For example, you could remove the ContactName field from the UI, leaving only the AccountName field, as shown in Figure 8.

Figure 8

Example of configured Account element with removal of the default ContactName field

Similarly, the Communication Information element also contains multiple data fields (as shown in Figure 9) and could be configured in a similar fashion by accessing BPS component ICCMP_HDR_CNTNT /CommunicationInfoVS.

Figure 9

Default account information element with default data fields

Enhancing or Replacing Elements

This next section describes how you can add your own new elements to the context area. Note that this procedure is more involved and complicated than the pure configuration options described so far in this article for resizing, repositioning, or removing existing context area elements. Therefore, following this approach is only advised if the standard configuration options cannot be used to achieve your desired changes to the context area. For example, maybe you want to replace the scratch pad or the alerts element of the context area with your own code — such as a widget that shows the current weather conditions of a confirmed customer based on the customer’s postal address.

All the individual elements of the context area have corresponding views and view sets in the BSP component ICCMP_HDR_CNTNT. To enhance any of these elements you can simply use the Application Enhancement Tool (AET) — which replaces the former Easy Enhancement Workbench (EEW) as of SAP CRM 7.0 — to extend the BSP component ICCMP_HDR_CNTNT. You can enhance any of the existing views as well as create your own views and view sets. Following are the steps required to add an element containing new functionality to the context area:

• First, create the new view and (if applicable) the view set in a new BSP component or in the existing BSP component ICCMP_HDR_CNTNT
• Next, create a new layout component (e.g., Z_MY_LAYOUT via menu path IMG > Customer Relationship Management > UI Framework > Technical Role Definition > Define Layout Components). Point this layout component to the view or view set created in the previous step.
• Now, assign your new layout component to the context area profile that you created earlier.
  • You can access the context area profile configuration via menu path IMG > Customer Relationship Management > Interaction Center WebClient > Basic Functions > Define Context Area Profile.
  • Use one of the three extra usage component blocks, such as USAGEEXTRA01, that SAP has provided for this purpose and assign your layout component ID (e.g., Z_MY_LAYOUT) as shown in Figure 10.
  • Select With Border or Without Border to indicate whether this component will have a visible border in the UI.

Figure 10

Assignment of layout component to context area profile

After assigning the layout component to the context area profile using one of the extra usage component blocks, you then add the corresponding extra usage view set to the BSP Component of the context area, ICCMP_HEADER/HeaderViewSet as shown in Figure 11. To do this, you again access the BSP Component via the BSP WD Workbench and select the Configuration tab. Then click the Show Available Fields button and expand the BLOCKS folder. You can now select the view area field VAEXTRA01 which corresponds to the USAGEEXTRA01 component defined in customizing in the previous step and add it to your view configuration by clicking the add (+) icon.

Figure 11

Add the relevant extra usage component block to the BSP component

Depending on what your new context area element needs to do, it might be necessary to also modify code in other parts of the IC application (i.e., other BSP components or views). If your new context area element only needs to display static data then you should be fine, and would likely not need to modify any other code within the application. However, if your new context area element needs to interface or interact with code in other parts of the application, you need to make the necessary modifications to plug into the relevant code. For example, if your new context area elements need to interact with other BSP components, then you communicate via the Simple ABAP Messaging (SAM) framework of SAP CRM.

Note, however, that such code is beyond the scope of this article and is left to consultants or developers to research and modify on their own. However, SAP is considering ways to provide greater support in the next release after SAP CRM 7.0, which would allow easier integration of new custom context area elements with the SAM framework.

John Burton

John Burton is a director of product management at SAP and is responsible for the SAP CRM Interaction Center (including ERMS) and social CRM topic areas. John has 13 years of experience at SAP and has been involved with SAP CRM and the Interaction Center since 1999. He is also the author of Maximizing Your SAP CRM Interaction Center, available at the SAPinsider Store. John is an alumnus of the University of Michigan and Central Michigan University. John can be found on LinkedIn at www.linkedin.com/in/sapjohnburton.

You may contact the author at john.burton@sap.com.

If you have comments about this article or publication, or would like to submit an article idea, please contact the editor.

Marius Meissner

Marius Meissner is a CRM application developer at SAP with three years of experience in the SAP CRM Interaction Center. Marius is a graduate of the University of Dayton and Stanford University.

You may contact the author at marius.meissner@sap.com.

If you have comments about this article or publication, or would like to submit an article idea, please contact the editor.