custom multiselect salesforce lightning lookup

Reusable Multi Select Custom Lookup In Salesforce Lightning Component

Lightning Component

Sharing is caring!

Welcome back guys, today in this post we are going to learn, how we can create custom multi select lookup with salesforce lightning components.

Multi-Select Lookup Component Functionality :

  • Multi Record Section (multi select lookup).
  • Re-usable.
  • Prevent duplicate record selection and more…
Output :
multiselect lookup salesforce lightning component
Component Output:
Component Blue Print :

multiselect lookup salesforce lightning component

Step 1 : Create Apex Class Controller.
Apex class [reUsableMultiSelectLookupCtrl.apxc]

Step 2 : Create Lightning Event
  • Next we create a Lightning Event bundle for communicate data(attribute values) between different components. (Child To Parent Component )
  • Events are contain attributes that can be set before the event is fired and read when the event is handled by component.

from developer console >> file >> new >> Lightning Event >> enter name >> selectedsObjectRecordEvent >> save

lightning Event [selectedsObjectRecordsEvent.evt]

Step 3 : Create Child Component For Display the Search Result List
Lightning Component [reUsableMultiSelectLookupResult.cmp] 

client side JavaScript Controller :[reUsableMultiSelectLookupResultController.js]

Step 4 : Create Parent Component
Lightning Component [reUsableMultiSelectLookup.cmp]

client side JavaScript Controller :[reUsableMultiSelectLookupController.js]

client side JavaScript Helper :[reUsableMultiSelectLookupHelper.js]

Component CSS :[reUsableMultiSelectLookup.CSS]

TestApp.app

This is a dynamic Re-Usable Lightning Component you have need to pass the objectAPIName , IconName, selected Records List and Field Label  Attributes when use this Custom Multi-select Lookup component.

Check Also : Single Selection Custom Lookup Component in Lightning Component 
Custom Salesforce Lightning Multi select lookup Output : 

multiselect lookup salesforce lightning component

 

Related Resources :

Custom Single Lookup Lightning Component

https://www.lightningdesignsystem.com/icons/#standard

Salesforce Lightning Design System Lookup

Lightning Component Events

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box  🙂

Sharing is caring!

(Visited 2,093 times, 19 visits today)

9 comments

  • Hi

    Can this component be used in lightning for outlook?. i have tried using other lightning components in lightning for outlook to be able to customize the email pane, but not this.

  • HI ,

    I am getting bellow error when i use the above code how can solve that. Please help me.

    This page has an error. You might just need to refresh it. Unable to find ‘fetchLookUpValues’ on ‘compound://veeru.reUsableMultiSelectLookup’. Failing descriptor: {markup://veeru:reUsableMultiSelectLookup}

  • I am getting this error. Could you please provide me with this event.

    Failed to save reUsableMultiSelectLookup.cmp: No EVENT named markup://c:post_selectedsObjectRecordsEvent found

  • On clicking the drop down value,

    This page has an error. You might just need to refresh it. Action failed: c:reUsableMultiSelectLookup$controller$handleComponentEvent [Cannot read property ‘Push’ of undefined] Failing descriptor: {c:reUsableMultiSelectLookup$controller$handleComponentEvent}

    Any help?

     

    Thanks

    Heamnth

Leave a Reply