Apex · Lightning · Lightning Web Components · Salesforce

Opening Lightning Web Component (LWC) as subtab in Lightning Console

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.
PROPERTYTYPEDESCRIPTION
typestringRequired. The API name of the PageDefinition.
attributesobjectRequired. Values for each attribute specified by the Page Definition. In this scenario attribute will be component name prefixed with ‘c__ ‘.
stateobjectAdditional 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.

4 thoughts on “Opening Lightning Web Component (LWC) as subtab in Lightning Console

  1. Hi Sir,

    What is this oncloseclicked, and onokclicked, these events are nowhere mentioned in code and their contollers also handleFilterChange,getToast.

    Thanks for the post.

    Liked by 1 person

    1. Hi Abhilash,
      You can directly write like this. \
      childWebComponent is a LWC component.

      Please let me know if you face any issue.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s