Success Message on record save in lightning component

Question

I have a lightning component embedded in a VF page. This component has a custom lookup to select an Opportunity , on click of a save button calls a method in helper.js which calls an apex method, does some data modification and updates using DML. I want a successful message to be displayed in the UI when updates happened with Success in the apex method. I tried force:showtoast as below which is called from helper as

action.setCallback(this, function(response) {
        var state = response.getState();
        if(state === "SUCCESS") {
           helper.showToast(component,event,helper); 
        }
    });

showToast : function(component, event, helper) { console.log('Inside Show Toast'); var toastEvent = $A.get("e.force:showToast"); toastEvent.setParams({ "title": "Success!", "message": "The record has been updated successfully." }); toastEvent.fire();

But this doesn't work, even record is Updated successfully. I don't want to display an alert message, is there any alternative option?

Update I tried below code but it doesn't show

 SaveRecord : function (component,event,helper,survivalrecord,closedcleanupId){
   console.log('Inside Helper survival 1'+JSON.stringify(survivalrecord));
   console.log('Inside Helper survival 2'+ survivalrecord.Id);
   console.log('Inside Helper closedcleanup '+closedcleanupId);
   var action = component.get("c.SaveRecord"); 
   action.setParams({
        'ClosedCleanupId': closedcleanupId,
        'SurvialId' : survivalrecord.Id
      });
    action.setCallback(this, function(response) {
        var state = response.getState();
        if(state === "SUCCESS") {
           helper.handleinfoToast(component, event, helper); 
        }
    });
   $A.enqueueAction(action);
},
handleinfoToast : function(component, event, helper) {
    console.log('Inside Handle Toast');
    component.find('notifLib').showToast({
        "variant":"info",
        "title": "Notif library Success!",
        "message": "The record has been updated successfully."
    });
},



<lightning:notificationsLibrary aura:id="notifLib"/>
<lightning:button class="slds-m-top_large" type="Save" label="Save"
 onclick="{!c.handleSave}"/>

handleSave.js

handleSave : function(component,event,helper){
       console.log('Inside HandleSave');
       var selectedSurvival = component.get("v.selectedRecord");
       var closedCleanupId = component.get("v.ClosedCleanupId");
      // var selectedRec = ' abc';
       console.log('selectedRec' +selectedSurvival);
       console.log('closedCleanupId '+closedCleanupId);
       if(selectedSurvival !== null){
             console.log('selectedRec is not null');
             helper.SaveRecord(component,event,helper,selectedSurvival,closedCleanupId);
             Input_Text.set("v.errors",null);
       }
       else{
            var Input_Text = component.find("Input_Text");
           Input_Text.set("v.errors",[{message:"Select a surviving Opportunity"}]);
           }
}

Answer 1

You have emebedded lightning component in visualforce page. showToast event is listened by lightning app framework and shows the toast message. In your canse there is no outer lightning app which could listen for that event.

So you are just firing that event and no one is listening to it.

I had the similar use case and to solve it I had to create a Custom toast component as follows

Component code: https://gist.github.com/kiran-machhewar/93e64565ffbcddc7bcb31c154904249c#file-customtoast-cmp

Js controller code: https://gist.github.com/kiran-machhewar/b5a765573c8bbd3dce6146ab1065875a

Js helper code: https://gist.github.com/kiran-machhewar/f260e24e011c882132450a1b775bd2dc

You need to add this as dependency in your app then you can fire this component event ti get the showToast behaviour.

Answer 2

In your helper you declare the function showToast to expect 3 parameters, yet you are calling a function with no parameters.

Either remove the parameters from your helper.showToast, or feed it with the expected parameters on call.

Answer 3

At first you are calling the method with no parameters when it's expecting three. In addition, another reason could be that you did not add the library lightning:notificationsLibrary in your .cmp file.

Check the official documentation about it here