1

I have this below code where i am updating a record. After updating i am calling closemodal() function, which will close the modal and navigate to the detail page.

The issue which i am facing is after update happens it is redirecting to detail page but i am unable to see the toast message.

How can i redirect to detail page after toast message.

import {ShowToastEvent} from 'lightning/platformShowToastEvent';
          updateRecord(recordInput)
                    .then(result => {
                        this.message = result;
                        this.dispatchEvent(
                            new ShowToastEvent({
                                title: 'Success',
                                message: 'Request Detail updated',
                                variant: 'success'
                            })
                        );
                        // Display fresh data in the form
                        return refreshApex(this.wiredResults);
                    })
    this.closeModal()

close modal

closeModal() {
    this.openmodel = false;
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: this.recordId,
            objectApiName: 'Test__C',
            actionName: 'view'
        },
    });
}

2 Answers 2

0

Call the this.closeModal() inside the updateRecord Promise. Something like below:

import {ShowToastEvent} from 'lightning/platformShowToastEvent';
          updateRecord(recordInput)
                    .then(result => {
                        this.message = result;
                        this.dispatchEvent(
                            new ShowToastEvent({
                                title: 'Success',
                                message: 'Request Detail updated',
                                variant: 'success'
                            })
                        );
                        // Display fresh data in the form
                        return refreshApex(this.wiredResults);
                        this.closeModal()
                    })
    
2

The problem is that both navigation event and toast event are firing at same time. You do not have close callback in toast.

WorkAround:

You can show toast message for 3 seconds with url to go to that detail page. So that, user can click on it to go to that page when he wants.

However if user does not click on it, You can use setTimeout to navigate to detail page after 3seconds

toast:


    const event = new ShowToastEvent({
    "title": "Success!",
                "message": "{0}! See it {1}!",
                "messageData": [
                    'Request Detail updated',
                    {
                        url, // use [NavigationMixin.GenerateUrl] to get url
                        label: 'here'
                    }
                ]
            });
            this.dispatchEvent(event);

Navigation:

setTimeout(()=>{
    this[NavigationMixin.Navigate]({
        type: 'standard__recordPage',
        attributes: {
            recordId: this.recordId,
            objectApiName: 'Test__C',
            actionName: 'view'
        },
    });
},3000);

Note: Generate url and use it in both places

1
  • Thanks @learninhmode. Did this solve the issue? Aug 22, 2019 at 11:32

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.