+ Start a Discussion
Satyavathi PolepallySatyavathi Polepally 

Toast event is not firing and the Save button is not getting disabled after clicking on it

Hi All,

I have created a lightning component to display a public site from which we can get customers sigup.
I have created the Lightning component for this and able to view the page but, I am unable to fire the toast messages in this.
And also my Save button is not getting disabled after clicking on it. 
This is my code. Any help to solve this is appreciated. Thanks in advance.
Lightning component:
<aura:component controller="CreateContactrecordController" 
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:lightningQuickAction,
            flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,lightning:isUrlAddressable,
            lightning:actionOverride,force:hasRecordId"
             access="global" >
    <!-- Include Static Resource-->
    <ltng:require styles="/resource/bootstrap/css/bootstrap.min.css" 
scripts="/resource/bootstrap/js/jquery.js,/resource/bootstrap/js/bootstrap.min.js"/>
    <!--aura:attribute name="isSpinner" type="boolean" default="false"/-->
    <aura:attribute name="FirstName" type="String" default="" />
    <aura:attribute name="LastName" type="String" default="" />
    <aura:attribute name="Mobile" type="String" default="" />
    <aura:attribute name="Email" type="String" default="" /> 
    <aura:attribute name="Store" type="String" />
    <aura:attribute name="LanguageList" type="List" />
    <aura:attribute name="SelectedLanguage" type="String" />
    <aura:attribute name="isHide" type="Boolean" default="false" />
    
     <aura:handler name="onSaveSuccess" event="force:recordSaveSuccess" action="{!c.handleSaveSuccess}"/>
 <force:recordEdit aura:id="edit" recordId=""/>
 <ui:button label="Save" press="{!c.save}"/>
    
    <div class="slds-page-header">
        <div class="slds-align_absolute-center">
            <div class="slds-text-heading_large">
                <div class="slds-m-top_xx-large">
                    Customer Subscription Form
                </div>
            </div>
        </div>
    </div>
    <br/>
    <aura:handler name="init" action="{!c.doinIt}" value="{!this}"/> 
    <div class="slds-form-element__control">
         <lightning:input label="First Name" name="firstname" type="text" required="true" value="{!v.FirstName}" />
        <br/>
        <lightning:input label="Last Name" name="lastname" type="text" required="true" value="{!v.LastName}" />
        <br/>
        <lightning:input label="Mobile" type="tel" value="{!v.Mobile}"/>
        <br/>
        <lightning:input label="Email" name="email" type="email" required="true" value="{!v.Email}" />
        <br/> 
        <lightning:input label="Store" type="Text" name="Store" value="{!v.Store}" />
        <br/> 
        <lightning:select label="Language" name="Language" value="{!v.SelectedLanguage}">
            <aura:iteration items="{!v.LanguageList}" var="Language">
                <option value="{!Language}" text="{!Language}"></option>
            </aura:iteration>
        </lightning:select>
        <br/>
   <lightning:button variant="brand" disabled="{!v.isHide}" label="{!v.isHide == true ? 'Save' : 'Save'}" onclick="{!c.savecustomerForm}" /> 
    <!--lightning:button variant="brand" disabled="{!v.isSpinner}" label="{!v.isSpinner == true ? 'Saving...' : 'Save'}" onclick="{!c.savecustomerForm}" /--> 

    </div>       
</aura:component>

Controller.js:

({
    doinIt: function(component, event, helper){ 
        var action = component.get('c.getPickListValuesIntoList');          
         // method name i.e. getEntity should be same as defined in apex class         
         // params name i.e. entityType should be same as defined in getEntity method        
        //action.setParams({ "entityType" : component.get('v.componentString') });         
            action.setCallback(this, function(a){             
            var state = a.getState(); // get the response state             
            if(state == 'SUCCESS') {
               component.set('v.LanguageList',a.getReturnValue()); 
            }        
            });         
            $A.enqueueAction(action); 
    },
     savecustomerForm: function(component, event, helper) {
        console.log('Create record');
         var action = component.get("c.save");
        //Setting the Apex Parameter
         action.setParams({"FirstName":component.get("v.FirstName"), "LastName":component.get("v.LastName"),
                           "Email":component.get("v.Email"), "Mobile":component.get("v.Mobile"), 
                           "Store":component.get("v.Store"), "Language":component.get("v.Language")
            });
        //Setting the Callback
        action.setCallback(this,function(a){
            //get the response state
            var state = a.getState();
            var isContactexists = a.getReturnValue();
            //check if result is successfull
           
            if(state == "SUCCESS"){
                //Reset Form
                var newContact = {'sobjectType': 'Contact','FirstName': '','LastName': '','Email': '',
                                  'Mobile': '', 'Store__C': '','Language__c' : ''};
                //resetting the Values in the form
                component.set("v.Contact",newContact);
                if(isContactexists===true){
              //alert('Record Created Successfully');
                    component.find("edit").get("e.recordSave").fireeSuccess : function(cmp, event) {
                     // Display the save status
                     var toastEvent = $A.get("e.force:showToast");
                     toastEvent.setParams({
                     "title": "true!",
                     "message": "My Custom Record Saved Successfully"
 });
 toastEvent.fire();
                    }
                    
                component.set('v.isHide', true);  
                }
                else { 
                   alert('Record already exists'); 
                   
                }
            }
            else if(state == "ERROR"){
            alert('Error in calling server side action');
           
            }
            
        });
                
         $A.enqueueAction(action);}

})

Apex controller:

public class CreateContactrecordController {
@AuraEnabled
     public static List<String> getPickListValuesIntoList()
     {
       List<String> pickListValuesList= new List<String>();
        Schema.DescribeFieldResult fieldResult = Contact.Language__C.getDescribe();
        List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
        for( Schema.PicklistEntry pickListVal : ple){
            pickListValuesList.add(pickListVal.getLabel());
        }    
        return pickListValuesList;
    }
 @AuraEnabled   
    public static Boolean save(String FirstName, String LastName, String Email, String Mobile, String Store, String Language )
    {
        List<Contact> Contact = [SELECT Id, Email From Contact WHERE Email=:Email];
         if(contact.size() > 0){
             return false;
        }else{
            Contact con=new Contact(); 
            con.FirstName = FirstName;
            con.LastName = LastName;
            con.Email = Email;
            con.MobilePhone = Mobile;
            con.Store__c = Store;
            con.Language__c = Language;
            insert con;
            return true;
        }
    }
    }
 
Best Answer chosen by Satyavathi Polepally
Team Codekiat.comTeam Codekiat.com
In the savecustomerForm method, after getting the response from the server side, add console.log or alerts inside the success condition. 

       component.find("edit").get("e.recordSave").fireeSuccess : function(cmp, event) {
                     // Display the save status
                     var toastEvent = $A.get("e.force:showToast");
                     toastEvent.setParams({
                     "title": "true!",
                     "message": "My Custom Record Saved Successfully"
 });
 toastEvent.fire();
                    }
       
comment Code line and Curley brace [only first and last line]  and test the code. share the result. 

Naveen         

All Answers

Team Codekiat.comTeam Codekiat.com
In the savecustomerForm method, after getting the response from the server side, add console.log or alerts inside the success condition. 

       component.find("edit").get("e.recordSave").fireeSuccess : function(cmp, event) {
                     // Display the save status
                     var toastEvent = $A.get("e.force:showToast");
                     toastEvent.setParams({
                     "title": "true!",
                     "message": "My Custom Record Saved Successfully"
 });
 toastEvent.fire();
                    }
       
comment Code line and Curley brace [only first and last line]  and test the code. share the result. 

Naveen         
This was selected as the best answer
Prakhar Saxena 19Prakhar Saxena 19
Hi Satyavathi,

e.force:showToast Event is handled by one.app container. It’s supported in Lightning Experience, Salesforce app, and Lightning communities.
https://developer.salesforce.com/docs/component-library/bundle/force:showToast/documentation

Running this component after including it in a Lightning Application created from Developer Console will not invoke the e.force:showToast event.

Try adding the same component on a Record or Home Page. It should fire the ToastEvent.

Additionally, if you are including this component on a record or home page, then there is no need of writing an Apex method to save the contact. You can then use Lightning Data Service's saveRecord method.
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/data_service_create_record.htm

Now, if you are not including this component on a Record or Home Page, then the above code should work fine. You will just have to replace e.force:showToast messages with alerts.

I tried the below controller and it worked as expected: 
 
({
    savecustomerForm : function(component, event, helper) {
        var action = component.get("c.save");
        action.setParams({
            FirstName : component.get("v.FirstName"),
            LastName : component.get("v.LastName"),
            Mobile : component.get("v.Mobile"),
            Email : component.get("v.Email"),
            Store : component.get("v.Store"),
            Language : component.get("v.Language")
        });
        action.setCallback(this, function(response){
            var resultsToast = $A.get("e.force:showToast"); 
            if(response.getState()==="SUCCESS"){
                if(response.getReturnValue()){
                    component.set("v.FirstName", "");
                    component.set("v.LastName", "");
                    component.set("v.Mobile", "");
                    component.set("v.Email", "");
                    component.set("v.Store", "");
                    component.set("v.Language", "");
                    component.set("v.isHide", "true");
                    alert("The record was saved.");
                }   
                else{
                    alert("Record Already exists.");    
                }
            }     
            else{
                resultsToast.fire(); 
                alert("There was an error saving the record");
            }      
        });
        $A.enqueueAction(action);
    }
})