Lightning Series 2 – Building Simple Lightning App to insert a record

Salesforce Lightning is a component-based framework for application development. A Developer can build responsive applications for any device using lightning which include an out-of-the-box set of components, event-driven architecture, and a framework optimized for performance.

The Lightning Component framework is a UI framework for developing dynamic web apps for mobile and desktop devices. It uses JavaScript on the client side and Apex on the server side.

Let’s find out how we can build an interface to insert record to database on Lighting.

INSERT RECORD USING LIGHTNING COMPONENT

createstafflightning

We need to create below three elements to build the complete functionality:

Apex Class
Lightning Component
JS controller

Apex Class:

In the above code, we have used @AuraEnabled annotation which enables client- and server-side access to an Apex controller method. Providing this annotation makes your methods available to your Lightning components.

 public with sharing class CreateStaffRecord {
    
/**
* Create a new staff Record
* @param Staff__c staff  staff record to be inserted
*/
    @AuraEnabled
    public static Staff__c createRecord(Staff__c staff){
        try{
            insert staff;
            
        }catch(DMLException e){
            throw new AuraHandledException(e.getDMLMessage(0)); 
        }catch(Exception e){
            throw new AuraHandledException(e.getMessage()); 
        }
        return staff;
    }

Lightning Component:

Let’s hit on the ground and create a component to insert a new record for Staff. There are some steps we need to follow before creating a lightning component. The Developer Console is a convenient, built-in tool we can use to create new and edit existing Lightning components and other bundles.

Enable My domain.
Open the Developer Console.
Select Developer Console from the Your Name or the quick access menu ().
1. Open the New Lightning Bundle panel for a Lightning component.
  Select File | New | Lightning Component.
2. Name the component CreateStaffRecord.
3. Click Submit to create the component
4. Inside the code window, use the below code and we will discuss about this code in detail:

Please click here to view the code:

In the above code, we have used below tags and the explanation is written for each of these tags:

Links:

({

create : function(component, event, helper) {
//getting the staff information
var staff = component.get(“v.staff”);

//Make field required from front end (Not from DB)
if(staff.Last_Name__c==”){
alert(‘Missing Last name’);
return false;
}

//Calling the Apex Function
var action = component.get(“c.createRecord”);

//Setting the Apex Parameter
action.setParams({
staff : staff
});

//Setting the Callback
action.setCallback(this,function(response){
//get the response state
var state = response.getState();
//check if result is successfull
if(state == “SUCCESS”){
//Reset Form
var newstaff = {‘sobjectType’: ‘staff__c’,’First_Name__c’: ”,
‘Last_Name__c’: ”,’Email__c’: ”,’Phone__c’: ”,’Start_Date__c’:”
};
//Resetting the Values in the form
component.set(“v.staff”,newstaff);

alert(‘Record is Created Sucessfully’);

var urlEvent = $A.get(“e.force:navigateToURL”);
urlEvent.setParams({
“url”:”/lightning/o/Staff__c/list?filterName=Recent&0.source=alohaHeader”
});
console.log(urlEvent);
urlEvent.fire();

} else if(state == “ERROR”){
//errors coming from DB thrown by controler catch blocl
let errors = response.getError();
let message;
// Retrieve the error message sent by the server
if (errors && Array.isArray(errors) && errors.length > 0) {
message = errors[0].message;
}

alert(message);
}
});
//adds the server-side action to the queue
$A.enqueueAction(action);

}
})

Author: