I was recently working on enhancing a service console and got to learn a lot of things. One of the things I struggled with is embedding Visualforce page as a component inside a console. In this post, I would like to share at a high level, the steps involved in customizing service console using Visualforce component. Please note this post refers Salesforce classic UI.
Create Visualforce component
This is no different than developing a regular Visualforce page with the data that needs to be displayed on the console. Since this page is going to be displayed as a sidebar, consider styling the elements so they auto-align and look good when you resize the side panel. I like using SLDS for styling (refer lightningdesignsystem.com ).
Implementing the component
(a). Select a page that you want the new Visualforce page to be added and Click on ‘Custom Console Components’. In this example, I used Case layout to display Account detail.
(b). Decide which sidebar you wish to show the new Visualforce component and add Component type, Component, Label, Width, and Height. The component can be a lookup, Canvas App, Related list, Knowledge One, Topics, Files, Report chart in addition to Visualforce Page. Select the Visualforce page that was created in Step 1.
(c). Save Now that we are done with creating the component and adding it to page layout. Go back to console and refresh the page.This is how the console looks after the visualforce component is implemented. Highlighted portion in left sidebar comes from the Visualforce page.
Considerations
- Often displaying many fields in the Visualforce component would clutter the console. Carefully choose the fields required by collaborating with Business Users.
- Get to know most frequently referred data elements in resolving a case or answering a customer’s query. Based on the users’ feedback, the positioning of the fields can reduce time to complete a task. For example, a support executive’s first step in resolving a case is to know if it relates to a Priority customer. In that case, it does not make sense in placing ‘Type of Customer’ field at the bottom of the page.
- Add hovers on key fields to give a glimpse of most important information Users need to know without having to click and open to view the record.
Limitations
- When Visualforce pages are used as components, two URL parameter values are passed automatically: id and inContextPane.Id – The ID of the detail page in which the component displays. This parameter is only passed if the ID is available. Value is 15 char record Id.inContextPane – Indicates the Visualforce page displays as a component in a Salesforce console. The value will be ‘true’.
- If a Visualforce Page has been assigned to page layout as a component, you cannot delete it.
“We @ TechForce Services are specialized in Salesforce Development – Apex, Visualforce and Lightning, API Integrations. We also cover Salesforce Setup, mplementation & Customization”.
