Open standard record edit/view page from lwc datatable/tree grid

Pop up standard record View/Edit page from LWC Datatable or Tree Grid row

Hello friends!! In this post, I will share how you can open the record edit page/record view page of the SObject from Lightning Web Component Datatable. The below scenarios are covered in this post.

1. How to open a standard record view page from the datatable/tree grid row in lwc?
2. How to pop up the standard record edit page from the datatable /tree grid row in lwc?

Expected Output

I will demonstrate this on the Opportunity object in salesforce. Before I expose the final code to you here is the brief step by step explanation of my code.

1. Write an apex method to fetch data from the object.
2. Use standard datatable/tree grid component.
3. Call the apex method using a wired method or property.
   
4. Import and extend the navigation mixin in that component.
   
   

   import { LightningElement, wire } from "lwc";
   import { NavigationMixin } from "lightning/navigation";
   
   // ...
   
   
   export default class DatatableNavigationDemo extends NavigationMixin(LightningElement) {
   
       // ... your code.
   
   }
   

   
   
5. Add a column definition like, type="button" in the data table column list.  Below is the sample definition for the Name button column.
   
   

   {
       label: "Name",
       type: "button",
       typeAttributes: { label: { fieldName: "Name" },
       name: "gotoOpportunity", variant: "base" } 
   }
   

   
   The Edit button column definition is as below.
   
   

   { 
       label: "Edit", 
       type: "button", 
       typeAttributes: { 
           label: "Edit", 
           name: "editOpportunity", // this is name is used to identify 
                                    // the action in action handler
           variant: "brand" 
       } 
   }

   
   
6. Add the row action handler to the lightning data table/tree grid.
   
   I have used NavigationMixin.GenerateUrl to generate the URL of the record, and opened that in a new tab using window.open() method in js.
   
   

   this[NavigationMixin.GenerateUrl]({
       type: "standard__recordPage",
       attributes: {
           recordId: event.detail.row.Id,
           actionName: "view"
       }
   }).then((url) => {
       window.open(url, "_blank");
   });
   

   
   I have used NavigationMixin.Navigate to pop up the standard record edit page of the record.
   
   

   this[NavigationMixin.Navigate]({
       type: "standard__recordPage",
       attributes: {
           recordId: event.detail.row.Id,
           actionName: "edit"
       }
   });

Note: All the code explained here also work for Lightning Tree Grid Component

 

Final Code

I have written a simple apex method to query closed opportunities.

Apex Code

public with sharing class DatatableNavigationDemoController {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpportunities(){
        return [SELECT Name, StageName, Amount, CloseDate, Description FROM Opportunity WHERE StageName = 'Closed Won' LIMIT 20];
    }
}

I have written below HTML code. Note that I have added a row action handler named handleRowAction.

HTML Code

<template>
    <lightning-card variant="Narrow" title="Hello" icon-name="standard:opportunity">
        <p class="slds-p-horizontal_small">
            <lightning-datatable if:true={opportunities.data} key-field="id" data={opportunities.data}
                show-row-number-column hide-checkbox-column columns={opportunityCols} onrowaction={handleRowAction}>
            </lightning-datatable>
        </p>
    </lightning-card>
</template>

And the js code as below. 

JS Code

import { LightningElement, wire } from "lwc";
import getOpportunities from "@salesforce/apex/DatatableNavigationDemoController.getOpportunities";
import { NavigationMixin } from "lightning/navigation";
const OPPORTUNITY_COLS = [
    {
        label: "Name",
        type: "button",
        typeAttributes: { label: { fieldName: "Name" }, name: "gotoOpportunity", variant: "base" }
    },
    {
        label: "Stage",
        fieldName: "StageName"
    },
    {
        label: "Amount",
        fieldName: "Amount",
        type: "currency"
    },
    { label: "Close Date", type: "date", fieldName: "CloseDate" },
    { label: "Description", fieldName: "Description" },
    {
        label: "Edit",
        type: "button",
        typeAttributes: {
            label: "Edit",
            name: "editOpportunity",
            variant: "brand"
        }
    }
];

export default class DatatableNavigationDemo extends NavigationMixin(LightningElement) {
    opportunityCols = OPPORTUNITY_COLS;

    @wire(getOpportunities, {})
    opportunities;

    handleRowAction(event) {
        if (event.detail.action.name === "gotoOpportunity") {
            this[NavigationMixin.GenerateUrl]({
                type: "standard__recordPage",
                attributes: {
                    recordId: event.detail.row.Id,
                    actionName: "view"
                }
            }).then((url) => {
                window.open(url, "_blank");
            });
        }
        if (event.detail.action.name === "editOpportunity") {
            this[NavigationMixin.Navigate]({
                type: "standard__recordPage",
                attributes: {
                    recordId: event.detail.row.Id,
                    actionName: "edit"
                }
            });
        }
    }
}

Thanks for visiting let me if this is helpful for you! 

Follow this blog if you get regular updates for more such stuff in SFDC. 

Happy learning!!

Related Posts

How to add/delete row dynamically in lwc datatable

How to create slds table with cell merge in lwc