You need to sign in to do that
Don't have an account?
Satyavathi 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;
}
}
}
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;
}
}
}
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
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
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: