I've created a custom sidebar using a visualforce page and custom controller to dynamically search for relative cases. All is working well but now I'm trying to get the links to open up as a primary tab within the console.
I don't have advanced knowledge of javascript and I thought I was pretty slick by just formatting the href and using that in my variable but during testing I've found that all the links in the sidebar are the same even though the href is actually different for each when you hover over over check in the browser tools. At first I thought it was an issue with duplicate tabs but it's more than likely my code. Can anyone help me debug this?
Here are the portions of my code I think which may be helpful to see:
<apex:page controller="caseSearchController" sidebar="false" showHeader="false" standardStylesheets="false" docType="html-5.0">
<!-- import the lightning design system style sheet -->
<apex:slds />
<!-- load support console js library -->
<apex:includeScript value="/support/console/39.0/integration.js"/>
<script type="text/javascript">
function openTab() {
var caseurl = document.getElementById("caseId").href;
sforce.console.openPrimaryTab(null, caseurl, true,
'Loading...', null, null);
};
</script>
<apex:pageBlockTable value="{!cases}" var="case">
<apex:column >
<div class="results">
<p class="problem-statement">
<a href="{!$Site.Prefix}/{!case.id}" id="caseId" onClick="openTab('{!case.id}');return false;">
<apex:outputText id="caseProblem" value="{!case.Problem_Statement_Question__c}"/>
</a>
</p>
<p class="problem-detail">
<apex:outputText value="{!IF(LEN(case.Problem_Details__c) > 100, LEFT(case.Problem_Details__c,100)+' ...', case.Problem_Details__c)}"/>
</p>
</div>
</apex:column>
</apex:pageBlockTable>
</apex:page>
UPDATED SOLUTION:
With a little help I now have working code for this by passing in my variables but still collecting the prefix from the href which always stays the same for these particular links:
<apex:page controller="caseSearchController" sidebar="false" showHeader="false" standardStylesheets="false" docType="html-5.0">
<!-- import the lightning design system style sheet -->
<apex:slds />
<!-- load support console js library -->
<apex:includeScript value="/support/console/39.0/integration.js"/>
<script type="text/javascript">
function openPrimaryTab(id,number) {
var prefix = document.getElementById("caseId").href;
sforce.console.openPrimaryTab(null, prefix+id, true,
number, null, number);
}
</script>
<p class="problem-statement"><a href="{!$Site.Prefix}/" id="caseId" onClick="openPrimaryTab('{!case.id}','{!case.casenumber}');return false;">
<apex:outputText id="caseProblem" value="{!case.Problem_Statement_Question__c}"/>
</a>
</p>
</apex:page>