Isn’t it tiring to scroll all the way and still not be able to find what you want to? This smart solution allows you to search what you want from hundreds of values in the Lightning Web Component’s generic custom dropdown menu.
How to access this feature?
- To access this functionality, all you need to do is to pass these- All the Options from your picklist, Value, and finally ‘Label’ of the selected value.
- Add the names of all the objects in the Controller, send Options, selected Value, and selected Label in the component, then you will be able to access the search feature.
Why do we need this functionality?
- You need to have a Generic custom dropdown component with search functionality as we do not have search functionality in the standard picklist.
- As you know, whenever we make a standard UI in the Salesforce lightning component, we have to manually find different values. But with this component, we can easily replace any dropdown.
- If you run out of time, this solution is the best for you. It would help you to save time to focus on other important aspects of your business.
Click here for the Live Demo
Code:
To have this feature in Lighting Component all you need to do is to create a Lightning Web Component named as “reusableCustomDropdownWithSearchLwc”.
Here are the respective HTML and JS file for the component.Code:
reusableCustomDropdownWithSearchLwc.html
reusableCustomDropdownWithSearchLwc.js
How to use:
To use this feature, we need to invoke the above component as below in the lightning app.
ReusableCustomDropdownWithSearch.app
ReusableCustomDropdownWithSearchController.js
ReusableCustomDropdownWithSearchHelper.js
ReusableCustomDropdownAppController
Conclusion
This smart solution allows you to easily access and find the value you are looking for from the list. Try this out for your business and see how it helps. Don’t forget to share your experiences with us.
Till then, Happy Learning!
