One of the primary objectives of the Service Cloud Console is to improve agent productivity by providing more context. When a call comes in, relevant information about the caller such as account and contact information, case history, entitlements and call scripts should be no more than a click away. While the Service Cloud Console provides the ability to present much of this information contextually out of the box, there are times when you will need to customize this user interface and agent experience based on the business processes in your organization.
There are multiple avenues available for customizing the Service Cloud Console. Not only can you leverage your existing standard and Visualforce pages, there is also a new (and first) Service Cloud Console Integration Toolkit Javascript API. This Javascript API provides user-interaction functionality, unlike the regular data oriented salesforce.com API. Additionally, the Console setup also offers configuration options. Often the most useful and compelling customizations are a combination of these avenues.
The objective of this blog entry is to get you familiar with the possibilities when developing with the Service Cloud Console. As a first exercise in this effort, this entry covers opening multiple subtabs at the same time to provide your agents with more context, while preventing information overload. When the agent requires this additional information, the tabs are already open and a click away. These can be closed individually when the agent has consumed the required information, or together when the agent closes the corresponding primary tab or workspace.
Multiple subtabs opened for a primary tab
There are a number of scenarios where this is useful. For example, consider when an agent opens a case primary tab. You could provide more context for your agent by automatically opening the following
• The case contact and account
• A call script
• External billing and inventory systems
• Related entitlements and service contracts
The scenario considered in all examples in this entry will be that of an agent opening an existing case.
If you aren’t familiar with the Service Cloud Console, you can learn more here.
Open Entity As Subtab Of Parent – Case As Subtab Of Contact
Given the importance of presenting contextual information, the Service Cloud Console provides you with the ability to open an entity as a subtab of it’s parent out of the box. How would you open a case as a subtab of its parent contact record? Easy. Go to -
• Setup-> Create-> Apps-> Edit “Your Service Cloud Console here”
• Under the “Choose How Records Display” section, set case records to open as a subtab of the parent contact.
Open cases as subtabs of the parent contact record
The next time you open a case, it will open as a subtab of the case contact. If there is no contact on the case, it will open as a primary tab.
Open External Reference Subtab
If we want to go beyond just the contact and open some external reference such as a billing or inventory system, a little coding is involved, but it is just 2 steps.
To do this we need to
• create a Visualforce page that opens a new subtab to the external system using the Service Cloud Console Javascript Toolkit
• add the Visualforce page to the case layout
Visualforce Page
The Visualforce page is available here.
For the sake of this example, we’re going open a google search subtab. The search query will be the case subject. You can modify this to your requirement. This page and code below do the following
• Sets a 500 millisecond timeout to call the Toolkit Javascript methods
• Gets the enclosing primary tab id
• Opens a new subtab using the primary tab id
• Set the name of the sub tab to the “Search Results...”
Walking through the code, there are 3 calls that I would like touch upon.
sforce.console.getEnclosingPrimaryTabId(openSubtab);
This method gets the enclosing Console primary tab id. Once we have identified our primary tab, we can add a new subtab to it.
sforce.console.openSubtab(result.id,'https://encrypted.google.com/search?q={!case.subject}',false,'Search Results...');
This method opens a subtab in the primary tab identified by the id parameter. The url can be any absolute or relative url. We also don’t want to the subtab to receive focus, so we set the “Active” parameter to false. Finally, we name our subtab “Search Results…”.
You can find a complete developer guide to the Service Cloud Console Toolkit here.
Finally, I would like to explain why we need to have a time out.
openSubtabTimer = setTimeout('openGoogleSubtab()', '500');
When we add this page to the case layout, it will be added as an iframe. This iframe must then communicate with the parent case window, which must then communicate with the Service Cloud Console. The window.onload of each of these may not always be called in sequence. As such, sometimes the “openGoogleSubtab()” call may be sending a message to the Console before it has rendered fully. In this case you will receive the following Javascript error – “Uncaught TypeError: Cannot read property 'Sfdc' of undefined” (Error in Chrome. Firefox and IE will have a similar message).
To get around this, we call “openGoogleSubtab” after 500 milliseconds. We do this via a timer, and remove the timer after the call is completed successfully. I have not put a try-catch block around the Toolkit calls for the sake of brevity and clarity.
Adding The Visualforce Page To The Layout
I named the Visualforce page above “GooglePopper”. In the image below, I add it to the case page layout using the “Visualforce Pages” section of the Page Layout Editor. You can drop the page anywhere on the case detail.
Adding the Visualforce page to the Case layout
Once you have added the Visualforce page to your layout, be sure to alter its size so that it is not visible on the case detail page. You can do this by clicking on the little wrench icon on your newly added page (outlined in red in the following image) and bringing up the properties dialogue box. Set the height and width to 0.
Setting the height and width of the Visualforce page to 0. You can bring up this dialogue by clicking the button (wrench) outlined in red.
Once you’ve added the page to your layout, the next time you open a case in the Console, a “Search Results” subtab will automatically open in the background. In the screen shot below, I’ve switched over to it.
An external reference in a subtab
Note : At this time Google disallows iframing it's search page. This means that the example above will no longer work. Bing.com can be used as an alternative search engine.
Open Primary Tabs – Open Multiple Primary Tabs From The Navigator Tab
Opening primary tabs is the same as opening subtabs. The only difference is that the Console Toolkit call in this case will be the sforce.console.openPrimaryTab. In addition, you can open multiple primary tabs directly from the Navigator tab. To do this, you need to add a custom Visualforce page to the Navigator tabs list, and call openPrimaryTab in the onload like in our previous examples. After this, you can redirect the Visualforce page to your intended target or render a custom page.
We walked through examples of opening multiple subtabs in this blog entry. Opening multiple tabs allows you to present your agents with relevant contextual information, keeping it well organized and just a click away.
Be sure to check out the Service Cloud Console Integration Toolkit Developer's Guide for more API calls. If there are other customizations that you would like to see, please feel free to reach out to me or Michael Ramsey.
