Service Cloud Console Hyperlinks

apostrophes problem
The Problem with Apostrophes in Hyperlinks
April 12, 2013

Service Cloud Console Hyperlinks

salesforce service cloud
Applies to: Lightning

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.

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

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

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

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.

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

my-visualforce-pageHere’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.

 

Terry Miller
Terry Miller
Terry has spent over 20 years focused on business leadership and information technology. As an independent consultant, he enjoys working with a variety of customers to help them solve business problems using the Salesforce® platform. His ability to quickly identify bottlenecks and provide understandable solutions has gained him the trust of his customers. If you're looking for expert guidance on your next Salesforce® project, click here to contact Terry today.

Leave a Reply