One of the features of the Service Cloud console is the ability to add Visualforce custom components to various parts of the console, either at a primary tab or a sub tab level. One possible use case is to provide agents the ability to quickly create records (e.g. a case) from a toolbar in the console that:

1.       Provides a list of record types that respect the object permissions for the user that on selection

2.       Opens a New Record sub tab using the context that the user is currently in. For example, if the user is currently viewing an Account record, opening the New Case subtab would also populate the Account in to the case

 

A Quick Create Toolbar

A Quick Create Toolbar

Now you can do this using the power of the Service Cloud Integration Toolkit, Console Components and Dynamic Apex. Note that this post assumes you have some knowledge of Apex, HTML, JavaScript and Visualforce.

Firstly, click here to install an unmanaged package into a Developer organization. It only supports Case creation from Account page layouts and you’ll need to manually put the Visualforce page into the page layouts as console components. You’ll also need to have created a few record types against the Case object.

If you want to deploy the package to a sandbox, change the URL to https://test.salesforce.com.

Alternatively, you can access the code behind the package here, and find instructions on how to compile and deploy the code.

The various components of the package are:

  • Apex Class SCCQuickCreateToolbar_Controller – the Visualforce custom controller that generates a URL for the Service Cloud Integration Toolkit
  • Static Resource SCCQuickCreateToolBarStyleSheet – gives the toolbar the consistent look and feel with the Service Cloud Console
  • Visualforce Page SCCQuickCreateToolbar – Renders the case record type drop down and uses the Service Cloud Console Interaction Toolkit to open a New Case in a subtab

After you install the package, you need to:

  • Create a few case record types if you haven’t already done so
  • Add the SCCQuickCreateToolbar Visualforce Page as a primary or sub tab console component on the Account page layout

Explaining the Apex Controller

The whole point of this code is to generate a URL for the Service Cloud Console Toolkit that looks something like this:

/500/e?def_account_id=<account_record _id>&ent=Case&isdtp=vw

The Visualforce Page will then use the Toolkit to add the parameter to set the RecordTypeId, but a little bit more about that later.

The above URL is part of what gets generated when attempting to create a new case from an account. Let’s break down the important parts of the URL:

  • /500/e – this creates a new case
  • def_account_id -  the record Id of the account
  • &ent=Case – the type of object we’re creating (e.g. Case)
  • isdtp=vw – tells the page to render to properly function with the Service Cloud Console

Let’s explain what goes on in the controller:

The Service Cloud Console always passes the current sub tab or primary tab record id into the Visualforce console component. Hence the constructor will populate the currRecordId property with the record Id. This is important for the URL.

    /* Constructor */

    public SCCQuickCreateToolbar_Controller () {

        // Get the current record Id

        currRecordId = ApexPages.currentPage().getParameters().get('Id');

    }

Then we need a list of case record types to populate in the drop down. This is the caseRecordTypes property. We’ll use the power of dynamic Apex and Apex describes to do this without hardcoding:

  • caseRTMapById is a map that’s populated using an Apex Describe call that is essentially a map of Record Type Ids and the Record Type object. It allows the Visualforce page to display a list of record types with the Record Type stored in the background.
  • We then use SOQL to retrieve a list of Case Record Types into a For loop to allow us to sort the list of record types in alphabetical order.
  • Using the Apex Describe information for the record type, we can determine if it is available for the currently logged in user using the isAvailable() method.
  • We’ll also exclude the “Master” record type as that’s not normally shown.

 To allow us to be a little bit more flexible in the future. The two properties currObjectType and currRecord will allow us to obtain and store information about the record to populate any additional fields in the URL for defaulting. For example, if we needed to create a case from the contact, we actually need to populate def_contact_id and def_account_id URL parameters and this could be obtained by querying the Contact record using the Id URL parameter.

The currObjectType property is a clever example of Apex Describe once again by trying to discern the type of object from the first 3 digits (the key prefix) of the Record Id by:

  • Using a static map sObjectByKeyPrefix that indexes the sObject type by key prefix to return the sObject type of the record Id. This map uses the global describe information of the organization to return all the sObjects that have been deployed.

               sObjectByKeyPrefix = new Map<String, Schema.sObjectType>();

               for (Schema.SObjectType sObj : Schema.getGlobalDescribe().values()) {

                   sObjectByKeyPrefix.put(sObj.getDescribe().getKeyPrefix(), sObj);

               }

  • From the first 3 letters of the record Id, use the above map to retrieve the sObject type:

Schema.sObjectType currsObjectType =             sObjectByKeyPrefix.get(currKeyPrefix); 

  • Then get the sObject describe for the sObject type to return the object name:

currObjectType =  currsObjectType.getDescribe().getName();

The currRecord property allows us to get more information about the current record. We’ll discuss more about this when we talk about extending the functionality, but for now, we can put this altogether to generate the URL prefix in the caseCreateURLPrefix property.

Let’s discuss some of the important parts of the URL and how we populate them. We’ll use the PageReference object to allow us to easily add parameters and then get the URL from it at the end:

  • The command to create the new case is as follows. It’s essentially the object’s key prefix (in this case “500”) with a “/e” at the end

PageReference pageRef = new PageReference('/' +
              Case.sObjectType.getDescribe().getKeyPrefix() + '/e');

  • To default the account into the case creation, check that the current object type is “Account” and then put currRecordId into the def_account_id parameter:

           if(currObjectType == 'Account'){

                pageRef.getParameters().put('def_account_id', currRecordId);

           }

 So now we’re ready to use this on our Visualforce page, but first, let’s style the toolbar so it gets the same form factor as the rest of the console.

Explaining the Style Sheet

There’s not much to explain here except:

·         The background color is the same as the Console’s header

·         There’s some CSS3 markup that gives rounded corners on the more modern browsers

·         It sets up margins and other styles for labels and fields

The styles will be used in the Visualforce page to give it a similar form factor to the Service Cloud Console.  

Explaining Visualforce Page

There are a few critical parts to the Visualforce page:

  • Displaying the Case Record Type picklist:

       <apex:selectList multiselect="false" size="1" id="createCase" onchange="QuickCase()">

         <apex:selectOptions value="{!caseRecordTypes}"/>

       </apex:selectList>

  •  The caseRecordTypes property returns the list of available record types. TheQuickCase() JavaScript function is called when a value is selected from the picklist.
  •  Grabbing the RecordTypeId from the picklist using JavaScript:
       caseRecordTypeSelectField = document.getElementById('{!$Component.theForm.createCase}');
       // Get the record type id
       caseRecordTypeId = caseRecordTypeSelectField.options[caseRecordTypeSelectField.selectedIndex].value;
  •  Calling the function to open a new subtab

sforce.console.getEnclosingPrimaryTabId(openCase);

  • Then combining the RecordTypeId into the URL when opening the subtab:
sforce.console.openSubtab(result.id , '{!caseCreateURLPrefix}&RecordType='+caseRecordTypeId, true, '', null);

 

Adding the Page as a Custom Console Component

Once you’re done, you need to add this to your page layouts either as a primary tab or sub tab custom component.

Adding the Quick Create Toolbar

Adding the Quick Create Toolbar

 

If you use a primary tab console component, the current record context is taken from the primary tab, whereas if you use a secondary tab console component, the record context is taken from the currently open sub tab. Which one you go for will depend on your business requirements.

Extending the Sample Code

It’s quite easy to extend the sample code to default fields from other parts of the application (e.g. defaulting the contact when exposing the toolbar in Contact page layouts).

Here’s an example using Contact:

  • Use a non-service cloud application to create a new Case record from a Contact and grab the URL after selecting the record type.

/500/e?retURL=%2F00390000002XJSU&def_contact_id=00390000002XJSU&def_account_id=00190000003pf3T&RecordType=012900000001D0I&ent=Case

  • You will have to examine it to determine those parts of the parameters that default the field values you require. In this case, the URL includes both def_contact_id and def_account_id as URL parameters that need to be populated with the appropriate Record Id values.
  • Change the currRecord property in the controller to query from Contact and select the AccountId and ContactId

              if (currObjectType == 'Contact') {

                     currRecord = Database.query('SELECT ID, AccountId, Name from Contact

                                   where id = \'' + currRecordId + '\'');    

              }

  • Change caseCreateURLPrefix to add the parameters for defaulting the contact:

if (currObjectType == 'Contact') {

pageRef.getParameters().put('def_contact_id', currRecordId);

pageRef.getParameters().put('def_account_id',
             ((Contact) currRecord).accountid ); // cast the sObject to contact

} 

Summary

This post has demonstrated a great use case for Service Cloud Consol custom components. Using a combination of Apex Describes and the Service Cloud Integration Toolkit, we’ve provided a flexible method to create a toolbar to allow Console users to create new cases whilst maintaining the current context.

If you have any questions or feedback about this blog, please feel free to reach out to Gautam Vasudev or Dennis Thong. We would love to hear suggestions about other Service Cloud blog topics as well.

 






The Service Cloud Console - A Quick Create Toolbar