CRM Expert - Customize the Layout of the Interaction Center Context Area in SAP C...

Page 1 of 5

SAP CRM concepts technology, and best practices

Customize the Layout of the Interaction Center Context Area in SAP CRM 7.0
by John Burton, Director Product Management, SAP CRM Interaction Center, and Marius Meissner, Application Developer, SAP CRM Development August 12, 2009

Learn how to easily change the default branding (brand logo and message) and layout of the context area in the Interaction Center with SAP CRM 7.0 using simple configuration without any code modification.

Key Concept
The context area of the SAP CRM Interaction Center (IC) is located at the top of the application. It provides access to IC-specific information and functionality such as screen pops, multi-channel communication toolbar, customer and communication-channel information, IC alerts, and a scratch pad. The context area is technically considered part of the application header area, a static non-scrolling area located at the top of the application that is only rendered once per session. The header area also includes a branding area comprised of a corporate logo and brand message, as well as a set of SAP CRM standard links with access to user personalization options, SAP help center, SAP system news, and application logoff. 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.

Note
You can refer to the article CRM 2006s: Where to Start? by Katrina Burke, posted to the CRM Expert knowledgebase in December 2007, for more details about the new UI features of the CRM WebClient, including various UI personalization options. 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.

http://www.crmexpertonline.com/article_printable.cfm?id=4783

03-01-2011

CRM Expert - Customize the Layout of the Interaction Center Context Area in SAP C... Page 2 of 5

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.

Note

http://www.crmexpertonline.com/article_printable.cfm?id=4783

03-01-2011

CRM Expert - Customize the Layout of the Interaction Center Context Area in SAP C... Page 3 of 5

A BSP component is essentially a collection of views or view sets for development or configuration purposes. Technically, a component correlates to an underlying ABAP Object Oriented (OO) class. 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.

Note
SAP provides a comprehensive toolset with SAP CRM 7.0 to help users adjust the CRM user interface to suit their corporate identity and business needs. The toolset includes the BSP WD Component Workbench, which allows users to configure the user interface using a graphical tool without any coding, along with several other useful tools: UI Configuration Tool: provides capabilities to adapt most CRM WebClient UI elements, including pages, assignment blocks, fields, labels, and fact sheets Design Layer Customizing: allows you to rename field labels globally, assign value helps from the ABAP Dictionary, and hide fields in the UI Configuration Tool Application Enhancement Tool: allows you to easily add new fields to the user interface without modifying SAP source code Business role and navigation bar customizing: provides capabilities to configure work centers, direct group links, and logical links 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 dont 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

http://www.crmexpertonline.com/article_printable.cfm?id=4783

03-01-2011

CRM Expert - Customize the Layout of the Interaction Center Context Area in SAP C... Page 4 of 5

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 dont 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 customers 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.

http://www.crmexpertonline.com/article_printable.cfm?id=4783

03-01-2011

CRM Expert - Customize the Layout of the Interaction Center Context Area in SAP C... Page 5 of 5

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 is a director of product management at SAP and is responsible for the SAP CRM Interaction Center and ERMS solutions. John recently celebrated his 10-year anniversary at SAP and has been involved with CRM and the Interaction Center since 1999. John is an alumnus of the University of Michigan and Central Michigan University. You may contact John via email at john.burton@sap.com or www.linkedin.com/in/sapjohnburton. 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 Marius via email at marius.meissner@sap.com.

http://www.crmexpertonline.com/article_printable.cfm?id=4783

03-01-2011