Service Cloud Console Hyperlinks

The Service Cloud Console required links on Visualforce pages to be setup a little differently. In the Console, a traditional hyperlink doesn’t work. You first need to open a new tab then display the link in the new tab. Hopefully, the examples below will help you in setting up your Visualforce pages so they’ll work within the Console as well as standard Salesforce pages.

&lt;br /&gt;&amp;amp;amp;lt;span style="font-size: 12px; line-height: 1.6;"&amp;amp;amp;gt;&amp;amp;amp;lt;apex:page standardcontroller="Contract" extensions="ContractExtension"&amp;amp;amp;gt;&amp;amp;amp;lt;/apex:page&amp;amp;amp;gt;&amp;amp;amp;lt;/span&amp;amp;amp;gt;&lt;/p&gt;<br />&lt;p&gt;&amp;amp;amp;lt;apex:includescript value="/support/console/22.0/integration.js"&amp;amp;amp;gt;&lt;br /&gt;&amp;amp;amp;lt;script type="text/javascript"&amp;amp;amp;gt;&amp;amp;amp;lt;br /&amp;amp;amp;gt;&lt;br /&gt;function openTab(recid, recname) {&amp;amp;amp;lt;br /&amp;amp;amp;gt;&lt;br /&gt;if(!sforce.console.isInConsole())&amp;amp;amp;lt;br /&amp;amp;amp;gt;&lt;br /&gt;window.parent.location.replace('/'+recid);&amp;amp;amp;lt;br /&amp;amp;amp;gt;&lt;br /&gt;else&amp;amp;amp;lt;br /&amp;amp;amp;gt;&lt;br /&gt;sforce.console.getEnclosingPrimaryTabId(function(result) {&amp;amp;amp;lt;br /&amp;amp;amp;gt;&lt;br /&gt;callBackopenTab(result, recid, recname);&amp;amp;amp;lt;br /&amp;amp;amp;gt;&lt;br /&gt;});&amp;amp;amp;lt;br /&amp;amp;amp;gt;&lt;br /&gt;}&amp;amp;amp;lt;/p&amp;amp;amp;gt;&lt;br /&gt;&amp;amp;amp;lt;p&amp;amp;amp;gt;&amp;amp;amp;lt;span style="font-size: 12px; line-height: 1.6;"&amp;amp;amp;gt;function callBackopenTab(result, recordid, recordname) {&amp;amp;amp;lt;/span&amp;amp;amp;gt;&amp;amp;amp;lt;/p&amp;amp;amp;gt;&lt;br /&gt;&amp;amp;amp;lt;p&amp;amp;amp;gt;sforce.console.openSubtab(result.id, '/'+recordid , true, recordname, null);&amp;amp;amp;lt;br /&amp;amp;amp;gt;&lt;br /&gt;}&amp;amp;amp;lt;br /&amp;amp;amp;gt;&lt;br /&gt;&amp;amp;amp;lt;/script&amp;amp;amp;gt;&amp;amp;amp;lt;/apex:includescript&amp;amp;amp;gt;&lt;/p&gt;<br />&lt;p&gt;&amp;amp;amp;lt;span style="font-size: 12px; line-height: 1.6;"&amp;amp;amp;gt;&amp;amp;amp;amp;lt;apex:form &amp;amp;amp;amp;gt;&amp;amp;amp;lt;/span&amp;amp;amp;gt;&lt;/p&gt;<br />&lt;p&gt;&amp;amp;amp;lt;apex:actionfunction name="onSelect" action="{!checkBox}" rerender="jsSelected"&amp;amp;amp;gt;&lt;br /&gt;&amp;amp;amp;lt;apex:param name="sId" value=""&amp;amp;amp;gt;&lt;br /&gt;&amp;amp;amp;lt;/apex:param&amp;amp;amp;gt;&amp;amp;amp;lt;/apex:actionfunction&amp;amp;amp;gt;&lt;/p&gt;<br />&lt;p&gt;

This piece of code simulates the look and feel of a related list’s Action column by showing a checkbox and Edit link.

<br /><apex:column headervalue="Action" style="width:90px"><br /><apex:inputcheckbox value="{!myCheckbox}" onclick="onSelect('{!sl.Id}')"> |<br /><a href="#" onclick="openTab('{!sl.Id}/e?retURL=/{!sl.AccountId}','{!sl.Name}'); return false" ><b>edit<="" b><="" a=""><br /></a></apex:inputcheckbox></apex:column><a href="#" onclick="openTab('{!sl.Id}/e?retURL=/{!sl.AccountId}','{!sl.Name}'); return false" ><b>edit<="" b><="" a=""><br />

Below is a sample call using a commandButton. The additional parameter “selected” is optional. In this sample it is using in conjunction with the checkbox you see in the second code sample below.

<br /><apex:outputpanel id="jsSelected"><br /><apex:commandbutton id="combo" value="my Visualforce Page" onclick="openTab('apex/myVisualPage?id={!Id}&selected={!selectedIds}','Tab Name Here'); return false"><br /></apex:commandbutton></apex:outputpanel><br />

Here’s how this might look on the Visualforce page. The command Button sits above the page BlockTable that has the Action column functionality. As the user marks a checkbox, the “onSelect” apex:ActionFunction is called which passed the record’s Id to a class in the extension for processing.