How to create custom Lookup in Lightning Component

Hi guys,

Its time to use Lightning Component Framework. This framework is used to build SPA. SPA is not a massage therapy as you know. 🙂 Here SPA stands for “Single Page Application”. In this article you will learn, how to create custom lookup in lightning component? When I was building a lightning application, I was facing so much problem to build application with the lookup. I’ll not let you face such problem with this. Actually lightning lookup has completely different UI from standard lookup. It looks like auto-complete dropdown box.

Let’s start to work with lightning lookup. First you have to start to create lightning component where you want to use lightning lookup. I have created custom component where I want to use lookup named as “ContactComponent.cmp”.

LookupComponent.cmp :-

In the above code snippet, I have created “ContactComponent.cmp” lightning component. Where “Lightning_ContactComponentController” apex controller is used for interacting with salesforce database. In this page, I used “SobjectLookup” component to create custom lookup for lightning. Now we have to create “LookupComponentCtrl” apex controller if you need this.

LookupComponentCtrl :-

Now we have to create lightning controller for ContactComponent.cmp component. If you want to do something with lightning JavaScript controller then you need to create this otherwise you don’t need to create this for lookup.

LookupComponentController.js :-

We have to create SobjectLookup.cmp, which will be used in LookupComponent.cmp to reuse the lookup component code for multiple lookup used in single page. In this component, we are using RequireJS and some css to support custom lookup component and better look and feel. If you want to download RequireJS click here and if you want to download “Lgt_InputLookup” zip folder click here and add these files in static resource.

SobjectLookup.cmp :-

Create below apex controller to use it in SobjectLookup.cmp component. “@AuraEnabled” is used for enable method to access with lightning.

SobjectLookupController :-

Now create JavaScript controller for SobjectLookup.cmp component. Below is the code to use this with SobjectLookup.cmp component.

SobjectLookupController.js :-

Now create JavaScript helper for SobjectLookupController.js JavaScript controller. Below is the code to use this with SobjectLookupController.js JavaScript controller.

SobjectLookupHelper.js :-

Now its time to create SobjectLookupRenderer.js JavaScript renderer. This is used, when field value changed, rerender function will be called.

SobjectLookupRenderer.js :-

0 Comments

Leave a Reply

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2020 Forcetalks. All Right Reserved.

Log in with your credentials

or    

Forgot your details?