Basics of Lightning Components

By: Ankita Rustagi

As you might already know, the recent big change in Salesforce is the introduction to lightning components. As technology rapidly changes, Salesforce strives to stay ahead and continues to take advantage of cutting edge innovations in web technology. 

Lightning framework allows you to build responsive applications with a much better user interface that people love to interact with. Lightning components give you a client-server framework that makes development faster and is compatible for both web as well as Salesforce 1 Mobile application.

We will be discussing the basics of Lightning components in this post and how you can make a lightning component fetch and display data from the server.
A salesforce lightning component consists of 4 important parts:-
1. Component – The only required resource in a bundle. Each bundle contains only one component.
2. Controller – Client-side controller method to handle events in the component.
3. Helper – Javascript functions that can be called from any javascript code in a component’s bundle.
4. Apex Controller – Apex methods that are used to store and fetch data from salesforce.
While the first three work on the client side, the last one works on the server side.

Use case: Let’s try creating a lightning component bundle that will fetch contact records from salesforce and display their ID and Name. For this, let’s create the following items step by step in developer console.

Lightning Application: We base our component in application page to preview it. In developer console, go to File> New> Lightning applications. The name of the lightning component placed is “<c:AllContactComp />”.

AllContacts.app


Lightning component: In developer console, go to File> New> Lightning components. Controller is the apex class used, attribute “contactRows” is used to store records fetched from salesforce. We are calling doInit method of client-side controller. “<aura:iteration>” tag is used to iterate over fetched records and display, here in table format as table html is used.

AllContactsComp.cmp
Javascript controller: It is calling helper function “getAllContacts”.

AllContactsCompController.js

Helper: This function is calling “get10COntacts” method of apex class and also receiving records in aura attribute ”contactRows“.

AllContactsCompHelper.js
Apex class: Here apex method is querying over contact object for values of fields ID and Name.

ContactAura
OutPut: Once all these different items are created, we can preview the component by clicking the “Preview” button on aura application. And here we can see a list of contacts. Hurray!