How to Create Multi-Select Pick-list Field Using Lightning Web Component

This blog will help you learn about creating Multi-Select pick-list field using Lightning Web Component thus allowing users to select multiple pick-list values in any standard Salesforce object field.

To implement Multi-Select pick-list we need a very basic UI with two standard lightning web component:

lightning-combo box
lightning-pill

To start with, we will use lightning-combo box to show all pick-list values and can be further carried out through lightning-pill that will help to show selected pick-list values.

Creating basic HTML file:

Multi Select Picklistcmp.html file

A lightning-pill is used to display a label which contains multi-picklist values; there are contained in links and is also removable as well.

A lightning-combo box is used to select only one option from the pick-list with the use of on change event handler to capture whatever user selects.

Following is the logic used in JavaScript:

Multi Select Picklistcmp.js File

handleChange : This method is handling the change on pick-list field. If user is selecting any new value which is not selected before then we are adding that value to allValues list.

handleRemove: This method is removing selected values from all Values using basic methods of Javascript

Multi Select Picklist Output Interface.

The above message shows Multi-picklist values that enables user to select upon different options in a drop-down field.

We hope that you find this blog helpful, if you still have queries, don’t hesitate to contact us at salesforce@greytrix.com.

About Us
Greytrix – a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.

Greytrix has some unique solutions for Cloud CRM such as Salesforce Sage integration for Sage X3, Sage 100 and Sage 300 (Sage Accpac). We also offer best-in-class Cloud CRM Salesforce customization and development services along with services such as Salesforce Data Migration, Integrated App development, Custom App development and Technical Support business partners and end users.
Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU™ integration for Sage ERP – Salesforce is a 5-star rated app listed on Salesforce AppExchange.

The GUMU™ Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.

For more information on our Salesforce products and services, contact us at salesforce@greytrix.com. We will be glad to assist you.

Related Posts