August, 09-2019
Display Contacts Using Aura and Salesforce Lightning Components

                        Display Contacts Using Aura and Lightning Components

In this document, I am trying to fetch data from an apex controller and display it in the lightning component. It consists of reading operation in CRUD (Create, Read and Update).
First display record on the page followed by update records.

In order to do this, the first login to Salesforce Developer Account by specifying your custom URL and login credential.

Salesforce Login

After Login, click on the setting icon and open Salesforce Developer Console.

A new window gets opened, it is a Developer Console.

Developer console

Open Developer Console and follow the Below Steps:

Developer console_1

Process 1: Fetch and Display Records

Code a lightning component that will display all the contacts related to an account.

  • Create an Apex Controller

Apex_public class


I have created an apex controller which takes a single argument i.e. a list of account ids and return a list of contacts related to all the accounts whose ids are passed as a parameter.

Create a Lightning Component

Aura componenets


I have used an aura: handler tag with attribute name - init and value - {!this} this name and value are fixed as we are going to specify a function in action which will be called automatically when the record is loaded initially.

Creating a Lightning Controller

lightning controller

Creating a Lightning Helper

lightning helper



Aura output

Process 2: Edit and Update Records

This is the second post in Lightning Tutorial, In this, I am going to update the record displayed using a lightning component and save the record.

Apex Controller

Apex public class

Another method named - Save Contact List which is taking List i.e. a list of contacts as a parameter.

In the method, I have added try-catch that are similar to any programming language and are used to catch an exception. 

In this we are trying, to update contact list using the update keyword and if it is updated successfully,.

On a Lightning Component

component aura

Lightning CSS

CSS class

In the formHide class, I have added display: none so that my element is not displayed where I have applied this CSS. 

That's all for CSS for now.

Lightning Controller

lightning controller_1

An edit contacts function is called by clicking on the edit action button in our component. So, first of all, we are getting a reference to the button using the event.getSource() function, then we are getting the value in the name attribute of that button. I'll use this name-value to hide/show the form accordingly.  After this line,  we are getting the reference to recordView Form and record edit Form respectively by using component.find() in which we have to pass the aura: id of the element whose reference we want to have.


helper js

helper js_1

helper js_2

I am getting the contact's list and then the reference to view Form and edit Form in the same way as done earlier. Then I have initialized a toast event so that I can show a success or error toast with a proper message like we have in lightning.


contact us

Thanks for reading...

We have Highly-focused study material in our online academia and it's really helpful for our candidates and professionals, our professional online salesforce training courses are a mixture of study materials, real-world scenario, use cases, and hands-on experience and we will be providing an industry project to our candidates or professionals, so that candidates can easily prepare himself for any specific role. We have recommended our experienced experts and real-time professionals for training and guidance out there, as well as they,  are sharing his industry experience with candidates. 

For more guidance please reach out to us, we can share a real-time experience.           


Thoughts on “Display Contacts Using Aura and Salesforce Lightning Components””

Leave a Reply

Your email address will not be published. Required fields are marked *