Console 3 for Salesforce

Jump to video demo


This is another custom console solution that replaces the other console solution I described in Console 2 for Salesforce.  The things we tried to improve upon are:

  • We wanted to display the record data in standard html tables instead of the Enhanced List controls.  This would be less page heavy, we could have more than 5 tables on a page, and the table heights and column widths would be automatically sized to their records.
  • We wanted users to be able to see on one page a set of tables but still know if there were new records in their other tabs.
  • We wanted to create the queries used to populate the pages with something other than the listviews feature.  It still needed to be something an admin could do without getting into code like the listviews were.
With this new solution there are three main pieces to it.

Query Creation

We created a way for admins to create the different pieces of a SOQL query (columns to display, filter criteria, sorting) much like they did with the listview feature.  They select fields for each section using a Field Browser dialog we created where they can browse all the fields and object relationships starting from the base object for the query.  They can then sort the fields and enter their filter criteria formulas.  Behind the scenes, apex builds the actual SOQL query that is stored and later executed on the console pages.  A custom placeholder is available for the filter criteria that identifies a current user id.  This is later used for easily previewing queries as other users.

Console Template Creation

After admins define the queries, they create a console template.  A console template defines what tabs will be available, what queries will be shown under each tab, and what specific roles and users a template should be shown for.  The admin creates the tabs they want to show at the top of the page and then assigns different queries to the tabs.  The queries will show as tables displayed one after the other under their tab when the tab is selected.  When users view their console page, a template is automatically chosen for them based on the role and user assignments.  Roles are selected for more general assignments but specific users can be selected for a template to override a general role assignment elsewhere.

To easily see what other users would see, there is a Preview dropdown that allows admins to preview the console template as any user in the system.  This makes it easier to verify that your queries are right and to troubleshoot any issues that users submit later.

For each query, admins can choose to display add links, display edit links, display delete links, and to identify unread records.  Identifying unread records is a very helpful feature because it lets users know which records have been created or modified since the last time they marked a table as read.

Console Viewing

When a user goes to their console page, a console template is loaded from the system for them.  It loads the tabs for the queries and then loads all the queries for the first tab and displays the resulting tables.  As users click to a different tab, the page loads the queries and resulting tables for the new tab.  The tables and tabs refresh automatically every so often to make sure the latest data is available.

For queries that have the Identify Unread feature turned on for them, unread queries are highlighted and counted for each table.  Unread records are also counted for the tabs that are not currently being viewed.  This is very helpful in letting users know if there is new information in tabs they are not currently looking at.


This solution uses apex and visualforce for the admin pages and front end page.  The field browser dialog uses apex describe information for listing the objects and fields in the system.  The front end page uses javascript remoting for loading the tabs and tables dynamically.

Video Demo 

Console 2 for Salesforce

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


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 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.



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.