Extend Components with Code

Learning Objectives

After completing this unit, you’ll be able to:
  • Determine when to create components with code.
  • Explain the process for coding components.
  • Add a “coded” component to a page or footer.

Code for Cooler Components

You’ve seen how easy it is to set up out-of-the-box components. But what if the functionality you need to add to a console doesn’t come readymade or out of any box? Then it’s time to code. If someone on your team wants you to add bells and whistles or unicorns and rainbows to a console (cool components, huh?), get ready to code.

Code can take a console in almost any direction. As mentioned in the first unit, you can create almost anything to plug into a console’s headers, footers, or sidebars. Code is the key to unlocking your console’s “unlimited power” (hello, self-help gurus!).

If you don’t know code, don’t worry. There are plenty of developers in the world willing to help you, and Salesforce provides them with the tools to spin up some code in a jiffy. If a developer knows a little bit about APIs and JavaScript, they can come to your rescue.

To code some cool components, use (or hand your developer) these tools:
  • Visualforce. The palette, if you will, for changing how a console or component looks. Visualforce helps developers build sophisticated custom user interfaces on the Lightning Platform.
  • Console API. Also known as the Salesforce Console Integration Toolkit (try saying that five times). The API gives developers programmatic access to a console to do things like open and close tabs to streamline business processes.
  • Canvas. Besides sounding like something for painters, it lets developers integrate a console with external applications that require authentication methods.

No matter what a developer codes for a console, there’s a simple process to get the code to work. Even if you’re not a developer, you can get the code to work, too. How? By uploading code files your developer gives you into your org or console. If you can upload, you can help.

The Process for Coding Components

It might surprise you to learn that there are only five steps to coding components for a console. Yes, five. Even though you have endless opportunities to code whatever you want into the headers, footers, and sidebars of a console, the process to put your masterpiece into a console generally follows this five-step process.

  1. Developers create a Visualforce page or a canvas app.
  2. Admins add the Visualforce page or canvas app to either:
    • Page layouts to display content on specific pages or
    • Console footer to display content across all pages
  3. Admins who add a component to page layouts:
    • Choose the header, footer, or sidebar in which the component displays
    • Select whether to add multiple components to a sidebar and arrange them as either a stack, tabs, or accordion
  4. Admins who add a component to the footer:
    • Specify the look and feel of the button used to access the component from the console’s footer
    • Assign the component to each console where they want users to access it
  5. Admins or users view the component when they access page layouts or click a button in the footer of a console.
A graphic showing the five-step process for creating components

Now that you’ve seen how simple the process is to add a coded component to a console, let’s walk through it. The process takes less time than brewing a cup of coffee, and it’s caffeine free.

Add Components to Pages

Let’s say that your manager tasked you with coding a new component to appear alongside cases. Even if you don’t know a tag from a code block, let’s pretend that you’re a coding genius. In the next few steps, we’re going to follow the process for coding a component for case pages.

If you’ve already added the Sample Console to your Developer Edition org as described in the Service Cloud Basics module, and assigned yourself the Service Cloud user license, you’re ready to rock and roll.

First, let’s create the component’s code.

  1. From Setup, enter Visualforce Pages in the Quick Find box, then select Visualforce Pages.
  2. Click New. This is where you’d write code. We’re not actually going to write any code, but check out the code that’s there. A screenshot of where to create a new Visualforce page in Setup
  3. In Label, type Test Page.
  4. In Name, type test_page.
  5. Let’s pretend you’ve written some awesome code (unicorns?), then click Save. A saved Visualforce page in Setup

Now that the code for your component is saved as a Visualforce page in your org, you’re ready to upload it to case pages in a console.

  1. From Setup, enter Cases in the Quick Find box, then select Page Layouts.
  2. Click Edit next to Case Layout.
  3. At the top of the page layout editor, click Custom Console Components. A screenshot of the Custom Console Components link on case page layouts
  4. In the Right Sidebar area where you added your related list component earlier, go to Type and choose Visualforce Page. A screenshot of choosing a Visualforce page as custom console component on a case page layout
  5. Under Component, click the Lookup icon (Lookup icon).
  6. From the Lookup dialog box, select Test Page. A lookup dialog box for a Visualforce page
  7. In Label, type New Component, and enter 50 under Height. A screenshot of adding the label and height of a Visualforce component to a case page layout
  8. Click Save, then Save on the page layout.

Let’s see your newly coded component in a console.

  1. Click Back to Sample Console in Setup, or from the App menu, choose Sample Console.
  2. Select a case. You might have to select Cases from the navigation tab.
A screenshot of a console with a Visualforce component alongside a case


If you don’t see the component alongside cases, you might have to hover your mouse pointer over your browser’s right margin and click the expand arrow.

Now that you understand the process for coding a component from scratch, the sky’s the limit for what you can add to case pages, or any pages, in a console.

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