Sunday, April 5, 2015

Custom Buttons & Links in Service Cloud Console

Salesforce Service Cloud is doing a very important role for custom services. Whenever we need to implement Service Cloud we play with Service Cloud Console that helps custom service agent to make most out of it and increase productivity while they do work on a day to day basis.

Standard Salesforce features of Service Cloud Console are very powerful, robust and intuitive to customise. But when it comes to playing with Mashups (specifically Custom Buttons & Links) within Service Cloud Console is difficult.

Yes Salesforce has Salesforce Console Integration Toolkit (The Salesforce Console Integration Toolkit is a browser-based JavaScript API. It uses browsers as clients to display pages as tabs in the console.) to provides Developers with programmatic access to the Salesforce console so that you can extend it to meet your business needs. With the Salesforce Console Integration Toolkit, you can open and close tabs in the console to streamline a business process.
However, in the case of Custom Buttons & Links on standard detail pages, the Integration Toolkit is not available. This means we have to find some other way to open tabs (e.g. sub-tab, primary-tab).

Here we consider an example as a use case to open a sub-tab using a custom button on standard detail page of Case within Service Cloud Console.

To start, let’s create the button. Go to Setup-> Build > Customize -> Cases -> Buttons, Links, and Actions

Custom Button Code

//Copy and Paste the below code 

{!requireScript("/soap/ajax/33.0/connection.js")}
{!requireScript("/soap/ajax/33.0/apex.js")}

var caseId = "{!Case.Id}";

// It will execute if the Button/Link will be clicked from with in Service Cloud Console
if (typeof(srcUp) == 'function') {
   srcUp('/apex/CaseTransactionPage?isdtp=vw&id='+caseId);
}
// It will execute if the Button/Link will be clicked from normal Salesforce UI
else{
   window.open('/apex/CaseTransactionPage?isdtp=vw&id='+caseId);
}


Visualforce Code

<apex:page standardController="Case" tabStyle="Case">

    <apex:includeScript value="/support/console/33.0/integration.js"/>

    <script type="text/javascript">
        //Sets the title of the current tab to "Case Transactions Detail"
        window.onload = function setTitleConsole(){
            setTitle();
        }
        //Sets the title of the current tab to "Case Transactions Detail"
        function setTitle() {
            sforce.console.setTabTitle('Case Transaction Details');
        } 
    </script>
    
    <!-- Your Visualforce markup will be here -->
    

</apex:page>


Useful Resources