Display Contacts Using Aura and Salesforce Lightning Components

August, 09-2019

BISP

Display Contacts Using Aura and Salesforce Lightning Components

We have discussed Salesforce, Salesforce certifications the questionnaire for the certification preparations and also shown you to build a custom application using the declarative options available in Salesforce. In this blog, we will discuss the programmatic options available in Salesforce to develop your application and how to fetch data from an apex controller and display it in the lightning component.

In this blog, we are going to create a basic lighting application that will have two lightning components. Before you begin going through this post kindly make sure that you have an understanding of lightning components and how they work. So you can easily understand the concept that how we can easily extract the data and how to display the same in our lightning component.

Introduction to Display Contacts Using Aura and Salesforce 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 operations 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 that takes a single argument i.e. a list of account ids and returns a list of contacts related to all the accounts whose ids are passed as a parameter.

Create a Lightning Component

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 Lighting Controller

lightning controller

Creating a Lightning Helper

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 a try-catch that is similar to any programming language and is used to catch an exception.

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

On a Lightning Component

component aura

Lightning CSS

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.

Lighting 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

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.

Output

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.

Share: -20 -15 -14