Editing Efficiency Gains With Keyboard Shortcuts

Available in: Salesforce Classic

This is part of Developing with the Service Cloud.

More information about these code samples can be found here - Cool Keyboard Shortcuts in the Service Cloud Console!

Logout of salesforce Keyboard Shortcut

Visualforce Page

The following code is for a keyboard shortcut to log out of salesforce.com. Create a Visualforce page that contains the listener logic. Let's name the page cccShortcutsListener.

<apex:page>
    <script> 
    <apex:includeScript value="/support/console/26.0/integration.js"/>

        // Logout Shortcut
        var logoutEventHandler = function() {
            top.location = '/secur/logout.jsp';
        }
        sforce.console.addEventListener('customShortcut.Logout', logoutEventHandler);            
         
    </script>      
</apex:page>

Popup Footer Widget Keyboard Shortcut

To use this shortcut, place the following code in the Visualforce page of the Custom Console Component that you want to pop up. That's it! Once you hit the keyboard shortcut, the code will respond and toggle the component's visibility.


            // If the component is hidden, display it. Otherwise hide it.
            var checkWindowVisibility = function setWindowVisibility(result) {
                if (result.hidden) {
                    sforce.console.setCustomConsoleComponentWindowVisible(true);                    
                } else {
                    sforce.console.setCustomConsoleComponentWindowVisible(false);                    
                }
            };
            
            // Is the component visible?
            var toggleEventHandler = function() {
                sforce.console.isCustomConsoleComponentWindowHidden(setWindowVisibility);
            }
            // Add an event listener for the keyboard shortcut
            sforce.console.addEventListener('customShortcut.ToggleNotifications', toggleEventHandler);  

Final Logout of salesforce, Get-Next-Case and Close-Case-Close-Tab-Get-Next-Case Shortcuts Listener

The following code sample combines the logout of salesforce.com keyboard shortcut with two more -

  • A "Get Next Work Item" shortcut. Work items here are defined as cases. This example could easily be extended to leads or opportunities or contacts however. Any logic (Apex, Visualforce, JavaScript etc), can be used to define and query the "next" work item
  • A "Close Case and Get Next Work Item" shortcut. This closes the current Case the agent is viewing in the Service Cloud Console and also pulls up the next work item using the previous shortcut

To use these keyboard shortcuts, place the following Visualforce code in the same Custom Console Component Visualforce page used in the "Logout of Salesforce" example. In the blog this page was name cccShortcutsListener. Note, the code below is complete and forms the entire page. Overwrite the entire Visualforce page (appending will result in compilation errors).

Apex Page

The logic for an agent's next work item can be defined in Apex. Once defined, it can then be leveraged by the keyboard shortcut to pull up the next work item.

public class cccShortcutListenerController {

    // Id for the next Case work item
    public String nextCaseId {get; set;}
    // List of an agent's Case work items
    private List<Case> cases;
    // Pointer to next work item in agent's
    public integer counter {get; set;}    
    // Case id for case to be closed
    public String statusObjectId {get; set;}   
    
    // Initialize list of work items and next work item
    public cccShortcutListenerController() {
        cases = [SELECT id, lastmodifieddate FROM Case ORDER BY LastModifiedDate DESC];
        if (cases.isEmpty()==false){
            for(Case c:cases){
                nextCaseId = c.Id;
                counter = 0;
            }
        }
    }

    // Get the next case from work items list
    public PageReference getNextCase() {
        nextCaseId = cases.get(counter++).id;
        return null;
    }
    
    // Close case
    public PageReference closeCase() {
        Case statusCase = [SELECT id, status FROM Case WHERE id =: statusObjectId LIMIT 1];
        statusCase.status = 'Closed';
        update statusCase;
        return null;
    }
}

Visualforce Page

This Visualforce page combines 3 keyboard shortcuts into one page.

  • Logout of salesforce.com
  • Get-Next-Case: This uses an apex function call to initialize the next work item in a div on the page. The logic to select the next work item is stored in the Apex class above. There are a number of ways to retrieve the next work item and communicate between Visualforce and Apex. The div method was chosen for ease of use and keeping the example simple.
  • Close-Case-Close-Tab-Get-Next-Case: This uses the onFocusedSubtab Console event to track which case an agent is currently looking at. When the shortcut is invoked, the case id is used to close the case, and the Console tab id of the case is used to close the tab it is displayed in. Subsequently the same Get-Next-Case shortcut logic is called to pull up the next work item.
<apex:page controller="cccShortcutListenerController">
    <apex:includeScript value="/support/console/26.0/integration.js"/>

    <apex:outputPanel id="nextCaseOutputText">
        <div id="nextCaseDiv">
            {!nextCaseId}
        </div>
        {!counter}
    </apex:outputPanel>
    <apex:form >
        <apex:actionFunction action="{!getNextCase}" name="getMyNextCase" rerender="nextCaseOutputText" />
        <apex:actionFunction action="{!closeCase}" name="closeCase" rerender="nextCaseOutputText" >
           <apex:param name="statusObjectId" assignTo="{!statusObjectId}" value="" />
    </apex:actionFunction>
    </apex:form>

    <script type="text/javascript">   

        // Logout Shortcut
        var logoutEventHandler = function() {
            top.location = '/secur/logout.jsp';
        }
        sforce.console.addEventListener('customShortcut.Logout', logoutEventHandler);          
     
        // Get next work item from div it is stored in. The id of the item is trimmed to remove whitespaces
        function getCaseId() {
            var nextCaseDiv = document.getElementById('nextCaseDiv');
           //alert('/' + nextCaseDiv.innerHTML.replace(/^\s\s*/, '').replace(/\s\s*$/, ''));     
            return nextCaseDiv.innerHTML.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
        }

        // Screen pop next work item after grabbing case id from next case div element
        var nextCaseEventHandler = function() {
            sforce.console.openPrimaryTab(null,'/' + getCaseId(), true, '');
            // Set next work item
            getMyNextCase();
        }
        sforce.console.addEventListener('customShortcut.GetMyNextCase', nextCaseEventHandler); 


        // Create event listener for tracking currently viewed case
        var fousedTabObjectId = '';
        var focusedTabId = '';
        var onFocusedSubtabEventHandler = function (result) {
            fousedTabObjectId = result.objectId;
            focusedTabId = result.id;
        };
        sforce.console.onFocusedSubtab(onFocusedSubtabEventHandler);       

       // Close currently viewed case and it's tab. Screen pop next work item
        var wrapUpAndNextCaseEventHandler = function() {
           sforce.console.closeTab(focusedTabId);
           closeCase(fousedTabObjectId);
           nextCaseEventHandler();
        }
        // Keyboard shortcut listener "Close-Case-Close-Tab-Get-Next-Case"
        sforce.console.addEventListener('customShortcut.WrapUpAndNextCase', wrapUpAndNextCaseEventHandler);     
         
    </script>
      
</apex:page>