0

I am using a datatable to show record details. It has a view button that will take the user to the respective record. I want to open record in a new tab. Right-clicking a button does not show the open in new tab option. Action, phone, URL, email, etc show that option. How can we make a button open in a new tab by clicking it; or at least right-clicking it?

I declared button as follows (added target:'_blank'):

const columns = [
    {
        label: 'View',
        type: 'button',
        initialWidth: 50,
        typeAttributes: {
            label: 'View',
            title: 'View',
            variant: 'base',
            alternativeText: 'View',
            target:'_blank'
        }
    },
    { label: 'Label', fieldName: 'name', type:'text' },
    { label: 'Email', fieldName: 'email', type: 'email' , sortable:'true' },
    { label: 'Phone', fieldName: 'phone', type: 'phone', sortable:'true'  },
    { label: 'MDM ID', fieldName: 'mdm', type: 'text' , editable:'true' },
];

HTML

<template>
    <lightning-card title="LWC Wrapper Component" icon-name="standard:contact">
        <div style="height: 400px;">
            <lightning-datatable
                    key-field="Id"
                    data={wrappers.data}
                    columns={columns}
                    onrowaction={navigateToRecordViewPage}
                    hide-checkbox-column="true">
            </lightning-datatable>
        </div>    
    </lightning-card>
</template>

Button does not show open in a new tab option

Button does not show option to open in a new tab

Action shows option to open in new tab

Action shows option to open in new tab

Updates:

I added window.open() to navigation logic of button. It opens a new undefined tab and opens record in same tab.

This page is opened in new tab (The record opens in previous tab)

This page is opened in new tab (The record opens in previous tab)

Javascript

import { LightningElement,api,track, wire } from 'lwc';
import getWrapperLis from '@salesforce/apex/WrapperClass.getWrapperList';
import { NavigationMixin } from 'lightning/navigation'; ///Navigation



const columns = [
    {
        label: 'View',
        type: 'button',
        initialWidth: 50,
        typeAttributes: {
            label: 'View',
            title: 'View',
            variant: 'base',
            alternativeText: 'View',
            target:'_blank'
        }
    },
    { label: 'Label', fieldName: 'name', type:'text' },
    { label: 'Email', fieldName: 'email', type: 'email' , sortable:'true' },
    { label: 'Phone', fieldName: 'phone', type: 'phone', sortable:'true'  },
    { label: 'MDM ID', fieldName: 'mdm', type: 'text' , editable:'true' },
];

export default class WrapperClassTestNavigation extends NavigationMixin(LightningElement) {
    @api recordId;
    @track columns = columns;
    
    // @api UserContext;
    @wire(getWrapperLis,{lead:'$recordId'}) wrappers;

    navigateToRecordViewPage(event) {
        this.record = event.detail.row;
        
        if(document.referrer.indexOf(".lightning.force.com") > 0){
            window.open(
                this[NavigationMixin.Navigate]({
                type: 'standard__recordPage',
                attributes: {
                    recordId: this.record.id,
                    actionName: 'view'
                }
            }),"_blank");
        }else{
            window.open(window.location.assign('/'+this.record.id),"_blank");
        }
    } 
}
0

added

You should use GenerateUrl for your use case:

this[NavigationMixin.GenerateUrl]({
        type: 'standard__recordPage',
        attributes: {
            recordId: this.record.id,
            actionName: 'view',
        },
    }).then(url => {
        console.log('url => ', url); // Verify that you are getting url in log.
        window.open(url, "_blank");
    });

It does not show the option Open in new tab because the click event has a reference which in-turn has the actual logic for navigating. If you had href attribute in anchor tag, then you will get the option. However, you can still use window.open in the method as below:

Column:

{
        label: 'View',
        type: 'button',
        initialWidth: 50,
        typeAttributes: {
            label: 'View',
            name: 'view_details',
            recordId: { fieldName: 'Id' },
            title: 'View',
            variant: 'base',
            alternativeText: 'View',
            target: '_blank'
        }
    },

You need name and recordId properties as shown above. Now in the row action handler:

handleRowAction(event) {
    const actionName = event.detail.action.name;
    const row = event.detail.row;
    switch (actionName) {
        case 'view_details':
            window.open(row.recordId, "_blank");
            break;
        default:
    }
}
1
  • I updated the question at the end. I added window.open() to navigation logic of button. Please check. Thanks – SFdev Nov 4 '19 at 7:39
0

Use this Javascript function for navigation:

navigateToRecordViewPage(event) {
        this.record = event.detail.row;
        if(this.UserContext != undefined) {
            if(this.UserContext != 'Theme4t' || this.UserContext != 'Theme4d') {
                window.location.assign(window.open('/'+this.record.id,"_blank"));
            } 
        }
        else{
            this[NavigationMixin.GenerateUrl]({
                type: 'standard__recordPage',
                attributes: {
                    recordId: this.record.id,
                    actionName: 'view'
                }
            }).then(url => {
                window.open(url,"_blank");
            });
        }
    } 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.