Create Records Using Lightning Components
In this post, we will focus on how to create records of any SObject Type(SObject can be Standard and Custom) using Lightning Component.
Lightning Component:
<aura:component controller="CreateAnAccount"
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,
force:hasRecordId,forceCommunity:availableForAllPageTypes"
access="global" >
<ltng:require styles="/resource/bootstrap/css/bootstrap.min.css"
scripts="/resource/bootstrap/js/jquery.js,/resource/bootstrap/js/bootstrap.min.js"/>
<aura:attribute name="account" type="Account" default="{'sobjectType': 'Account',
'Name': '',
'AccountNumber': '',
'AnnualRevenue': '',
'AUM__c': ''
}"/>
<lightning:card iconName="standard:account" title="{!v.account.Name}" >
<div class="slds-form slds-form_compound">
<fieldset class="slds-form-element">
<div class="slds-form-element__group">
<div class="slds-form-element__row">
<div class="slds-form-element slds-size_1-of-2">
<label>Name</label>
<ui:inputText class="form-control" value="{!v.account.Name}"/>
</div>
<div class="slds-form-element slds-size_1-of-2">
<label>Account Number</label>
<ui:inputText class="form-control" value="{!v.account.AccountNumber}"/>
</div>
</div>
</div>
</fieldset>
<fieldset class="slds-form-element">
<div class="slds-form-element__group">
<div class="slds-form-element__row">
<div class="slds-form-element slds-size_1-of-2">
<label>Annual Revenue</label>
<ui:inputText class="form-control" value="{!v.account.AnnualRevenue}"/>
</div>
<div class="slds-form-element slds-size_1-of-2">
<label>AUM</label>
<ui:inputText class="form-control" value="{!v.account.AUM__c}"/>
</div>
</div>
</div>
</fieldset>
<div class="col-md-4 text-center">
<ui:button class="btn btn-default" press="{!c.create}">Create</ui:button>
</div>
</div>
</lightning:card>
</aura:component>
Controller:
({
create : function(component, event, helper) {
var account = component.get("v.account");
if($A.util.isEmpty(account.Name) || $A.util.isUndefined(account.Name)){
alert('Name is Required');
return;
}
if($A.util.isEmpty(account.AccountNumber) || $A.util.isUndefined(account.AccountNumber)){
alert('Account Number is Rqquired');
return;
}
if($A.util.isEmpty(account.AnnualRevenue) || $A.util.isUndefined(account.AnnualRevenue)){
alert('Annual Revenue is Required');
return;
}
if($A.util.isEmpty(account.AUM__c) || $A.util.isUndefined(account.AUM__c)){
alert('AUM is Required');
return;
}
var action = component.get("c.createRecord");
action.setParams({
account : account
});
action.setCallback(this,function(a){
var state = a.getState();
if(state == "SUCCESS"){
var newCandidate = {'sobjectType': 'Account',
'Name': '',
'AccountNumber': '',
'AnnualRevenue': '',
'AUM__c': ''
};
component.set("v.account",newCandidate);
alert('Record is Created Successfully');
} else if(state == "ERROR"){
alert('Error in calling server side action');
}
});
$A.enqueueAction(action);
}
})
Apex Controller:
public class CreateAnAccount {
@AuraEnabled
public static void createRecord (Account account){
try{
System.debug('CreateAnAccount::createRecord::candidate'+account);
if(account != null){
insert account;
}
} catch (Exception ex){
}
}
}
OutCome:
Lightning Component:
<aura:component controller="CreateAnAccount"
implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,
force:hasRecordId,forceCommunity:availableForAllPageTypes"
access="global" >
<ltng:require styles="/resource/bootstrap/css/bootstrap.min.css"
scripts="/resource/bootstrap/js/jquery.js,/resource/bootstrap/js/bootstrap.min.js"/>
<aura:attribute name="account" type="Account" default="{'sobjectType': 'Account',
'Name': '',
'AccountNumber': '',
'AnnualRevenue': '',
'AUM__c': ''
}"/>
<lightning:card iconName="standard:account" title="{!v.account.Name}" >
<div class="slds-form slds-form_compound">
<fieldset class="slds-form-element">
<div class="slds-form-element__group">
<div class="slds-form-element__row">
<div class="slds-form-element slds-size_1-of-2">
<label>Name</label>
<ui:inputText class="form-control" value="{!v.account.Name}"/>
</div>
<div class="slds-form-element slds-size_1-of-2">
<label>Account Number</label>
<ui:inputText class="form-control" value="{!v.account.AccountNumber}"/>
</div>
</div>
</div>
</fieldset>
<fieldset class="slds-form-element">
<div class="slds-form-element__group">
<div class="slds-form-element__row">
<div class="slds-form-element slds-size_1-of-2">
<label>Annual Revenue</label>
<ui:inputText class="form-control" value="{!v.account.AnnualRevenue}"/>
</div>
<div class="slds-form-element slds-size_1-of-2">
<label>AUM</label>
<ui:inputText class="form-control" value="{!v.account.AUM__c}"/>
</div>
</div>
</div>
</fieldset>
<div class="col-md-4 text-center">
<ui:button class="btn btn-default" press="{!c.create}">Create</ui:button>
</div>
</div>
</lightning:card>
</aura:component>
Controller:
({
create : function(component, event, helper) {
var account = component.get("v.account");
if($A.util.isEmpty(account.Name) || $A.util.isUndefined(account.Name)){
alert('Name is Required');
return;
}
if($A.util.isEmpty(account.AccountNumber) || $A.util.isUndefined(account.AccountNumber)){
alert('Account Number is Rqquired');
return;
}
if($A.util.isEmpty(account.AnnualRevenue) || $A.util.isUndefined(account.AnnualRevenue)){
alert('Annual Revenue is Required');
return;
}
if($A.util.isEmpty(account.AUM__c) || $A.util.isUndefined(account.AUM__c)){
alert('AUM is Required');
return;
}
var action = component.get("c.createRecord");
action.setParams({
account : account
});
action.setCallback(this,function(a){
var state = a.getState();
if(state == "SUCCESS"){
var newCandidate = {'sobjectType': 'Account',
'Name': '',
'AccountNumber': '',
'AnnualRevenue': '',
'AUM__c': ''
};
component.set("v.account",newCandidate);
alert('Record is Created Successfully');
} else if(state == "ERROR"){
alert('Error in calling server side action');
}
});
$A.enqueueAction(action);
}
})
Apex Controller:
public class CreateAnAccount {
@AuraEnabled
public static void createRecord (Account account){
try{
System.debug('CreateAnAccount::createRecord::candidate'+account);
if(account != null){
insert account;
}
} catch (Exception ex){
}
}
}
OutCome:
If you click on CREATE button a New Record will be created on that particular SObject like below,
Comments
Post a Comment