Why Use Visualforce Components in the Salesforce Service Console?
The Salesforce Service Console is an amazing, one-window layout, which is perfect for support agents. Nevertheless, there could be situations where the standard components do not provide enough functionality to satisfy all business requirements.
That is the case when Salesforce Custom Components, especially the ones created with Visualforce, are absolutely necessary. It allows you to show the most selected, very detailed, and tailored information right next to the main record simply by embedding a custom Visualforce page; thus, agent efficiency is increased enormously.
“What is Salesforce Service Console?” is a common question; the answer is that it is a specially designed interface for speed and productivity, and the inclusion of a Visualforce component is a way of ensuring that it remains highly relevant to the agents’ workflow. We will delve into the Visualforce component best practices to guarantee that your execution is neat and efficient.
Initial Challenge: Embedding the Visualforce Component
I recently worked on enhancing the Salesforce Service Console and learned a lot. One of the things I struggled with was embedding a Visualforce component as a component inside the Salesforce Console. This customisation is a key aspect of Salesforce console development in the older interface.
In this post, I would like to share at a high level the steps involved in customizing the Salesforce Service console using a Visualforce component. Please note this post refers to the Salesforce Classic UI, where this setup differs significantly from Salesforce Lightning.
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. For effective Salesforce development, developers often focus on clean design. I like using SLDS for styling. This page must be designed with the constraints of the Custom Console sidebar in mind, focusing only on essential data.
Implementing the Custom Console Component
Once the Visualforce page is ready, we integrate it into the Salesforce Console structure. This is the critical step for creating Custom Console Components.
- Select a page that you want the new Visualforce page to be added to and click on ‘Custom Console Components’. In this example, I used the Case layout to display Account details.
- 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 a Visualforce Page. Select the Visualforce page that was created in Step 1.
- Save. Now that we are done with creating the component and adding it to the page layout. Go back to the Salesforce Console and refresh the page. This is how the console looks after the Visualforce component is implemented. Highlighted portion in the left sidebar comes from the Visualforce page, successfully demonstrating Salesforce console development in Salesforce Classic.
Visualforce Component Best Practices and Design Considerations
Often, displaying many fields in the Visualforce component would clutter the console. This goes against Visualforce component best practices. Carefully choose the fields required by collaborating with Business Users.
- Focus on Relevance: Get to know the 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 the 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 to place the ‘Type of Customer’ field at the bottom of the page.
- Use Hover Text: Add hovers on key fields to give a glimpse of the most important information Users need to know without having to click and open to view the record. This ensures the compact Custom Console view remains useful.
Limitations of Using Visualforce Components in the Console
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 a 15-character record ID.
- inContextPane – Indicates the Visualforce page displays as a component in a Salesforce Console. The value will be ‘true’.
A key limitation of managing Custom Console Components is that if a Visualforce Page has been assigned to a page layout as a component, you cannot delete it until it is removed from the layout configuration. Always remember these details when undertaking Salesforce console development.
Conclusion
Effectively embedding a Visualforce component within the Salesforce Service Console of Salesforce Classic is an impressive method to customize the agent’s working environment. If you go through these instructions and comply with the least decorum of the Visualforce component, you will be able to utilise Salesforce Custom Components to surface the freshest and most pertinent information to the user with no delay, thereby turning the ordinary Salesforce Console into a potent tool for the agent.
