How to Open LWC Link in Lightning Tab?

Question

I am building a Lightning Web Component (LWC) that displays a list of cases related to the same Account as the currently open case. In my data table, the Case Number column is a clickable link that should navigate to the case record. However, the link currently opens in a new browser tab, whereas I want it to open in a new Lightning tab within the Salesforce UI (or focus on an existing tab if it’s already open).

Here is my current JavaScript code defining the columns for the data table:

const columns = [
    {label: 'Case', fieldName: 'nameUrl', type: 'url', 
     typeAttributes: { label: { fieldName: 'CaseNumber' }, target: '_blank' }, sortable: true },
    {label: 'Contact Name', fieldName: 'AccountId'},
    {label: 'Subject', fieldName: 'Subject'},
    {label: 'Priority', fieldName: 'Priority'},
    {label: 'Date Opened', fieldName: 'CreatedDate', type: 'date'},
    {label: 'Status', fieldName: 'Status'},
];

How can I modify this to ensure the link opens in a new Lightning tab instead of a browser tab?

Answer

Solution 1: Remove target: '_blank'

The reason your link is opening in a new browser tab is due to the target: '_blank' attribute in the Case Number column. By default, this instructs the browser to open the link in a new tab. Removing this attribute will allow Salesforce to handle the navigation correctly within the Lightning Experience.

Updated Code:

const columns = [
    {label: 'Case', fieldName: 'nameUrl', type: 'url', 
     typeAttributes: { label: { fieldName: 'CaseNumber' } }, sortable: true },
    {label: 'Contact Name', fieldName: 'AccountId'},
    {label: 'Subject', fieldName: 'Subject'},
    {label: 'Priority', fieldName: 'Priority'},
    {label: 'Date Opened', fieldName: 'CreatedDate', type: 'date'},
    {label: 'Status', fieldName: 'Status'},
];

Explanation:

1. Before: The target: '_blank' attribute caused the link to open in a new browser tab.
2. After: Removing target: '_blank' allows Salesforce to handle the navigation as expected.
3. Result: When users click the Case Number link, Salesforce will open the record within the same Lightning console app, ensuring a seamless user experience.

Alternative Approach: Use NavigationMixin for Manual Navigation

If you need more control over navigation and want to ensure that the link always opens in a new Lightning tab (or focuses on an existing one), you can handle the navigation programmatically using NavigationMixin.

Updated LWC Code Using NavigationMixin

import { LightningElement, api, wire, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import getRelatedCases from '@salesforce/apex/CaseRelatedCasesController.getRelatedCases';
import { getRecord } from 'lightning/uiRecordApi';
import CASE_ACCOUNT_ID_FIELD from "@salesforce/schema/Case.AccountId";

const CASE_FIELDS = [CASE_ACCOUNT_ID_FIELD];

const columns = [
    { label: 'Case', fieldName: 'Id', type: 'button', 
      typeAttributes: { label: { fieldName: 'CaseNumber' }, variant: 'base' } },
    { label: 'Contact Name', fieldName: 'AccountId' },
    { label: 'Subject', fieldName: 'Subject' },
    { label: 'Priority', fieldName: 'Priority' },
    { label: 'Date Opened', fieldName: 'CreatedDate', type: 'date' },
    { label: 'Status', fieldName: 'Status' }
];

export default class RelatedCases extends NavigationMixin(LightningElement) {
    @api recordId;
    @track columns = columns;
    @track cases;
    @track error;
    parentAccountId;

    @wire(getRecord, { recordId: "$recordId", fields: CASE_FIELDS })
    caseRecord({ error, data }) {
        if (data) {
            this.parentAccountId = data.fields.AccountId.value;
            getRelatedCases({ parentAccountId: this.parentAccountId })
                .then(result => {
                    this.cases = result;
                    this.error = null;
                })
                .catch(error => {
                    this.error = error;
                    this.cases = [];
                    console.error('Error getting related cases:', error.body.message);
                });
        } else if (error) {
            console.error('Error getting record:', error.body.message);
        }
    }

    handleRowAction(event) {
        const caseId = event.detail.row.Id;
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: caseId,
                actionName: 'view'
            }
        });
    }
}

Explanation of NavigationMixin Approach:

1. Change type: 'url' to type: 'button'
   • Instead of using a direct URL, we use a button in the data table that triggers navigation when clicked.
2. Use handleRowAction(event) to Capture Click Events
   • When a user clicks a Case Number, the method extracts the Id from the row.
3. Use NavigationMixin.Navigate to Open the Record
   • The NavigationMixin method ensures that the record opens in a new Lightning tab or focuses on an existing one.
4. Result
   • When a user clicks on a Case Number, Salesforce opens the record in a new Lightning tab inside the console app rather than a separate browser tab.

Which Solution Should You Use?

1. If you simply want to prevent the browser tab issue, Solution 1 (removing target: '_blank') is the easiest and most efficient approach.
2. If you want full control over navigation and want to enforce opening in a new Lightning tab, Solution 2 (NavigationMixin) is the recommended approach.

Real-Time Project-Based Salesforce Training to Kick Start Your Career

Our Salesforce Course is tailored to deliver comprehensive knowledge of the Salesforce platform, equipping you with the critical skills needed to excel in the CRM field. The program covers key modules like Salesforce Admin, Developer, and AI, combining foundational concepts with hands-on practice. By engaging in live projects and practical assignments, you’ll gain the confidence to tackle business challenges effectively using Salesforce solutions. Our expert trainers ensure you build both technical proficiency and industry insights to succeed in the Salesforce ecosystem.

In addition to technical skills, our Salesforce training in India provides dedicated mentorship, certification guidance, and interview preparation to boost your career opportunities. You’ll benefit from extensive study materials, real-world project experience, and continuous support throughout the program. By the end of the course, you’ll be fully prepared for certification exams and possess the practical expertise employers seek. Start your Salesforce journey with us and unlock endless possibilities. Register for a Free Demo today!