2

Let's say I have a Lightning Web Component which looks like this:

    <template>
        <lightning-record-edit-form object-api-name="Opportunity" onsuccess={handleSuccess}>
            <lightning-messages></lightning-messages>
            ...
         </lightning-record-edit-form>
    </template>

If an apex exception occurs, I get an error message displayed like this: Some Nasty error Message

How do I clear this message from the UI? I have tried <lightning-messages closable="true"> and that does not seem to work. Any thoughts?

3
  • there doesnt seem to be any way to do so =/ what is the current behavior? does it "dissapear" after x seconds?
    – glls
    Mar 22, 2019 at 17:04
  • It just stays in perpetuity until the page is refreshed :/ Mar 22, 2019 at 17:05
  • Remember to accept the post that best helped answer your question =) - even if it is your own
    – glls
    Mar 30, 2019 at 1:22

2 Answers 2

1

Okay, to solve this problem I used a combination of lightning-record-edit-form and lightning-record-view-form and I just omitted the lightning-messages tag. I used a js variable called "editMode" to conditionally render lightning-input-field vs lightning-output-field. Then, I use handleError() onerror to parse the error message and display a closable error toast to the user.

<template>
<lightning-record-edit-form record-id={recordId} object-api-name="Opportunity" onerror={handleError}>
    <lightning-record-view-form record-id={recordId} object-api-name="Opportunity">
        <div class="slds-box">
            <lightning-card title="Opportunity Overview">
                <template if:true={editMode}>
                    <lightning-button variant="Neutral" label="Save" title="Save" type="submit"
                        icon-name="utility:save" slot="actions" class="slds-p-around_xxx-small"></lightning-button>
                    <lightning-button variant="brand" label="Cancel" title="Cancel" type="reset"
                        onclick={clearEditMode} icon-name="utility:undo" slot="actions"
                        class="slds-p-around_xxx-small"></lightning-button>
                </template>
                <template if:false={editMode}>
                    <lightning-button variant="brand" label="Edit" title="Edit" onclick={setEditMode}
                        icon-name="utility:edit" slot="actions" class="slds-p-around_xxx-small"></lightning-button>
                </template>
                <lightning-layout multiple-rows="true">
                        <lightning-layout-item size="6" padding="around-small">
                            <template if:true={editMode}>
                                <lightning-input-field field-name="name"></lightning-input-field>
                            </template>
                            <template if:false={editMode}>
                                    <lightning-output-field field-name="name"></lightning-output-field>
                                </template>
                        </lightning-layout-item>
                       <!-- ... repeat above for all fields... -->
                </lightning-layout>
            </lightning-card>
        </div>
    </lightning-record-view-form>
</lightning-record-edit-form>

Here is js controller:

@track editMode;

connectedCallback() {
    this.editMode = false;
}

setEditMode(){
    this.editMode = true;
}

clearEditMode(){
    this.editMode = false;
}

handleError(event) {
    let message = event.detail.detail;
    //do some stuff with message to make it more readable
    message = "Something went wrong!";
    this.showToast(TOAST_TITLE_ERROR, message, TOAST_VARIANT_ERROR);
   this.clearEditMode();
}
showToast(theTitle, theMessage, theVariant) {
    const event = new ShowToastEvent({
        title: theTitle,
        message: theMessage,
        variant: theVariant
    });
 this.dispatchEvent(event);
}
1

This can be achieved using the if:true|false={lwcVar} directive markup in the LWC HTML: Render DOM Elements Conditionally

The markup in your HTML can be something like this:

<template>
    <lightning-record-edit-form ...>
        <lightning-messages if:false={closeError}></lightning-messages>

        <!-- input / output fields -->

        <lightning-button label="Cancel" onclick={handleReset}></lightning-button>
        <lightning-button type="submit" name="save" label="Save"></lightning-button>

    </lightning-record-edit-form>
</template>

Then your LWC JS can contain:

import { LightningElement, api } from 'lwc';

export default class RecordDetail extends LightningElement {
    @api recordId;
    closeError = false;

    renderedCallback() {
        if (this.closeError) {
            this.closeError = false;
        }
    }

    handleReset() {
        const inputFields = this.template.querySelectorAll('lightning-input-field');
        if (inputFields) {
            inputFields.forEach(field => {
                field.reset();
            });
        }
        this.closeError = true;
    }
}

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.