Are you facing problems in opening Lightning Web Component (LWC) as workspace tabs and sub-tabs in a Lightning console app?

As some of you would know, in Lightning console apps records open as workspace tabs and their related records open as subtabs.

This blog explains to you, how a user can open LWC as subtab, on the simple click of a button from Lighting record detail page.

Here is a short demo to showcase what we are trying to achieve.

First of all, let’s create a LWC which will be embedded into an Aura component (Parent).

LWC – childWebComponent.html

<template>

    ****Hello from lwc****
    This is recordid - {rId}
    
</template>

childWebComponent.js

import { LightningElement,api } from 'lwc';

export default class ChildWebComponent extends LightningElement {
    @api rId;
   
}

Now moving to the next step, let’s create an Aura component inside which we will call the LWC. Further, we will call this aura component on the click of a button.

Aura component – auraSubtabComponent.cmp

<aura:component
  implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:isUrlAddressable"
  access="global">
  <aura:attribute name="crecordId" type="String" />
  <lightning:workspaceAPI aura:id="workspace" />
  <aura:attribute name="show" type="Boolean" default="false" />
  <aura:handler name="init" value="{!this}" action="{!c.init}" />

  <div class="slds-theme_default">
    <c:childWebComponent rId='{!v.crecordId}'/>
  </div>

</aura:component>

auraSubtabComponent.controller

({
  init: function (component, event, helper) {
    var pageReference = component.get("v.pageReference");
    var rId = pageReference.state.c__crecordId;
    component.set("v.crecordId", rId);
    var toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams({
      mode: "sticky",
      message: "This is a subtab"
    });
    toastEvent.fire();
  }
});

After this, we need to create an Aura component with a button and parallely, create an instance of the lightning:workspaceAPI component and assign an aura:id attribute to it, as shown in the section below.

Aura component – auraButton.cmp

<aura:component
	implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
	access="global">
	<aura:attribute name="recordId" type="String" />
	<lightning:workspaceAPI aura:id="workspace" />
	<lightning:card title="Open Subtab from here">
		<lightning:button label="open subtab" variant="brand" onclick="{!c.openCaseCloneTab }" />
	</lightning:card>
</aura:component>

auraButton.controller

({
	 openCaseCloneTab:function(component, event)
   {
        var workspaceAPI = component.find("workspace");
        workspaceAPI.openSubtab({
            pageReference: {
                "type": "standard__component",
                "attributes": {
                    "componentName": "c__auraSubtabComponent"
 //second aura component
                },
                  "state": {
                         c__crecordId: component.get("v.recordId")
                }
            },
            focus: true
        }).then(function(subtabId){
            workspaceAPI.setTabLabel({
                tabId: subtabId,
                label: "Clone Case"
            });
            workspaceAPI.setTabIcon({
                tabId: subtabId,
                icon: "action:new_case",
                iconAlt: "Clone Case"
            });
        }).catch(function(error) {
            console.log(error);
        });
    },
     
})

Methods

openSubtab({parentTabId, pageReference, recordId, url, focus})

Here, we are going to two parameters pass: pageReference and focus. Further details described as below:

• pageReference (object): A PageReference representing the content of the new subtab.
  • PageReference is a reference to a page, providing a well-defined structure that describes the page type and its corresponding values.

PROPERTY	TYPE	DESCRIPTION
type	string	Required. The API name of the PageDefinition.
attributes	object	Required. Values for each attribute specified by the Page Definition. In this scenario attribute will be component name prefixed with ‘c__ ‘.
state	object	Additional parameters, such as filterName, which is tied to the query string of the URL in Lightning Experience. Here we are passing record Id. Note: Lightning communities don’t support the state property.

• focus (boolean): Specifies whether the new tab has focus.

Returns a Promise. Success resolves to a tabInfo object of the modified tab. The Promise will be rejected on error.

I hope this makes it easier and gives you an insight into how to open LWC as subtab.