Navigate to tab that contains Lightning Web Component with record Id as parameter

Question

I am able to navigate to visualforce using record id as parameter. But I am not able to do this in LWC. I will give the illustration of what I want to achieve.

In the Onboarding List page that also visualforce page there is table element contain all the record in the Onboarding object and we able to call the visualforce from the table using this:

OnboardingList.vfp:

<thead>
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
    </tr>
</thead>
<tbody>
    <apex:repeat id="repeatOnboarding" var="dt" value="{!onboardingList}">
        <tr>
            <td>
                <apex:outputLink value="{!$Site.prefix}/apex/OnboardingDetailPage?oid={!dt.Id}&action=detail">{!dt.Name}</apex:outputLink>
            </td>
            <td>{!dt.Email}</td>
            <td>{!dt.Phone}</td>
        </tr>
    </apex:repeat>
</tbody>

and Onboarding Detail page will be the page (also visualforce page) that show the customized detail of the record, this detail page we customize is very complex that require consolidating all the data related to that record.

In Onboarding Detail controller, I am able to get the Id of the record using this:

OnboardingDetail.cls:

public OnboardingDetail() {
    String oId = ApexPages.currentPage().getParameters().get('oid');
    String action = ApexPages.currentPage().getParameters().get('action');
}

So, back to LWC, this is the Onboarding List page that I've created and I am able to get the Id of the record using this:

OnboardingList.html:

<template>
    <lightning-card title="Onboarding" icon-name="action:new_task">
        <div class="slds-m-around_medium">
            <template if:true={onboardingList.data}>
                <table id="tblOnboardingList">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template for:each={onboardingList.data} for:item="dt" for:index="indexvar">
                            <tr id="datarow">
                                <td>
                                    <!-- call js function and carry the iterated record id -->
                                    <a onclick={navigateToOnboardingDetail} data-id={dt.id}>
                                        {!dt.Account.Name}
                                    </a>
                                </td>
                                <td>{!dt.Email}</td>
                                <td>{!dt.Phone}</td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </template>
            <template if:true={onboardingList.error}>
                {onboardingList.error}
            </template>
        </div>
    </lightning-card>
</template>

In the js file, the event.target.dataset.id will contains the record Id

OnboardingList.js:

import { LightningElement, wire, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

import getBacklog from '@salesforce/apex/OnboardingHandler.getOnboardingBacklog';

export default class OnboardingPage extends NavigationMixin(LightningElement) {
    @wire(getBacklog) onboardingList;

    navigateToOnboardingDetail(event) {
        console.log('get the record id: ' + event.target.dataset.id);
        event.preventDefault();
        this[NavigationMixin.Navigate]({
            type: 'standard__navItemPage',
            attributes: {
                //how to apply this id and navigate to tab that has LWC component?
                //recordId: event.target.dataset.id,
                apiName: 'Onboarding_Detail'
            }
        });
    }
}

How to navigate to the tab that contains LWC and carry the record Id due to the standard__navItemPage doesn't support recordId as attributes

Is there any workaround to do this if the standard NavigationMixin is not possible? How can I achieve this in LWC?

Answer 1

Not sure if this is exactly the solution you are looking for, but it's a work-around that I've been using.

I pass the recordId as a URL parameter to the tab. (Note, I use window.open(THEURL, '_top') instead of NavigationMixin because that did not refresh the tab and reload the contents with the newly passed parameters)

I generate the THEURL of page similar to this: /lightning/n/TABNAME?c__recordId=XXX

In the receiving LWC, I have an edit form with an "onload" handler:

<lightning-record-edit-form record-id={recordId} onload={handleLoad}>

In the handleLoad, I have this code to pull the parameter in and set the recordId:

handleLoad() {
    if ( this.pageRef && this.pageRef.state['c__recordId'] ) {
        this.recordId = this.pageRef.state['c__recordId'];
    }
}//handleLoad

(These are code excerpts... but give the overall concept that I've been using. This has been working for me; and it works whether the LWC is embedded on a record layout, or shown as its own tab with the parameter.)