salesforce data migration services

Learn Salesforce Lightning with Examples – Part 1 (Create Records using Lightning Components)

Learn Salesforce Lightning with Examples – Part 1 (Create Records using Lightning Components) is the first part of the series – “Learn Salesforce Lightning with Examples“.

Introducing ‘Learn Salesforce Lightning with Examples’ Series

Learn Salesforce Lightning with Examples is the series where We would share the key practical examples and experience with lightning.We are focusing on Lightning Components for now and hope we come up with great stuff later in other lightning features as well.So stay tuned and enjoy our series.

Background & Blog Contributors

Gaurav JainVinay

Gaurav Jain and I had worked together on lightning projects and We started working from the time when there was not much online material available.We decided to start a blog series to share our learning and experiments with “Lightning Lovers” hoping that they might get benefit from it.Many thanks to Gaurav for helping and being an equal contributor to this blog series.You can connect with Gaurav at twitter and check more about him here.

Pre-Requisites

Here are some pre-requisites for the blog series,Please make sure you implement those so that you are all set for implementing our examples in your developer edition org.

Using Recruiting App

Keeping in mind that our readers might be interested to practice along with us, so We decided to use Recruiting App for all the metadata reference to make sure Users need not create anything extra and just install Recruiting App by Salesforce Labs and you all good to go.You can download the app from AppExchange here.

Set up Domain Name

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.Also for more details why do you want to that,check here for release notes.

Upload BootStrap Static Resource for styling purposes

Download Bootstrap to give some styling from http://getbootstrap.com/.Upload BootStrap css  to static resource.We would refer the path of this css later in our code .

Using Developer Console

For now We are making sure that We use Developer Console for our lightning Components development and tutorials.If not worked yet on it,Check here  for the developer console tutorials.

We would also suggest you to go through this awesome Trailhead module – Lightning Components Basics so that you are familiar with Lightning Components.

Let us jump to our first part now..

Creating a Custom Lightning Component to create record

Business Case:

Adam is working as a Senior Application Developer in Universal Containers. Company wants to move their traditional (classic version )recruitment app to lighting. Adam needs to do a Proof of Concept by building a custom lighting component for creating the Candidate’s record into Salesforce.

Solution:

Adam decided to create a lightning component which would display a form with a ‘Create’ button and on click of that button ,records get saved into the salesforce system.

Before getting started,Adam makes sure that he doesn’t miss any pre-requisites mentioned above.Below are the steps,Adam takes for the creating the solution after completing the pre-requisites.

  1. Finishing all the pre-requisites.
  2. Creating Lightning Component.
  3. Creating Lightning Controller for the component.
  4. Creating Apex Class and create method.
  5. Creating an Application to host the component.
  6. Test the Application

Create Lightning Component

First thing which We are going to do is creating a lightning component so that from here,We get an idea where and what to do next.

Go to setup->Developer console, At Developer console Click on New to create lightning component and paste the below code :

[codeblocks name=’CreateCandidateRecord.cmp’]  

Create Controller for the Lightning Component

Now,since you have created a component,you would like to handle the logic at lightning level first before moving to apex side,so you need to create component controller by clicking on controller in right panel as mentioned in below image and copy paste the code below.

Dev Console

[codeblocks name=’CreateCandidateRecordController.js’] 

Create Apex class and define method to create the candidate record

Now We have written logic in such a way that Component will call lightning controller and lightning controller will invoke Method written in apex class.So copy paste the below apex class in your org.

[codeblocks name=’CreateCandidateRecord’] 

Create lightning application to host the component in the App

You need to host your component somewhere where you can show it(We would talk about various ways to host the components in later posts in series).So here we have created a Lightning App for the hosting.Create an application from Developer Console->New Lightning Application and then copy paste the below code and you are all set to test this Application.

[codeblocks name=’ManageCandidate’] 

Test the Application

Now since We are done with the codes,lets test the application.So in our case,We need to try with the URL format :

https://{Domain Name}.lightning.force.com/c/{App Name}.app

and then you would get a similar page like this :

Lightning App Screen

Fill the details and hit the “Create” button.Also make sure you fill all the details as you might get errors to fill them since we have added validations to make these fields required.

Create Page 2

 

Now you can go to the classic version and see if the record was created :

Create Page 3

You can also download the code from the github repository here.

Hope you enjoyed the blog! Stay tuned and there will be more examples to come ..