Providing context in a single glance has been the underlying design philosophy of the Service Cloud Console. An agent should have enough information about the caller or product from the outset to service 80% of the calls. For the remaining 20%, the agent can always drill further into any particular information snippet. This approach not only makes the application more intuitive, pushing relevant information to the agent, but also reduces clicks. The famous 3 click rule of web design has a definite impact on call center costs where every extra agent click can add up to a significant amount annually.

With Summer ’11, Custom Console components have been added to the Service Cloud Console to further address this capability. These components are housed alongside the detail or edit view of standard entities, in the left, right, top and bottom areas. Each component houses a Visualforce page, which can use the standard controller corresponding to the entity in the detail view, or a custom controller. The image below shows the distribution of these components in a Service Cloud Console tab.

Custom Console Component regions

Custom Console Components are available at the subtab level. This means that they are only present in the subtab which they were rendered in, and are not visible at the primary tab/ workspace level. Put another way, the implication here is that they cannot replace the Highlights Panel or the Interaction Log. The image below shows 3 Console Components in the left, right and bottom regions of a subtab. There is also a Highlights Panel in the workspace. The Interaction Log has been removed from this layout. Note that the three Console Components will not be available in the second Case “00001919” subtab.

3 Custom Console Components (left, right and bottom) with a Highlights Panel

There are a number of use cases where these Console Components can be used. Some of them are listed below.

• Custom Suggested or Contextual Knowledge component that could be added to a non-Case page layout like Contact, Account, Asset. Data Category filters can be added on top of keyword search using Visualforce controllers.
• Registered/Entitled Product component to display on an Account or Contact page.
• Recent/Open Cases component on Account or Contact.
• Next Milestone component on Case.
• Similar Cases component on Case.
• Location/Google Maps on Account, Contact or Asset.

For the purposes of this blog, we will walk through 3 use cases –

• Showing Contact location using Google Maps
• Showing the Account Mini Page Layout for a Contact
• Using a Console Component with a Custom Visualforce Controller

These examples are simple enough for a reader to get started just by copying and pasting code. No customization is required beyond modifying page layouts. At the same time, they give a good idea of what is possible with the Custom Console Components feature. All examples use the Contact entity for consistency.

Google Maps in a Custom Console Component

To start with, let’s create a regular Visualforce page that renders Google Maps. The code for this can be found here - Inline Google Maps using Visualforce . I replaced all the Account.Billing fields with their corresponding Contact.Mailing fields. The name of my page is “Contact_On_Google_Maps”.

Once your Visualforce page is ready, you can add it to the Contact page layout as a Custom Console Component in the Service Cloud Console. To do this -

- Navigate to the Contact page layout you will be using

- Click on the “Custom Console Components” link

The Custom Console Components setup link

- You should now see the Custom Console Components setup page for this layout. Add your Visualforce page to the section of your choice and set your height/ width accordingly. I have chosen to add it to the right region, with a width of 300 pixels.

Adding the Google Maps Console Component

- Click “Save” and you are done! The next time you navigate to a Contact with this page layout in the Service Cloud Console, you will see the Google Maps component on the right.

The Google Maps Custom Console Component

Using Mini Page Layouts in Custom Console Components

Standard entities in Salesforce come with Mini Page Layouts. These are the layouts used in rendering hovers. You can find them on your regular layouts page, at the top right.

The Mini Page Layout setup link

These mini page layouts are perfect for the form factor of Custom Console Components, and present an out of the box, customizable summary view of an entity. Best of all, they are very easy to leverage.

The Code

Visualforce Page - Using mini page layouts in the Console Components requires all of 5 lines of code! Please note, this is not supported functionality and may be subject to change in the future.

Code

In the snippet above, we tell the Visualforce page to redirect itself to the mini page layout for the entity we want to render. In this case, we are displaying the Contact’s Account details. The URL for a mini page layout is in the form –
/ + entity id + /m

The entity id in this case is pulled from the Contact standard controller using {!Contact.AccountId}. We add the isdtp=vw parameter to ensure that the header and sidebars are not rendered. The final URL looks like –
/{!Contact.AccountId}/m?isdtp=vw'

Similar to the previous example, create a Visualforce page using the code snippet above and add it to the Contact Custom Sidebar Component setup. I named mine Mini_Page_Layout_Console_Component”, and added it to the left region with a width of 300 pixels.

Adding the Mini Page Layout Component to the Contact page layout

You should now be able to view the new component in the Service Cloud Console.

Console Component with a Mini Page Layout

Using Visualforce Pages With Custom Controllers In Console Components

Visualforce pages can be included on the page layouts for standard entities. However, these pages must use that entity’s standard controller. With Custom Console Components however, any Visualforce page can be used in the component.

The Code

Visualforce page –

<apex:page controller="CustomControllerConsoleComponent">

{!MyMessage}

</apex:page>

public class CustomControllerConsoleComponent {

public String getMyMessage() {

return 'hello ' + ApexPages.currentPage().getParameters().get('id') + ' . This is a Custom Console Component controller.';

}

}

Console Component with a custom Visualforce controller

Tips and Tricks

Keep in mind that Custom Console Components are fully enabled Visualforce pages. As such, in the Service Cloud Console they are fully compatible with the Service Cloud Console Integration Toolkit. You can customize them to enhance your agent experience and meet the needs of your business processes.

It is also important to note that Visualforce pages cannot be used more than once in the same layout. For example, our Google Maps component cannot be used in both the right and left regions. It can be used in the Custom Console Components setup on other layouts, but not twice in the same layout.

Finally, I want to touch briefly on best practices with Console Components.

- Keep it light. Custom Console Components are meant to present summary/ contextual data. Agents should drill in for the edge cases or more information. Heavy processing will make the components load slower.

- Keep it organized. Avoid subjecting the agent to information overload. Too many components make the layout unappealing and cluttered. It will definitely make the components load slower.

As mentioned earlier, the Google Maps, Mini Page Layout and Custom Controller components are simple and meant for readers to deploy easily. Explore new possibilities with this feature. Keep in mind however, that the final result must balance contextual information with an intuitive, appealing layout for agents.

If there are more complex examples that you would like to see, please let us know (they would have to be relevant to a broad set of our customers of course J). The same is always true with any other blog topics around the Service Cloud product line as well.