0

In the Lightning Web Components Recipes examples, there's a navToRecord example that does pretty much exactly what I'm trying to accomplish: bring up an edit card to allow the user to edit a record. But the example doesn't demonstrate how to update the component that opened the window to update any changed data. Reloading the page does reflect the changed data, but I would figure there'd be some event my JS class could listen for to see what data, if any, has been changed so that the calling component could update its information.

Here's the example code that brings up the card window:

navigateToEdit() {
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: this.contact.data.Id,
            objectApiName: 'Contact',
            actionName: 'edit'
        }
    });
}

I know it's asking two questions, but if you know how to remove the "Save and New" button from the edit card, that would be appreciated too.

1

For the first question, the answer is that you should be using getRecord to load a record. If you use this, Lightning Data Service will automatically notify the component of an edit. Other methods, like using a custom @AuraEnabled method, won't allow for automatic updates until the cache timer expires or refreshApex is called (obviously not ideal, since you don't know when the user is done editing).

For the second question, the Save & New button is controlled by the user's permissions. There's no way to remove this button independently at this time. Using standard functionality means you get standard behavior. If you want to have something custom, you could build a custom record edit form and use getObjectInfo, etc to build a UI based on user layout and record type.

1

While the standard edit modal is present, it'll display a greyed out background with a specific z-index (see Issue in Lightning desing System modal component, and SLDS Design Token Z-Index).

What you can do is create an absolutely positioned empty div (width and height 100%) at a Z-Index below the modal, add a mouseEvent listener before firing the standard edit navigation, and wait for the modal to close before refreshing your data. Codepen: Mouse Event Listener


SF LWC Code

HTML:

<template>
    <div if:true={displayListener} onmouseover={mouseOver}>
        <h1>Mouse Over Listener</h1>
    </div>
    <div class="overlay" onclick={clicked}>
        <h1>Overlapping Div (click to reset)</h1>
    </div>
</template>

JS:

import { LightningElement } from 'lwc';

export default class MouseOver extends LightningElement {

    displayListener = true;

    mouseOver() {
        let overlaid = this.template.querySelector('.overlay');
        overlaid.setAttribute('style', 'background-color:blue;');
        this.displayListener = false;
        // Refresh your data
    }

    clicked() {
        let overlaid = this.template.querySelector('.overlay');
        overlaid.setAttribute('style', 'background:#399;')
        this.displayListener = true;
    }
}

CSS:

.listen {
  background: #eee;
  position: absolute;
  top: 0px;
  width: 100%;
  left: 0px;
  height: 100%;
}
.overlay {
  background: #399;
  position: absolute;
  top:0px;
  width: 50%;
  right: 0px;
  height: 100%;
}
h1 {
  padding-left:1rem;
}

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.