Lightning - OpenSubTab in Service console app

Question

I am trying openSubTab on a service console application when user click on the member name. When I do so it giving error which i am not sure what I am doing wrong here. Could you please shed some light on this. Household Members is a custom object having lookup relationship with Contact. "Household members" is a custom component.

Component

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="CC_HouseholdMemberController">

    <aura:attribute name="contactId" type="Id"/>
    <aura:attribute name="hhmbrs" type="HouseholdMember__c[]"/>
    <aura:attribute name="ComponentLabel" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <lightning:workspaceAPI aura:id="workspace" />
    <tbody>
       <aura:iteration items="{!v.hhmbrs}" var="hm">
          <tr class="slds-hint-parent">
             <td>
                <div class="slds-truncate" title="{!hm.MemberName__c}">
                   <lightning:button onclick = "{!c.openTabWithSubtab}"/>
                   <a href="javascript:void(0);" data-id="{!hm.Member__c}" aura:id="{!hm.Member__c}" onclick="{!c.openTabWithSubtab}">
                   {!hm.MemberName__c}
                   </a>
                </div>
             </td>
             <td>
                <div class="slds-truncate" title="{!hm.AccountTypeFormula__c}">{!hm.AccountTypeFormula__c}</div>
             </td>
             <td>
                <div class="slds-truncate" title="{!hm.RelationshipFormula__c}">{!hm.RelationshipFormula__c}</div>
             </td>
          </tr>
       </aura:iteration>
    </tbody>

Controller

        openTabWithSubtab : function(component, event, helper) {
        var workspaceAPI = component.find("workspace");
        console.log("workspaceID@@"+workspaceAPI); 
        var recTempId = component.get("v.recordId");
        console.log("recordID@@"+recTempId);        
        workspaceAPI.getFocusedTabInfo().then(function(response) {
           var focusedTabId = response.tabId;
            workspaceAPI.openSubtab({
                parentTabId: focusedTabId,                
                recordId : recTempId,
                focus: true
            });          
            })
            .catch(function(error) {
                console.log(error);
            });
}     

Answer 1

I was about to comment saying "Your code works on my org." Then I realized you are getting the recordId wrong. Well, technically you are getting the Id of already opened record. (DAWN HICKS record) That is why you are getting could not open subtab error. A tab with that record is already opened and it cant open same record tab inside.

Instead of this:

var recTempId = component.get("v.recordId");

it should be this:

var recTempId = event.currentTarget.dataset.id;