trailhead

Configure a Salesforce Console

Learning Objectives

After completing this unit, you’ll be able to:
  • Describe the console for service.
  • Learn about tab-based navigation.
  • Check out an out-of-the box console.
  • Consider creating custom console components.
  • Learn about advanced console features.

Introduction to the Salesforce Console

The console is where all of Salesforce’s service features come together. The console is a unifying help desk experience for agents. It gives your team a 360-degree view of each customer and where that customer is in your support process. Think of the console as a camera lens that zooms in and out on your customers. When agents view cases in a console, they can quickly zoom in all the little details related to the customer—account, contact, products, and more—or they can focus on the one big detail: the customer’s question or feedback.

A console is a type of Salesforce app that’s designed for speed. You can create as many console apps as you need, as long as you don’t exceed your organization’s custom app limits. Just like other apps in Salesforce, you can access it from the App menu. Unlike other apps in Salesforce, a console uses tab-based navigation and a dashboard-like interface. Tabs help agents easily see all of the information they need on one screen without losing context, while the dashboard interface helps agents spot what they need so that they can complete tasks in an instant. Let’s take a look at a console app.
A screen shot of the console with callouts to areas on the screen.
  1. Select objects and records from the navigation tab.
  2. Records display in a list, which you can pin at the left of the top of the screen.
  3. Selected records appear as primary tabs, and tabs let you work on several items at once.
  4. A highlights panel shows key information related to records.
  5. Records related items appear as subtabs, and subtabs let you quickly switch between related information without losing context.
  6. View and interact with content in the feed or detail area.
  7. Access custom component data in sidebars and footers.

Let’s see the console in action.

Now that you’ve seen the console, let’s give you access to it. We’ll also check out how easy a console is to configure. To make life easy, after you have the Service Cloud User license (available for free in Developer Edition), Salesforce gives you a sample console to play around with.

To get a sneak-peek of how to set up a console app, check out this video.

Note

Note

The sample console Salesforce gives you looks a bit different than what you see above. That’s because we wanted to show you how awesome a console can look after you customize it. Once you get to know the console, you can customize it to look like the one you see in this introduction.

Add the Service Cloud User License to Users

Before you or agents can access a console app, you need to have the Service Cloud User license. It’s simple to assign, and we’ll assign it to you now.

  1. From Setup, enter Users in the Quick Find box, then select Users.
  2. Click Edit next to your name.
  3. Select Service Cloud User.
    A screen shot of the user edit page with the Service Cloud User license checked.
  4. Click Save.

    Now let’s give you visibility to the sample console.

  5. From Setup, click Create | Apps, then Edit next to Sample Console.
    A screen shot of the Apps page in setup.
  6. In Assign to Profiles, click Visible next to your profile, then Save.
    A screen shot of the Assign to Profiles field on a console edit page.

    That’s it! Now you’re ready to take a look at the sample console.

  7. From the App menu, choose Sample Console.
    A console with Sample Console shown from the App menu.
    The sample console appears.
    A screen shot of the sample console.

Customize the Highlights Panel

The highlights panel helps agents see key information at a glance in a console. You can easily customize it on page layouts so that your service team spots exactly what it needs first.
A screen shot of the console with the highlights panel highlighted.

Let’s change the fields on the highlights panel for cases.

  1. From Setup, click Customize | Cases | Page Layouts.
  2. Click Edit next to Case Layout.
  3. Click the highlights panel icon.
    A screen shot of the case page layout with the highlights panel section.
  4. Add the Contact Email and Case Origin fields, and click OK.
    A screen shot of the higlights panel field page.
  5. Click Save.

    Let’s see the new fields on the highlights panel in the console.

  6. From the App menu, choose Sample Console.
  7. Select a case.
    The fields we added appear right at the top.
    The highlights panel with new fields on a case in the console.

Choose Navigation Tab Items

The navigation tab is where agents choose records and lists in a console. From there, agents can select cases, accounts, contacts, custom objects, or any other object that you decide to add to a console app.
A screen shot of a console with the navigation tab highlighted.

Let’s see how quickly it is to update the navigation tab items for your team.

  1. From Setup, click Create | Apps | Edit next to the Sample Console.
    A screen shot of the Apps page in setup.
  2. In Choose Navigation Tab Items, remove Leads and Opportunities because they’re not needed for customer support.
    A screen shot of the Choose Navigation Tab Items on a console edit page.

    On this page, you can change all kinds of console settings like header and footer colors, push notifications on lists, keyboard shortcuts, and much more.

  3. Click Save.

    Let’s see the updated navigation tab in the console.

  4. From the App menu, choose Sample Console.
  5. Click the navigation tab.
    Notice that Leads and Opportunities don’t appear.
    A screen shot of a navigation tab without opportunities or leads.

Add Custom Components to Page Layouts

With custom components, you can take your console apps in all kinds of creative directions and solve a variety of business problems. Components let you build out a console for the specific needs of your agents and support processes. For example, you can create components to integrate third-party systems into a console, customize a console’s highlights panel or footer to display data, or automatically show contextual information alongside records. To give you an idea of what a console can look like with components, take a look at this console.
A screen shot of a console with sidebar and footer custom components.

When components are added to page layouts, they appear in sidebars alongside specific records in the console, such as cases. Components on page layouts help agents see related information in a snap. Salesforce lets you quickly add lookup fields, related lists, report charts, Visualforce pages, and more to console sidebars.

Console components are a big topic that weaves into the world of developers and the API, but in this module, we’ll just show you how easy it is to add some out-of-the box component functionality to page layouts.

Let’s add a contact lookup component to case page layouts so that agents can immediately see customer information alongside cases.

  1. From Setup, click Customize | Cases | Page Layout.
  2. Click Edit next to Case Layout.
  3. At the top of the page layout editor, click Custom Console Components.
    A screen shot of the case page layout with custom console components link at the top.
  4. In the left sidebar for subtab, choose the Stack style with a width of 400 pixels.
  5. In Type, choose Lookup and select the Contact Name field.
  6. Click Enable Linking so that you can link records to contacts on cases, and select New Contact as an action for the component.
    A screen shot of the contact lookup details for a component on case page layouts.
  7. Click Save, then Save on the page layout.

    Let’s see the component in the console.

  8. Click Back to Sample Console in setup, or From the App menu, choose Sample Console.
  9. Select a case. You might have to select Cases from the navigation tab.
    If a contact is on a case, it appears as a component alongside the case for immediate access. Pretty nifty!
    A screen shot of a contact lookup component in the left sidebar of a console.
retargeting