Open link as subtab in Console View and a new browser Tab otherwise

Question

I am trying to create a link dynamically using the below code:

'<span>'+
'<a href="/'+ row.id+'" target="_blank">'+ row.name+
'</a>'+
'</span>'

The created link works well in normal view. It redirects to the record detail page.

Now, the problem I am facing is, to open a subtab, when the link is being accessed from Console View.

I have gone through the openSubtab documentation. But didn't work for me.

This is the code by referring the documents:

function openSubTab(recId){
             var redirectUrl = recId;
             if (sforce.console.isInConsole()) {
                 sforce.console.getEnclosingTabId(function(enclosingResult){
                     sforce.console.getEnclosingPrimaryTabId(function(primaryResult){
                         sforce.console.openSubtab(primaryResult.id, redirectUrl, true, '', null);
                     });
                 });
             } else {

                 window.top.location.href = '/'+redirectUrl

             }
         }        

Link Generation Code(Added onClick):

'<span>'+
'<a href="#" onClick = "openSubTab('+row.Id+');return false"" class="easyui-linkbutton" target="_blank">'+ row.name+
'</a>'+
'</span>'

Is there a better way to do what I am trying to accomplish?

Note: The record ID would be dynamic.

Answer 1

I like using jQuery on click listener to override navigation for the links based on context.

Here is an example-

<apex:page standardController="Case">

    <!-- Placeholder for link -->
    <div id="link"></div>

    <apex:includeScript value="//code.jquery.com/jquery-3.2.1.min.js"/>
    <apex:includeScript value="/support/console/40.0/integration.js"/>

    <script>
        j$ = jQuery.noConflict();

        j$(document).ready(function() {

            // start - link generation code
            var caseId = "{!Case.Id}";
            var caseNumber = "{!Case.CaseNumber}";
            var spanHtml = '<span>' +
                    '<a class="open-case" href="/' + caseId + '" target="_blank">' + 
                        caseNumber +
                    '</a>' +
                '</span>';
            j$("#link").html(spanHtml);
            // stop- link generation code

            // adding listner for links
            j$( "a.open-case" ).on( "click", function(e) {

                // stop default navigation
                e.preventDefault();

                var recordUrl = j$( this ).attr("href");
                var tabLabel = j$( this ).attr("text");

                if (sforce.console.isInConsole()) {
                    // navigate for console
                    callOpenSubtab(recordUrl, tabLabel);
                } else {
                    // redirect manually for non console view
                    window.location = recordUrl;
                }
                // add more navigations maybe for salesforce1 or lightning as required
            });
        });

        // console method for opening tab
        function callOpenSubtab(recordUrl, tabLabel) {

            var openSuccess = function(result) {
                //Report whether we succeeded in opening the subtab
                if (result.success == true) {
                    alert('subtab successfully opened');
                } else {
                    alert('subtab cannot be opened');
                }
            };

            sforce.console.getEnclosingPrimaryTabId(function(result) {
                //Now that we have the primary tab ID, we can open a new subtab in it
                var primaryTabId = result.id;
                sforce.console.openSubtab(primaryTabId , recordUrl, false, 
                    tabLabel, null, openSuccess, 'salesforceSubtab');
            });
        }
    </script>
</apex:page>