Lightning Series 1 – Building a Simple Lightning App to Search and list Records

Let’s start searching and listing records through lightning components. We used to create tables using pageBlockTable in visualforce pages. In lightning, we either use HTML tables or inbuilt component tags like (lightning:datatable) to display the data in rows and columns format. Data tables are an enhanced version of an HTML table and are used to display tabular data. Here in this example, we use html table to display the data which enhance the user interface and speed up the searching and retrieve the relevant data. We are using SLDS library with HTML tags to support the CSS styles provided by Salesforce.

SLDS Library

Data Table



Here is the order of execution of a lightning component:

Lightning Component invokes JSController, which further invokes the APEX Class. The Lightning Component can’t directly communicate with the APEX Class. It has to be always invoked via JSController.

How Lightning Component communicates with controllers or vice versa ?

The syntax “v.” is used to get and set the value of the Lightning Component variable from JSController.

“c.” is used to invoke controller methods or access variables. If “c.” is used on the Lightning Component, this means we are accessing JSContoller variables/methods. If “c.” is used in the JSController, then we are accessing APEX Class variables/methods.

Building Search and List Component

Let’s build a search and list Lighting Component. We need to create below six items to build this search functionality:

  1. Apex Class
  2. Lightning Component
  3. JS Controller
  4. Event
  5. Lighting Tab
  6. Lightning App

Apex Class

Below apex class returns the list of staff based on the name entered on the search box displayed on the component. @AuraEnabled enables you to access this method in lightning component.


public class searchStaffController {
    public static List  fetchStaff(String searchKeyWord) {
        String searchKey = searchKeyWord + '%';
        List  returnList = new List  ();
        List  lstOfStaff = [select Id, Name,First_Name__c, Middle_Name__c, Last_Name__c,Phone__c,Email__c,Status__c from Staff__c where First_Name__c LIKE: searchKey OR Last_Name__c LIKE: searchKey];
        System.debug('Staff **** ' + lstOfStaff);
        for (Staff__c staff: lstOfStaff) {
        return returnList;

Lightning Component:

Lightning Component acts like a visualforce page which displays all the components required to get inputs from user and display the output. This component contains search box, buttons , and data tables to display the relevant records.

There are some steps we need to follow before creating a lightning component. The Developer Console is a convenient, built-in tool we can use to create new and edit existing Lightning components and other bundles.

  1. Enable My domain.
  2. Open the Developer Console.
    Select Developer Console from the Your Name or the quick access menu (Setup gear icon).
    1. Open the New Lightning Bundle panel for a Lightning component.
      Select File | New | Lightning Component.
    2. Name the component SearchStaff.
    3. Click Submit to create the component
    4. Inside the code window, use the below code and we will discuss about this code in detail:

Please click here to view the lightning component code: searchStaff.cmp

JS Controller:

This controller is client based java script controller which invokes the actions driven by component and further invokes apex class ‘s method to search staff records. In the below code, we have three parameters like component, event, helper which stores the information of component variables, event and associated apex class method info.

This is a client-side controller handles events within a component. It’s a JavaScript resource that defines the functions for all of the component’s actions.
Please follow the steps below to create JS controller:
1) In the developer console, we need to open the staff component.
2) we can simply press Ctrl + Shift + 2 or double click on the “CONTROLLLER” on the right pallate.
In the below code, we have created a function “Search” which search the staff record:
Search: function(component, event, helper) {

var searchKeyFld = component.find("searchId");
var srcValue = searchKeyFld.get("v.value");
if (srcValue == '' || srcValue == null) {
// display error message if input value is blank or null
searchKeyFld.set("v.errors", [{
message: "Enter Search Keyword."
} else {
searchKeyFld.set("v.errors", null);
// call helper method
helper.SearchHelper(component, event);
navigateToStaff : function(component, event, helper) { 

component.set("v.headerText","My Staff");

// Get the application event by using the
// e.. syntax
var appEvent = $A.get("e.c:StaffViewCompEvent");
appEvent.setParams({"recordId" :});;

} ,
createNew : function(component){ 
component.set("v.headerText","New Staff");

searchShow : function(component){ 
component.set("v.headerText","Search Staff");


 SearchHelper: function(component, event) {
 var action = component.get("c.fetchStaff");
 'searchKeyWord': component.get("v.searchKeyword")
 action.setCallback(this, function(response) {
 var state = response.getState();
 if (state === "SUCCESS") {
 var storeResponse = response.getReturnValue();
 // if storeResponse size is 0 ,display no record found message on screen.
 if (storeResponse.length == 0) {
 component.set("v.infoMessage", true);
 } else {
 component.set("v.infoMessage", false);
 // set numberOfRecord attribute value with length of return value from server
 component.set("v.numberOfRecord", storeResponse.length);
 // set searchResult list with return value from server.
 component.set("v.searchResult", storeResponse);


In the Lightning framework, events are fired from JavaScript controller actions. Events can contain attributes that can be set before the event is fired and read when the event is handled. This event named “StaffViewCompEvent” helps to navigate to the staff page when clicked on any staff in the results.





Lightning Tab

Tab helps to display the component to create a record using component. In order to create a lightning tab. Please follow the below instruction:

The component must include below markup:- (we have already done this)

Here is the link to create lightning tab step by step:

NOTE: We need to choose the lightning component based on the name which we have created in this blog.

Lightning App

Let’s first create an Lightning app to store the tabs which we will use to plug lighting component:

In the Lightning experience, click on setup > Apps > App Manager > Click on New Lighting App. On the page “Select Items” , we need to select our created lightning component created in this blog.

In this blog, we have described the lighting components and code to search and display the data. The component code also contains the reference of other components which we will discuss in our next series like viewing and editing the records etc.

To be continued…


Senior Salesforce Architect
In Connect me on LinkedIn
twitter Follow me on Twitter @apexcoder
blogger Subscribe to my blog
email Email me

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s