How to create a generic Picklist in LWC

Creating a picklist for any project in LWC is pretty easy, thanks to the codes available on the internet.

But what if we have to create picklists for different fields of various objects or different fields of the same object?

Making alterations to the code again and again to achieve the same is time-consuming and inefficient.

So, here comes the solution for this problem: a Generic Picklist!

We have developed a code to handle all the dynamic values of picklists using Lightning Component Combobox and to show it on the desired page with a minute change in components.

But the lightning Combobox comes with a problem too- we can not apply the themes and CSS client wants to apply to this component.

So in this code, we have solved this problem as well. This code increases reusability with custom themes and CSS of your own choice.

Below is the code we have used to create a generic picklist in Lightning Web Component.

Let’s go step by step to understand it.

Step 1: Create a custom dropdown

The below code can be used to show a custom dropdown. In this, we have an arrow to handle dropdowns. And to show values that are needed on the component.

i)The HTML code.

HTML CODE:
cp_reusableCustomDropdownWithSearchLwc.html

ii) XML code to choose if we want it to use on another target.

XML Code:cp_reusableCustomDropdownWithSearchLwc.js-meta.xml

iii) The javascript code to handle the changes that are made by the customer on UI.

Javascript code: cp_reusableCustomDropdownWithSearchLwc.js

iv) CSS code to improve the viewing quality.

Please note that It is not necessary to implement if you don’t want to include extra classes.

CSS Code:cp_reusableCustomDropdownWithSearchLwc.css

Step 2: To create a picklist for various fields of different Objects or different fields for same object.

I have used the following code to handle the date like object name, Field name, placeholder and Values(that must be in comma-separated String).

i) HTML code to pass the values where we are calling it on the component.

HTML Code: cp_customPicklistValues.html

ii) XML code to choose the target for using this component

XML Code:cp_customPicklistValues.js-meta.xml

iii) Javascript code is used to track the values of picklist and create event.

JAVAScript Code: cp_customPicklistValues.js

iv) CSS code to improve viewing quality

CSS Code:cp_customPicklistValues.css

STEP 3: Final step

Here is the code to call the picklist component in another component. And here we will pass the value of placeholder in “placeholder”, List of options in from of string separated by comma in “optionList”, label for the picklist in “fLabel” and a message just to check if the picklist is empty or not in “emptyMsg”.

Now call the component using the below code by pasting it into another Component.

JAVASCript CODE to handle this: showPickListValue.js

Click here to check our Generic picklist

Conclusion

So, here it is, our strategic guide to creating a reusable generic picklist with a custom theme and CSS.

Try out the solution and share your experience with us. Also, stay hooked to our blogs for more interesting Salesforce development solutions. Catch you on the next one. Happy Learning!