Get Started with Console Components



Attention, Trailblazer!

Salesforce has two different desktop user interfaces: Lightning Experience and Salesforce Classic. This module is designed for Salesforce Classic.

You can learn about switching between interfaces, enabling Lightning Experience, and more in the Lightning Experience Basics module here on Trailhead.

Learning Objectives

After completing this unit, you’ll be able to:
  • Describe what a component is.
  • List the different types of components.
  • Know when to code or use an out-of-box component.

What’s a Console Component?

If you earned the Service Cloud Basics badge, you probably remember that we only gave you a quick peek at console components in that module. Why? Because there’s so much that you can do with components that they can seem a bit overwhelming at first. But console components are actually pretty simple. And they give you incredible creativity and flexibility in customizing a console.

Think of components as a fresh canvas for a painter, a blank page for a writer, or an empty floor plan for an architect. Components let you become the Frida Kahlo, Toni Morrison, or Frank Lloyd Wright of any console, creating something from scratch to display in the footer, sidebars, or highlights panels.

With components, you can put a phone widget in the footer (1), show a map of a contact’s location next to a contact record (2), or display the latest financial news about an account alongside an account record (3). To put it simply, you can give your support agents whatever data they need to get their jobs done.

Location of Components in a Console

A screenshot of a console with callouts to the locations of where you can add components

Components also let you integrate third-party systems to a console. What does that mean? Let’s say that your billing department uses an application outside of Salesforce to track and send bills to customers, and your support agents have to use the same application to help customers with billing-related issues. To make life easier for your agents, you can create a component to display the billing application in a console’s footer so that agents don’t have to leave a console to do their jobs. No more context switching. No more multiple applications on screen. With components, you can connect all your applications to one console.

Types of Console Components

Even though you can do a million different things with them, there are only two types of components:

  1. Components for page layouts
  2. Components for footers

You create components for page layouts to display data next to specific records, such as cases. For example, let’s say that whenever a case appears in a console, you want the case’s contact to appear too, so that your agents can see which customer is affected by the issue. To do that, you’d add a component to a case page layout.

A screenshot of a console with a contact component on a case page

To display data across all console pages, you create components for footers. For example, let’s say that you want your agents to access a knowledge base application from any page in a console. For that, you’d add a component to a console’s footer.

A screenshot of a knowledge base application in a console footer

You configure each type of components from a different place in Setup. For page layout components, you go straight to any page layout and click Custom Console Components.

A screenshot of the Custom Console Components link on a case page layout

For footer components, you go right to a console’s edit page to add it to the Choose Console Components field.

A screenshot of the Choose Console Components field on a console's edit page

No matter which type of component you want to add to a console, you might need to upload some Visualforce or code to Salesforce first.

To Code or Not to Code, That Is the Question

Let’s talk code. While we don’t expect you to develop software or communicate with a command line, to fully customize a console with components, you (or someone else) might need to do some coding.

Just like any other Salesforce customization option, there’s always room for code. Depending on what you want to do, you might need to use Visualforce, Canvas, or the Console API (Console Integration Toolkit). But don’t let mention of these tools prevent you from exploring components. A lot of the customizations you may want to add to a console with components already exist for you “out-of-the box.”

What are “out-of-the box” components? Think of them as ready-made components. They’re kind of like a take-and-bake pizza or a frozen dinner that you just heat and serve. With very little effort, and just a few clicks, you can customize a console by adding the most popular component functionality.

Here’s a list of out-of-the box components and what they can do.

Out-of-the-Box Component Functionality
History Lets users quickly return to any primary tabs they’ve recently visited without having to search Salesforce—what a time saver! Users can also bookmark their favorite or occasionally visited tabs for quick access—another time saver!
Lookups Lets users see or update useful lookup fields alongside related records, such as contact fields on cases, without scrolling or leaving pages. (Sound familiar? You might’ve already created a lookup component while following the Service Cloud Basics module.)
Related Lists Lets users see or update useful related lists alongside records, such as tasks or comments on cases, without scrolling or leaving pages.
Multi-Monitor Lets users move portions of a console to different areas of screens to help users be more productive.
Knowledge Lets users search, send, and create knowledge articles right alongside cases. No more poking around various pages to solve customer issues! Only available if Salesforce Knowledge is enabled, but you probably figured that out already.

If these components aren’t enough to maximize your support agents’ productivity, then it’s time to find a developer or put on your own developer hat. We’ll talk more about that in the last unit of this module: Extend Components with Code. We’re also planning future modules that will give you even more detail about code for components.

Meet a Few Console Component Limitations

Before you customize yourself into a corner with components, you should know about a few limitations. Actually, these aren’t limitations so much as a “heads up” about some things. We want to make your life with components easier.

  • You can only add components to page layouts if you have the Sales Console User permission or a Service Cloud User feature license. Don’t forget to give yourself the right permission or license!
  • When you update records, components don’t refresh automatically. Remember to use the ol’ Refresh button on your browser.
  • You can add a component to the headers and footers of a console after you turn off the highlights panel or interaction log on a page layout. In other words, remove old stuff first to add new stuff.
Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities