openSubtab and openTab in Salesforce Lightning Web Component

openSubtab and openTab in Salesforce Lightning Web Component

For openSubtab and openTab in Salesforce Lightning Web Component, we have to use lightning/platformWorkspaceApi.

Sample Lightning Web Component:

HTML:

<template>
    <lightning-card>
        <div class="slds-var-m-around_medium">
            <lightning-datatable
                key-field="Id"
                data={records}
                columns={columns}
                hide-checkbox-column
                show-row-number-column
                onrowaction={handleRowAction}>
            </lightning-datatable>  
        </div>
    </lightning-card>
</template>

JavaScript:

import { 
    LightningElement, 
    api, 
    wire 
} from 'lwc';
import { getRelatedListRecords } from 'lightning/uiRelatedListApi';
import { NavigationMixin } from 'lightning/navigation';
import { EnclosingTabId, openSubtab, openTab } from 'lightning/platformWorkspaceApi';
const actions = [
    { label: 'New Tab', name: 'Newtab' },
    { label: 'Subtab', name: 'Subtab' }
];
const columns =  [   
    { label: 'Case Number', fieldName: 'CaseNumber' },
    { label: 'Subject', fieldName: 'Subject' },
    { label: 'Status', fieldName: 'Status' },
    {
        type: 'action',
        typeAttributes: { rowActions: actions }
    }
];

export default class RelatedCases extends NavigationMixin( LightningElement ) {
    
    columns = columns;

    @api recordId;
    records;    

    @wire(EnclosingTabId) 
    enclosingTabId;

    @wire( getRelatedListRecords, {

        parentRecordId: '$recordId',
        relatedListId: 'Cases',
        fields: [ 
            'Case.Id', 
            'Case.CaseNumber', 
            'Case.Subject' , 
            'Case.Status' 
        ]

    } )listInfo( { error, data } ) {

        if ( data ) {

            console.log( 
                'Data is', 
                JSON.stringify( data ) 
            );
            let tempRecords = [];

            data.records.forEach( obj => {

                let tempRecord = {};
                tempRecord.Id = obj.fields.Id.value;
                tempRecord.CaseNumber = obj.fields.CaseNumber.value;
                tempRecord.Subject = obj.fields.Subject.value;
                tempRecord.Status = obj.fields.Status.value;
                tempRecords.push( tempRecord );

            } );

            this.records = tempRecords;
            
        } else if (error) {
            
            this.records = undefined;

        }
    }
    
    handleRowAction( event ) {

        const row = event.detail.row;
        const actionName = event.detail.action.name;             
        
        switch ( actionName ) {

            case 'Newtab': 
                openTab( {
                    pageReference: {
                        type: "standard__recordPage",
                        attributes: {
                            recordId: row.Id,
                            actionName: 'view'
                        }
                    }
                } );
                break;
            case 'Subtab':                
                if ( !this.enclosingTabId ) {
                    return;
                } 
                openSubtab( this.enclosingTabId, {
                    pageReference: {
                        type: "standard__recordPage",
                        attributes: {
                            recordId: row.Id,
                            actionName: 'view'
                        }
                    }
                } );
                break;
            default:

        }        

    }

}

js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>

Leave a Reply