Back to All Stories

The Service Cloud Console continues to evolve as a UI framework for the Service Cloud product line at salesforce.com. Winter '12 saw the introduction of "Pinned List Views" (PLVs). One of the best use cases for this feature is a telesales environment where agents are working through a call down list.

PLVs allow you to access any navigation tab, be it a standard List View or Visualforce page, while you work with individual detail records. They can be oriented vertically or horizontally, allowing the best use of screen orientation.

Orientations of Pinned List Views -

PLVVertical    

Pinned List Views: Vertical Orientation

 PLV Horizontal

Pinned List Views: Horizontal Orientation

PLVs are automatically "pinned" when the first detail record or Primary Tab is opened in the Service Cloud Console. In the image below, the Leads tab is selected. Note that the List View is unpinned at this point, since there are no Primary Tabs open.

Unpinned

Unpinned List View

PLVs are also presented with a collapse on the right (bottom for horizontal orientation) option to allow you to work with the complete Console real estate.

Collapsed

Collapsed List View

Note that in the collapsed state, neither the List View nor the Navigator Tab are available. Only Primary Tabs are accessible. The PLV can be expanded again to retrieve the Navigator tab.

Setup

PLVs are set up at the Service Cloud Console application level. Setup is all of four steps!

  • Navigate to your Service Cloud Console app by going to Setup -> App Setup -> Create
  • Click Edit on your Console
  • In the Choose How Records Display, choose your PLV orientation and enter the width/ height

    Setup

  • Click Save

That's it. The next time you open your Console application, records will open with the Navigator tab List Views pinned.

For the purposes of this blog we'll be using the leads list in a telesales scenario. However, if set, PLVs are applied to all tabs in the Navigator Tab which open Primary Tabs. This includes custom Visualforce tabs.

Using Pinned List Views for Visualforce Lists

PLVs can also be used with custom list views built with Visualforce. The list view must leverage the Service Cloud Console Integration Toolkit to open tabs for each list item.  The example below shows a contact search based on the email field. Since we expect a limited number of search results with each query, the horizontal orientation for PLVs is ideal here.

EmailSearch

Pinned List Views with Custom Search

The Code

Visualforce Page

<apex:page controller="EmailSearchController">
    <apex:includeScript value="/support/console/22.0/integration.js"/>
    <apex:form >
        <apex:pageBlock >
            <apex:outputLabel value="Email : " for="Email" />
            <apex:inputText value="{!Email}" id="Email" >
                <apex:actionSupport action="{!doSearch}" event="onkeyup" rerender="resultBlock"/>
            </apex:inputText>
            <apex:commandButton value="Search" action="{!doSearch}" rerender="resultBlock"/>                  
        </apex:pageBlock>
    </apex:form>

    <apex:pageBlock id="resultBlock">
        <apex:pageBlockTable value="{!contactList}" var="cur">
            <apex:column headerValue="Contact Name">
<a href="javascript:sforce.console.openPrimaryTab(null,'/{!cur.Id}',true,'{!cur.FirstName} {!cur.LastName}');">{!cur.FirstName} {!cur.LastName}</a>
            </apex:column>
            <apex:column value="{!cur.Email}" />
        </apex:pageBlockTable>
    </apex:pageBlock>
</apex:page>

Apex Page

public class EmailSearchController {
    public String Email {get; set;}
    public List<Contact> contactList {get; set;}
      
    public void doSearch() {
        contactList = Database.query('SELECT id, email, firstname, lastname FROM Contact WHERE email LIKE \'%' + Email + '%\'');
    }
}

 The code here is simplified for the purposes of the blog. Let's start with the Visualforce page. In it we create the -

  • "Email" label
  • Input text field which fires a doSearch action on key up and re-renders the results block
  • Search button which fires a doSearch action and re-renders the results block
  • Results block which takes a list of contacts and iterates through them, displaying the Contact name and email address of each. Clicking on the name fires an openPrimaryTab Console Toolkit API call. This opens the corresponding Contact Primary Tab. 

In the apex page, the doSearch action searches for all contacts whose email match or contain the entered value.

As mentioned earlier, the horizontal orientation of the PLV is ideal here since there are relatively few number of items in the list. Horizontal PLVs are also suitable when the data per list item is dense. If only a few columns are relevant, and there are a large number of list items, a vertical PLV may be preferable. Finally, for widescreen 24" monitors, vertical PLVs are a better fit.

Note that in order to allow agents to access this Visualforce PLV from the Navigator Tab, it must be housed in its own Visualforce Tab and added to the Service Cloud Console via setup. You can see how to do this here - The Service Cloud Console - Where's my Home Tab?

Pinned List Views are useful when agents are working down a lead or case list view. However, they can be extended to custom lists or any other standard salesforce.com list views as well. If you have any questions or feedback about PLVs, please feel free to reach out to myself or Michael Ramsey. We would love to hear suggestions on other Service Cloud blog topics as well.

The Service Cloud Console: Where's my Home Tab?