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

https://www.lightningdesignsystem.com/components/overview/

Data Table

https://www.lightningdesignsystem.com/components/data-tables/

SEARCH AND DISPLAY RECORDS USING LIGHTNING COMPONENT

searchPage.PNG

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.

searchStaffController.apxc

public class searchStaffController {
    @AuraEnabled
    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) {
            returnList.add(staff);
        }
        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.
rightPalllate.PNG
In the below code, we have created a function “Search” which search the staff record:
searchStaffController.js
({
Search: function(component, event, helper) {

component.set("v.isNew",false);
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.isNew",false);
component.set("v.isView",true);
component.set("v.objId",event.target.id); 
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" : event.target.id});
appEvent.fire();

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

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

}

})
searchStaffHelper.js
({
 SearchHelper: function(component, event) {
 var action = component.get("c.fetchStaff");
 action.setParams({
 '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);
 }
 
 });
 $A.enqueueAction(action);
 
 },
})

 

Event: 

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.

staffViewCompEvent.evt

 

 


Link: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_component_create.htm

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:

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_add_cmp_lex.htm

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…

Author:

Ajomon Joseph AJOMON JOSEPH
Senior Salesforce Architect
In Connect me on LinkedIn
twitter Follow me on Twitter @apexcoder
blogger Subscribe to my blog https://apexcoder.com
email Email me ajomon@apexcoder.com

  

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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