0

I want to pass recordId on click of a button which opens a lightning component as subtab. Here is the code I tried, but no luck though recordId attribute is there in sub-tab documentation.

Controller:

openTabWithSubtab : function(component, event, helper) {
    var workspaceAPI = component.find("workspace");
    workspaceAPI.openTab({
        url: '/lightning/r/Account/001xx000003DI05AAG/view',
        focus: true
    }).then(function(response) {
        workspaceAPI.openSubtab({
            parentTabId: response,
            recordId: component.get("v.recordId")
            url: '/lightning/cmp/c_MyComponentLightning',
            focus: true
        });
    })
    .catch(function(error) {
        console.log(error);
    });
}

Component:

<aura:component implements = "lightning:isUrlAddressable,flexipage:availableForAllPageTypes,force:hasRecordId,flexipage:availableForRecordHome" access = "GLOBAL">
  <aura:attribute name = "recordId" type = "String"/>
  <lightning:workspaceAPI aura:id="workspace" />
  <lightning:button onclick = "{!c.openTabWithSubtab}" label = "openSubTab" />
</aura:component>
1

Explanation on why its not working:

workspaceAPI.openTab({
    url: '/lightning/r/Account/001xx000003DI05AAG/view',
    focus: true
})

You need to use url: '/0010K000026Y6QZQA0' for giving url. /lightning/r should not be there. But the problem here is after you give record id in this way, it fetch the record but then realize that you are in lightning experiance and fetches lightning UI for you. You can observe the URL changes at run time.

On the other hand, when you use recordId, the console tab or subTab will open that particular record in its lightning record page.

recordId: component.get("v.recordId")
url: '/lightning/cmp/c_MyComponentLightning'

This is NOT valid. When you give recordId, you are telling subTab to open that particular record and so it will simply ignore the url.

I understood that you want to open your custom component and pass attribute values in it. You should be using pageReference for that scenario.

Here is how you need to do:

openTabWithSubtab : function(component, event, helper) {
    var workspaceAPI = component.find("workspace");
    workspaceAPI.openTab({
        recordId: 'a0r0K000063jMXKQA2',
        focus: false
    }).then(function(pTabId) {
        workspaceAPI.openSubtab({
            parentTabId: pTabId,
            pageReference: {
                type: "standard__component",
                attributes: {
                    componentName: "c__MyComponentLightning"
                },
                state: {
                    c__recordId: "XXXXXXXXX23QW"
                }
            },
            focus: true
        });
    })
    .catch(function(error) {
        console.log(error);
    });
}

For the lightning experience types that the page reference object supports, it is recommended to use pageReference ONLY and not use direct URL. You can find pageReference types HERE

  • thanks a lot !!! It saved my time. When I'm trying to retrieve recordId in "MyComponentLightning" by using "component.get("v.recordId")", it's always undefined. May I know why? How to retrieve the same? – sfdcOwl Jul 30 at 18:18
  • You should get it from state (from page reference) – salesforce-sas Jul 30 at 18:19
  • Thank you so much !! clear cut explanation that was !!!! – sfdcOwl Jul 30 at 18:53

Not the answer you're looking for? Browse other questions tagged or ask your own question.