Today We are going to Create a Model popup for Create a Account Record With Spinner .
Modals/Popup Box are used to display content in a layer above the app. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards
Step :- 1 Create an Apex Class
Apex Class
public class AccountHandler {
@AuraEnabled
public static boolean CreateAccount (String Name , String Phone, String accountNuber, Decimal annualRevenue){
Account acc = new Account();
acc.Name = Name;
acc.Phone = phone;
acc.AccountNumber = accountNuber;
acc.AnnualRevenue = annualRevenue;
try{
insert acc;
return true;
} catch(Exception e){
return false;
}
}
}
Step 2:- Create a Lighting Component.
Lightning Component .cmp
<aura:component Controller="AccountHandler" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="isModalOpen" type="boolean" default="false"/>
<aura:attribute name="response" type="boolean" />
<aura:attribute name="spinner" type="boolean" default="false" />
<div class="slds-m-around_xx-large">
<lightning:card footer="Card Footer" title="Create Account Record">
<lightning:button variant="brand"
label="Create Account"
title="Create Account"
onclick="{! c.openModel }" />
</lightning:card>
<!--Use aura:if tag to display/hide popup based on isModalOpen value-->
<aura:if isTrue="{!v.isModalOpen}">
<!-- Modal/Popup Box starts here-->
<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
<div class="slds-modal__container">
<!-- Modal/Popup Box Header Starts here-->
<header class="slds-modal__header">
<lightning:buttonIcon iconName="utility:close"
onclick="{! c.closeModel }"
alternativeText="close"
variant="bare-inverse"
class="slds-modal__close"/>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal/PopUp Box</h2>
</header>
<!--Modal/Popup Box Body Starts here-->
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-2">
<lightning:input type="text" name="name" aura:id="name" label="Name" required="true" placeholder ="Enter Name" />
</div>
<div class="slds-col slds-size_1-of-2 slds-p-left_medium">
<lightning:input type="text" name="phone" aura:id="phone" label="Phone" required="true" placeholder ="Enter Phone" />
</div>
</div>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-2">
<lightning:input type="Number" name="accnumber" aura:id="accnumber" label="Account Number" required="true" placeholder="Enter Account Nmber" />
</div>
<div class="slds-col slds-size_1-of-2 slds-p-left_medium">
<lightning:input type="text" name="anualrevenue" aura:id="anualrevenue" label="Annual Revenue" required="true" placeholder="Enter Annual Revenue" />
</div>
</div>
<aura:if isTrue="{!v.spinner}">
<div class="exampleHolder">
<lightning:spinner alternativeText="Loading" size="medium" />
</div>
</aura:if>
</div>
<!--Modal/Popup Box Footer Starts here-->
<footer class="slds-modal__footer">
<lightning:button variant="neutral"
label="Cancel"
title="Cancel"
onclick="{! c.closeModel }"/>
<lightning:button variant="brand"
label="Save"
title="Save"
onclick="{!c.submitDetails}"/>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</aura:if>
</div>
</aura:component>
Lightning Component .JS
({
openModel: function(component, event, helper) {
component.set("v.isModalOpen", true);
},
closeModel: function(component, event, helper) {
component.set("v.isModalOpen", false);
},
submitDetails: function(component, event, helper) {
component.set("v.spinner", true);
var name = component.find("name").get("v.value");
var phone = component.find("phone").get("v.value");
var anualrevenue = component.find("anualrevenue").get("v.value");
var accountnumber = component.find("accnumber").get("v.value");
var action = component.get("c.CreateAccount");
action.setParams({ Name : name , Phone:phone, accountNuber:accountnumber,annualRevenue:anualrevenue });
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.response", response.getReturnValue());
if(response.getReturnValue() == true){
component.set("v.spinner", false);
var toastEvent = $A.get("e.force:showToast");
toastEvent.setParams({
title : 'Success',
message: 'Record has been Created Successfully',
duration:' 5000',
key: 'info_alt',
type: 'success',
mode: 'pester'
});
toastEvent.fire();
component.set("v.isModalOpen", false);
}
}
else if (state === "ERROR") {
var errors = response.getError();
if (errors) {
if (errors[0] && errors[0].message) {
console.log("Error message: " +
errors[0].message);
}
} else {
console.log("Unknown error");
}
}
});
$A.enqueueAction(action);
},
})
Output :-
