How to open a multiple sub tabs under a single primary tab with a link click in salesforce service console?

Question

I have requirement that i need to open the list of cases associated to an account in a sub tab by clicking on a button in account detail page. I have written the following visualforce page to accomplish this task. As of now, I have hardcoded the id values. Could anyone one please tell me how to open multiple subtabs at a time for a primary tab in console ?

<apex:page standardController="Case">

<A HREF="#" onClick="callMultipleSubTabs();return false">
    Click here to open a new subtab</A> 

<apex:includeScript value="/support/console/22.0/integration.js"/>
<script type="text/javascript">
    var strURL;
    var strTitle;

    function callMultipleSubTabs()
    {
        var caseIds = "5009000000VxOsE;5009000000VxOsD";
        var caseTitle = "00001001;00001000";

        var id = caseIds.split(";");
        var title = caseTitle.split(";")
        var finalId = caseIds.replace(";","|");

        for(i=0;i<id.length ; i++)
        {
            if(sforce.console.isInConsole())
            {
                alert('In console');
                testOpenSubtab(caseId,caseNumber);
            }
            else
            {
                window.open("/"+id[i],'_blank');
                window.focus();
            }

        }


    }
    function testOpenSubtab(inputURL,inputTitle) {
        strURL = inputURL;
        strTitle = inputTitle;
        //First find the ID of the primary tab to put the new subtab in
        sforce.console.getEnclosingPrimaryTabId(openSubtab);
    }

    var openSubtab = function openSubtab(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 , strURL, false, 
            strTitle, null, openSuccess, strTitle);
    };

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

</script>

Answer 1

You're trying to pass your variables by leaking them into the global state. Bad idea. Basically:

var function1 = function (inputValue) {
    unscopedVar = inputValue;
}
var function2 = function () {
    // use unscopedVar
}

Don't do that, it's bad practice. And in this case, it's not even going to work, because the variables are synchronous in function1 and asynchronous in function2. So the first step in getting your code working is to pass those variables to the openSubtab method.

var openSubtab = function (result, inputUrl, inputTitle) {
    // logic
}

However, you don't even need to make each call asynchronous. You can perform the asynchronous logic on page load.

(function (D, c) {
    var primaryTabId; // locally scope your variable
    D.addEventListener('DOMContentLoaded', function() {
        c.getEnclosingPrimaryTabId(function (tab) {
            primaryTabId = tab.id;
        });
    });
})(document, sforce.console);

Now you can remove that first line (and parameter) from openSubTab and make these calls synchronously on click.

So back to your loop. You are trying to pass a url of caseId, but that is not even a valid url. Make sure you prepend a / character to make it a relative path. I would recommend using the $Action variable but that might be overly complicated in this script. Since eventually you will be iterating a List<Case>, I recommend designing your function to simply accept a Case record. Something like:

(function (D, c) {
    var baseUrl = "{!LEFT($CurrentPage.URL,FIND('/',$CurrentPage.URL,9))}",
        openTab = function (caseRecord) {
            var caseUrl = baseUrl + caseRecord.Id,
                caseTitle = caseRecord.CaseNumber;
            if (!c.isInConsole) {
                window.open(caseUrl, "_blank");
                window.focus();
            }
            else {
                c.openSubTab(primaryTabId, caseUrl /*other parameters*/);
            }
        }

    // include here DOMContentLoaded listener outlined above

})(document, sforce.console);