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

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

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

Posted by Kyle Peterson on March 18, 2009

https://codebit.wordpress.com/2009/03/18/console-2-for-salesforce/