How to pop-up a standard Edit-record modal in LWC?

Question

The modal that I want to pop-up can be seen, for instance, by clicking Edit in the dropdown menu in the related list of Opportunities for an Account.

To do this in Aura, Salesforce gives this description, which involves firing a force:editRecord event. But I am not programming in Aura, I am doing 100% LWC.

So I tried to emulate it in LWC like this:

const selectedEvent = new CustomEvent('force:editRecord', { recordId: selectedItemValue });
this.dispatchEvent(selectedEvent);

But that doesn't do anything.

So: how to pop-up that standard Edit-record modal? It doesn't have to involve events, in fact I'd prefer a method without them. It just seems a bit complicated.

Answer 1

You need to use lightning navigation service.

1. Import the navigation in lwc.

import { NavigationMixin } from "lightning/navigation";

2. Extend the NavigationMixin class in your lwc component.

export default class YourComponent extends NavigationMixin(LightningElement) {

2. Use the below code to open the edit page.

this[NavigationMixin.Navigate]({
    type: 'standard__recordPage',
    attributes: {
        recordId: recordId, // pass the record id here.
        actionName: 'edit',
    },
});

Documentations.