Daan Schattenberg
Read all my blogsThis weeks blog is about a change in the design in the context area by SAP.
The context area is the part of the Interaction Center WebClient where you can display customer information and alerts to inform the agent based on the current context. For example fire an alert to tell the customer about a new product if the customer has a certain attribute.
As per CRM 7.0 EhP1, SAP has made a design change to divide the context area into separate views for these components. According to SAP the design change makes it more customizable.
Unfortunately this has some effect when you’re using longer text alerts. This information will not show properly in the alert area. The text of the alert won’t wrap, so you will only see half the alert.
Advice of SAP is not to use long text alerts and if you do so use the tool tip (mouse-over) while configuring the alert.
This is a good option, but one of our customers doesn’t want to constantly move the mouse over the alert to display the text. They wanted to display the text wrapped in the context area. In this blog I will tell you how you can change this by adjusting the style sheet.
CRMCMP_IC_FRAME
First search for the right style sheet. Go to transaction SE80 and open BSP Application CRMCMP_IC_FRAME (the header frame of the WebUI), here you can find the context area stylesheets.
Go to the right CSS file by clicking: MIMEs ==> stylesheets ==> contextarea ==> [your skin] our customer used the nova skin ==> crmcmp_ic_frame_contextarea.css
Download this CSS file and open for instance using notepad. When you scroll through the file you will noticed that the CSS file is divided into three sections; adapting colours, adapting fonts and changing the layout. In this last section we are going to make our changes. In this style sheet you can also make other changes such as the size of the fonts or the colour of the text.
Source code
Change the following code in the ‘changing the layout’ section of the CSS file:
|
Standard
|
Zyourcss
|
|
.ctx_alert_1
{
overflow:hidden;
white-space:nowrap;
text-align:left;
vertical-align:middle;
}
.ctx_alert_2
{
overflow:hidden;
white-space:nowrap;
text-align:left;
float:left;
vertical-align:middle;
}
.ctx_alert_link
{
overflow:hidden;
white-space:nowrap;
text-align:left;
vertical-align:middle;
}
|
.ctx_alert_1
{
height:auto !important;
overflow:hidden;
white-space:normal;
text-align:left;
vertical-align:middle;
}
.ctx_alert_2
{
height:auto !important;
overflow:hidden;
white-space:normal;
text-align:left;
float:left;
vertical-align:middle;
}
.ctx_alert_link
{
height:auto !important;
overflow:hidden;
white-space:normal;
text-align:left;
vertical-align:middle;
}
|
Upload en Replace the crmcmp_ic_frame_contextarea.css in the Object Navigator (SE80). Now restart your browser and open the Webui.
Note: you will have to delete your browser cache before the changes will be visible in the Webui. You can easily do this by using the developer tools of your browser (F12 for IE). Go to Cache and delete Browser Cache.
Results: you can no read the alert properly in the context area.
A vertical scrollbar
When your customer is using very, very, very long alerts, you can even add a vertical scrollbar in the context area. This you can also change in the same CSS file.
Change the following code in the ‘changing the layout’ section of the CSS file:
|
Standard
|
Zyourcss
|
|
.ctx_component_container_alin
{
height:42px;
}
|
.ctx_component_container_alin
{
overflow-y:scroll;
height:42px;
}
|
Results: A vertical scrollbar
Receive our weekly blog by email?
Subscribe here:
One response to “No-wrap IC alerts in the context area”
Hi,
I try to set custom bsp to third context area and i try to set that's html values. Our customer want that we put some z-values on our custom bsp's html. But this html render one time when i load page. So how should i put my z-values on my custom bsp page's html, for third context area.
Thank you,
Utku Y.