[SalesForce] How to pop-up a standard Edit-record modal in LWC

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.

Best Answer

You need to use lightning navigation service.

Import the navigation in lwc.

import { NavigationMixin } from "lightning/navigation";

Extend the NavigationMixin class in your lwc component.

export default class YourComponent extends NavigationMixin(LightningElement) {

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.

Related Solutions

[SalesForce] LWC Modal Losing Focus

You've got a couple of issues happening.

First, keep in mind that SDLS Modals only include CSS styles, but not the Javascript necessary to implement most of the keyboard and focus requirements. The issue you linked to will most likely get closed because SLDS would not include the necessary javascript.

Unfortunately, there is not an LWC equivalent to the Aura lightning:overlayLibrary, but you can wrap your LWC component in an Aura component that implements lightning:overlayLibrary.

You are also on the right track by looking at how the W3C ARIA examples function, however, you won't be able to use the Javascript from the W3C directly. Since you didn't post the specific code, but linked to the W3C script, I can only assume you used it without modification. In which case you will need to modify it to be compatible with the modal markup you used.

[SalesForce] LWC – How to open a modal for each element inside a forEach loop

In your template, use a data attribute to reference the Id of the executivo:

<lightning-button 
  data-key={executivo.Id} 
  class="slds-theme_brand" 
  variant="brand"
  label="Adicionar Assistente"
  onclick={openModal}>
</lightning-button>

Define a variable representing the currently-selected executive. Modify your openModal() function to set this variable's value based on the key of the target button:

@track atualExecutivo = {};

openModal(evento){
  this.atualExecutivo = this.listaExecutivos.find(e => 
    e.Id === evento.target.dataset.key
  );
  this.showModal = true;
}

Now, in your modal, you can do this:

<lightning-input 
  label="O assistente será adicionado para o seguinte executivo:" 
  value={atualExecutivo.Name}
  disabled 
  type="text" 
  variant="standard"
></lightning-input>

Note: you don't currently have any onchange event handler defined for your lightning-combobox in the modal, so you'll still need to implement something there. What that looks like depends on what you plan to do with those combobox values.

Another note: since you're considering the use of comboboxes inside modals, you may want to look at this thread.

Best Answer

Related Solutions

[SalesForce] LWC Modal Losing Focus

[SalesForce] LWC – How to open a modal for each element inside a forEach loop

Related Topic