Salesforce Lightning: Create Records into Salesforce Object.

Salesforce Lightning: Create Record

Pre-Requisites

1.Set up Domain Name

Go to --> Setup --> Administer --> Domain Management --> My Domain

When you enable My Domain, references and links to Lightning resources are in the format https://<myDomain>.lightning.force.com.Check here –How To Set Up Domain Name.

My registered domain is myexpanses.

MyName space is XX_MSG1

2.Upload Bootstrap Static Resource for styling purposes

Download Bootstrap to give some styling from http://getbootstrap.com/.Upload Bootstrap CSS  to static resource and upload into static resources. Name it as "bootstrap"

3.Using Developer Console

Developer console gave us the mechanism to build the lightning apps in the salesforce.

In this post, I am going to demonstrate how we can create student record using the lightning app.

Step1 : Create student object - APINAME : Student__c

Step2: Below is the components needs to be created.

Creating Apex Class and create method.

Creating Lightning Component.

Creating Lightning Controller for the component.

Creating an Application to host the component.

Test the Application

Creating Apex Class and create method :

/************************************************************

  Name: CreateStudentRecord Type: Apex Class   Source : flexandsalesforce.blogspot.com ***********************************************************/public with sharing class CreateStudentRecord {    @AuraEnabled    public static void createRecord (XX_MSG1__Student__c objstudent){                try{            System.debug('****objstudent'+objstudent);                        if(objstudent!= null){                insert objstudent;            }                    } catch (Exception ex){                    }            }    }

Create Lightning Component:

1.     Click File | New | Lightning Component.

2.     Enter form for the Name field in the New Lightning Bundle popup window. This creates a new component, StudentData.cmp.

3.     In the source code editor, enter this code.

 

<aura:component controller="CreateStudentRecord"                       implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,

                                                                force:hasRecordId,forceCommunity:availableForAllPageTypes"

                                                                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"/>

<!-- Define Attribute-->

    <aura:attribute name="objStudent" type="Student__c" default="{'sobjectType':'XX_MSG1__Student__c',

                         'XX_MSG1__Student_Name__c': '',

                         'XX_MSG1__Email__c': '',

                         'XX_MSG1__Phone__c': ''

                       }"/>

    <div class="container-fluid">

        <h3>Please Enter The Candidate Information</h3>

        <div class="form-group">

            <label>Student Name</label>

            <ui:inputText class="form-control" value="{!v. objStudent.XX_MSG1__Student_Name__c}"/>

        </div>

        <div class="form-group">

            <label>Email</label>

            <ui:inputText class="form-control" value="{!v. objStudent.XX_MSG1__Email__c}"/>

        </div>

        <div class="form-group">

            <label>Phone</label>

            <ui:inputText class="form-control" value="{!v. objStudent.XX_MSG1__Phone__c}"/>

        </div>

    </div>

    <div class="col-md-4 text-center">

        <ui:button class="btn btn-default" press="{!c.create}">Create</ui:button>

  </div>

</aura:component>

Creating Lightning Controller for the component.

Create controller for the component by selecting the highlighted tab from the below panel. This is the main part the lightning development as it used as the middle layer between lightning UI and APEX.

({

                create : function(component, event, helper) {

                                console.log('Enter to create');

        //getting the Student information

        var student = component.get("v.objStudent");

       if($A.util.isEmpty(student.XX_MSG1__Student_Name__c) || $A.util.isUndefined(student.XX_MSG1__Student_Name__c)){

            alert('Name is Required');

            return;

        }           

        if($A.util.isEmpty(student.XX_MSG1__Email__c) || $A.util.isUndefined(student.XX_MSG1__Email__c)){

            alert('Email is Rqquired');

            return;

        }

if($A.util.isEmpty(student.XX_MSG1__Phone__c)|| $A.util.isUndefined(student.XX_MSG1__Phone__c)){

            alert('Phone is Required');

            return;

        }

        //Calling the Apex Function

        var action = component.get("c.createRecord");

        //Setting the Apex Parameter

        action.setParams({

            objstudent : student

        });

        //Setting the Callback

        action.setCallback(this,function(a){

            //get the response state

            var state = a.getState();

            //check if result is successfull

            if(state == "SUCCESS"){

                alert('Record is Created Successfully');

            } else if(state == "ERROR"){

                alert('Error in calling server side action');

            }

        });

        //adds the server-side action to the queue       

        $A.enqueueAction(action);

                }

})

Creating an Application to host the component :

Copy paste the below code :

<aura:application >

    <aura:dependency resource="c:StudentData" />

    <c:StudentData />

</aura:application>

In above image, you can see preview button in the right side panel to execute the application . Please click on the preview button to start.

Above is the output. Now you can enter details and create records into Student object using lightning components.

 

Thank you.