Console 2 for Salesforce

See a more recent version of this project in the Console 3 for Salesforce post

Introduction

We are heavily invested in the Salesforce CRM platform where I work.  We recently tried to come up with a better way for internal employees to view all the different records related to their work.  This is a summary of the problem and the final solution.

The Console View

salesforce-consoleSalesforce has a special view called the Console view that allows users to view and edit multiple related records in one screen without having to go back and forth between pages.  Users are given a main list of records to work on (assignments, cases, tasks etc.) and as they click those records the related records are loaded in other frames.

The Limitation

A limitation of the Console view is that you can only work with one main listing of records at a time.  Most employees have to work with assignments, cases, tasks, and approval records throughout their day.  If they can only see and work on one main listing at a time, then they might not see new records or updates to records in their other lists.  If they are working on their assignments they can’t see their cases or tasks unless they select a different main listing from the dropdown.

The Research

One of Salesforce’s major new features for its platform is Visualforce, a MVC webpage model driven by the Apex programming language.  This allows developers to create dynamic pages with HTML and server controls much like ASP.NET.  A nice new feature of Visualforce is the enhancedList control which allows you to display a table of records that users can sort, page through, and refresh using Ajax so the page never has to reload.  It is built using the Ext JS library and functions similar to this grid example.

Figuring out how to create a page where user’s could see all the records they wanted to was one part of the solution, another part was figuring out how to manage what list of records users would see.  We did not want to have to create a page for each user.  Luckily, the power of combining Visualforce, Apex, and the Force.com framework is that data from standard or custom objects is available to Apex and can be displayed within Visualforce pages.  This enable us to create a custom object to store which list views users see and allows us to have just a few pages that pull in this data.

The Solution

console-viewThe backbone of the solution is how the data is stored and managed.  We created a custom object named “Console View” to store what list views a user would see for particular tabs.  We could easily identify which user was viewing the Visualforce page by reading their user id from the Apex.  By knowing the userid and what tab they were viewing, we could load the list view id’s.

mytodosUsing Apex, Visualforce, and the new enhancedList control, we were able to create a page that can display 5 main record lists at one time.  This allows a user to view a majority of the main records they are concerned with without having to switch back and forth throughout the day to see if there have been any changes.  Below is a complete list of the benefits and features we obtained from this setup.

Benefits and Features

  • See data from multiple list views at one time
  • See data from general “My” list views available to all users
  • See data from user specific list views that only a single user has access to
  • Page through and sort individual list views without the page refreshing
  • Auto refresh of all list views at a set interval
  • Collapse list views by clicking the title
  • Multiple users can see their specific list views using the same visual force page
  • Clicking a record opens a new window for the record that is headerless and sidebarless

Visualforce Page

Below is the markup for the visual force page shown in the example screenshot.  A great thing about this setup is that you can have multiple visual force pages that can load the same data.  They are basically just template layouts for the enhancedLists controls.

Visualforce Page

Visualforce Resources Page

Below is the markup for the resources page that gets included by the template/layout pages.  This javascript/css is kept in a separate page so all other pages can just include which makes for easier updates.  The javascript uses the jQuery library to find the different elements on the page and to manipulate them.

Visualforce Resources Page

Apex Controller

Below is the controller class for the pages.  It queries the list id’s to use for the current user and tab and then provides the id’s to the enhancedList’s when they request them.

Apex Controller

Create Web Tabs to the Pages

For users to easily access the pages we created Web Tabs that link to pages and pass in their tab name.  This allows users to have multiple tabs (My To Do’s, My Accounts, My Misc etc.) that link to differing pages.  We have to pass in a tab name because Apex can’t automatically read which tab the user is on. Below is an example Link URL to use for a tab.

/apex/Console2Template1?tab=ToDos

Caveats

Below is a list of certain limitations or reasons you might not want to use this setup.

  1. Loading  and refreshing 5 enhancedLists on a single page can cause older computers to crawl.  There is a lot of javascript that runs for them so some computers might not be powerful enough to view the pages practically.
  2. There is a limitation of 5 enhancedLists in one Visualforce page that is enforced by Salesforce so users still might not be able to view everything they’d want to.
  3. A Visualforce page cannot have its tabStyle set dynamcially so you will need to create a Visualforce page for every tab that you want to create.
Advertisements
Leave a comment

10 Comments

  1. great stuff! Have you seen the prototype Console they were showing at Dreamforce? Pretty cool.

    Reply
    • Kyle Peterson

       /  March 18, 2009

      No, I hadn’t heard of any new Console prototypes. Do you have a link to some info?

      Reply
      • Kyle, I just turned on the new Service Cloud 2.0 Console – its quite different. I’m a force.com consultant, trying to get the hang of the new console.

      • James Glaubiger

         /  September 5, 2011

        Kyle,

        Could you share your source code for Console 2? It seems not to be available with your article currently.

  2. Mats Eriksson

     /  August 9, 2011

    Hey,
    Interesting post, but your example files have expired or otherwise disappeared. Do you mind sharing them again?

    /Matt

    Reply
  3. Mats Eriksson

     /  September 6, 2011

    James,

    The code is there, it’s only suppressed by your web browser. I had the same problem. Use “View Source” with your web browser on those seemingly “empty” pages and you’ll see the code all right.

    /Mats

    Reply
  4. Kyle Peterson

     /  September 6, 2011

    I’ll be making a post soon about another console solution we recently built at work. There were some things people disliked about this solution but we’re much happier with the new one.

    Reply
  5. al

     /  June 21, 2012

    when I try to do this I get the header repeated in my page.

    Reply
  1. Console 3 for Salesforce « CodeBit

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: