In earlier post “Salesforce: Building Responsive Tables with Lightning” we discovered how to build a data table in a Lightning component based on Account object, embedding it in a layout that was responsive to every type of device. Sometimes it is very helpful not only to display data but also to filter information and refine the results. In this article we are going to add an inner Lightning component that works in conjunction with the AccountList component and do the magic.

The Lightning framework uses event-driven programming. You write handlers that respond to interface events as they occur. The events may or may not have been triggered by user interaction. In the Lightning Component 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.

Events are declared by the aura:event tag in a .evt resource, and they can have one of two types: component or application. In our scenario we are going to use Application Events. They follow a traditional publish-subscribe model. An application event is fired from an instance of a component. All components that provide a handler for the event are notified.

In the following section all the development steps are defined to reach our goal, let’s start opening the Developer Console from Salesforce org.

Create the Aura Event

First step require us to create a new Lightning Event following the path: File/New/Lightning Event (name: “SearchKeyChange”):

Create the “SearchBarCmp” Component

The second step is the creation of the new component that holds the value to be searched in our data table. Let’s type the following code in the Component section on the left side of the Developer Console:

Now fill the Controller section with the following snippet of code:

Now fill the Style section with the following snippet of code:

Modify “AccountListCtrl” apex controller

In this step we are going to add the “findByName” function to our apex controller to filter the data table by the keyword typed by the user.

The function executes a query on the records displayed using the LIKE operator. Note that this operator can be used only to filter string fields, in fact in the example showed above WHERE condition contains only AccountNumber, Site, AccountSource fields.

Modify “AccountListCmp” component

Add the following line at the beginning of the AccountListCmp component to specify the handler of our event:

The action attribute of <aura:handler> sets the client-side controller action to handle the event. The event attribute specifies the event being handled. The format is namespace:eventName. In this example, when the event is fired, the searchKeyChange client-side controller action is called.

Now add the following snippet of code after the table to define the SearchBar inner component that enables us to filter our data:

It’s time to add the searchKeyChange function to the “AccountListCmpController.js” file:

Finally add the findByName function to the “AccountListCmpHelper.js” file:

The job is done, our component will look like this:

Print Component

Support us with a small donation:

  • LTC Address: La5f6W1rPr5VHFGCrCmPJ3sSa2AiwKZJbU
  • BTC Address: 1FG1j42MUze8jiW7JbgNaUMZxZeu7M1b4f
  • Ripple Address: rPVMhWBsfF9iMXYj3aAzJVkPDTFNSyWdKy     Tag: 562614972
  • ETH Address: 0x0940958167ca9cbd6409999957a011be7907d904
(Visited 8,341 times, 1 visits today)
Emanuele Campisi
Emanuele Campisi

Emanuele has more than 5 years of consulting experience, primarily focused on CRM platforms and mobile apps he is convinced that “each new piece of information might yield an insight that helps solve a problem or create a breakthrough”.

3 Comments

Leave a Comment