Extend Components with Code
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!).
- 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.
- Developers create a Visualforce page or a canvas app.
- 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
- 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
- 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
- Admins or users view the component when they access page layouts or click a button in the footer of a console.
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.
- From Setup, enter Visualforce Pages in the Quick Find box, then select Visualforce Pages.
- 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.
- In Label, type Test Page.
- In Name, type test_page.
- Let’s pretend you’ve written some awesome code (unicorns?), then click Save.
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.
- From Setup, enter Cases in the Quick Find box, then select Page Layouts.
- Click Edit next to Case Layout.
- At the top of the page layout editor, click Custom Console Components.
- In the Right Sidebar area where you added your related list component earlier, go to Type and choose Visualforce Page.
- Under Component, click the Lookup icon ().
- From the Lookup dialog box, select Test Page.
- In Label, type New Component, and enter 50 under Height.
- Click Save, then Save on the page layout.
Let’s see your newly coded component in a console.
- Click Back to Sample Console in Setup, or from the App menu, choose Sample Console.
- Select a case. You might have to select Cases from the navigation tab.
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.