Custom Lookup Component for Lightning

Poster 2 basic

In this post, I am focusing on the custom lookup component missing as a seeded control in lightning.

Custom Simple Lookup
Custom Simple Lookup

Prerequisites: Basic knowledge of lightning component, Javascript .

Implementation

This implementation requires the following members. The server-side interaction of the component is not included in this implementation, you can develop it yourself, based on the requirement. Comment below if you need any help on that.

  • SimpleLookup.cmp
  • SimpleLookupController.js
  • SimpleLookupHelper.js
  • SimpleLookup.css

SimpleLookup.cmp

In the above component view part, I have declared four aura attributes

  • label – display label of the component
  • fetchedRecords – list of records matched with filter criteria
  • searchText –  content of input textbox, used as filter criteria for record processing
  • selectedRecord – holds the current user selection

The Custom Lookup view splits into three sections

  • Input Container – for inserting search criteria
  • Lookup list with a container – list the matched items based on the input
  • SLDS-pill – to show the selected list item

Please see the code comments for more details.

SimpleLookupController.js

The JS methods mainly focused on the visibility (show or hide) of the view elements rather than doing complex logic.

  • onLeaveLookupPane – to hide the lookup container
  • remove – to hide the slds-pill and show the input text field
  • onInputChange – triggers on the keyup event of the input text field and displays the lookup container with the filtered data as a list by invoking “searchContent helper method.
  • onSearchInputClick – adds the standard SLDS input-focus style
  • selectedRecordRowClick triggers when a list item is selected from the lookup container and displayed the selected list item as an SLDS-pill after hiding the input container.

Please see the code comments for more details.

SimpleLookupHelper.js

The searchContent method is used for assigning sample records to fetchedRecords aura attribute. You can replace the existing sample code with functional one which can fetch the records from the apex controller on the server side.

  • add/removeClass – overridden method for adding or removing style class.
  • Show/HideElement – show or hide the HTML element based on the input

Please see the code comments for more details.

SimpleLookup.css

Custom Simple Lookup
Custom Simple Lookup

Poster 2 basic

Don’t forget to share the post if you like it & bookmark the blog for future references.

If you have any comments or doubts on this post, Please comment on the box below.

2 thoughts on “Custom Lookup Component for Lightning

  1. Nitish Bansal July 19, 2018 / 2:04 am

    This doesn’t seem to work with record edit.

    What are the code changes needed for the same ?

    Moreover, how can I support lookup filter feature in this markup ?

    Like

    • Anil Somasundaran July 19, 2018 / 3:12 am

      I couldn’t understand your point , it will work on the record edit since it is a custom component right?
      To incorporate the filters you need to add view attributes and pass it to the apex controller

      Like

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 )

w

Connecting to %s