Quickstart: Creating Custom Screen Pops Using Visualforce
This is part of the Developing with Service & Support Quickstarts
Use Case
The time that agents spend clicking through Service & Support is often scrutinized closely. Companies want to enable their agents to be as productive as possible, so if there's a way that few clicks and a few seconds can be saved, it's usually worth investigating. With the release of Spring '10 and CTI Toolkit 2.0, customers can now configure their CTI adapters to pop to a custom Visualforce page to enable the agent to be directed to the right page quickly.
See the blog post corresponding to this quick start for more information and pretty pictures.
Background
Note that this code will only work with CTI adapters developed on the CTI Toolkit 2.0 and later. To find out which CTI Toolkit your adapter was built with, run the adapter, right-click the S-phone icon in the system tray, and click About... The Call Center Edition version corresponds to the CTI Toolkit version.
If you are running an adapter built on an earlier version of the CTI Toolkit, you may want to ask your vendor if they offer a newer version.
To configure your adapter to pop to a Visualforce page, modify the Softphone Layout at Setup | Customize | Call Centers | Softphone Layouts.
Sample Code:
This sample Visualforce page accepts the information that CTI provides on the querystring of the URL and generates a page that searches for Contacts and Accounts. Admittedly, this is not a terribly useful page to pop, particularly since you can also pop a standard search screen that does the same thing, but it does serve to demonstrate how you might use the information provided by the CTI adapter to pop information that is relevant to your agents.
Visualforce page:
01 |
<apex:page controller="SearchPageController"> |
02 |
<apex:pageBlock title="Contacts"> |
03 |
<apex:pageBlockTable value="{!contacts}" var="contact"> |
04 |
<apex:column headertitle="Name"><a href="/{!contact.Id}"><apex:outputText value="{!contact.Name}" /></a> |
06 |
<apex:column value="{!contact.MailingCity}"/> |
07 |
<apex:column value="{!contact.Phone}"/> |
08 |
</apex:pageBlockTable> |
10 |
<apex:pageBlock title="Accounts"> |
11 |
<apex:pageBlockTable value="{!accounts}" var="account"> |
12 |
<apex:column headertitle="Name"><a href="/{!account.Id}"><apex:outputText value="{!account.Name}" /></a> |
14 |
<apex:column value="{!account.BillingCity}"/> |
15 |
<apex:column value="{!account.Phone}"/> |
16 |
</apex:pageBlockTable> |
Controller:
01 |
public class SearchPageController { |
02 |
public List<Account> accounts {get; private set;} |
03 |
public List<Contact> contacts {get; private set;} |
05 |
public SearchPageController() { |
06 |
String callerId = ApexPages.currentPage().getParameters().get('ANI'); |
07 |
List<List<SObject>> searchList = [FIND :callerId IN PHONE FIELDS RETURNING Account(Id, Name,BillingCity,Phone), Contact(Id, Name,MailingCity,Phone)]; |
09 |
if (searchList!=null) { |
10 |
accounts = ((List<Account>)searchList[0]); |
11 |
contacts = ((List<Contact>) searchList[1]); |