lightning-dual-listbox is used to show two side-by-side listboxes. This component can be used to show list of available options and selected options.
Recently my team got requirement where selected options should not be removed but we can select new options. Ex.. If user already selected Option1, Option2 then they should not remove these options but they add and remove other options like option3, option4.
Let us see how we can accomplish this in lightning web component.
We can use onchange event to set default values if those values are de-selected. value property will show selected values. We will set this property with default selected values.
Here is code which show toast message that you can deselect those values and then set it default selected values.
handleChange(event)
{
var selectedRows=event.detail.value;
if(this.defaultValues!=undefined && this.defaultValues!=null && this.defaultValues.length>0)
{
var items=this.defaultValues.filter(value => selectedRows.includes(value));
if(this.defaultValues.length!==items.length)
{
this.showMessage('Notification','Existing selected value(s) can not be removed','error');
this.defaultValues=[...this.defaultValues];
event.preventDefault();
return;
}
}
}Complete Code:
Test Page:
Dhanik Lal Sahni is a Salesforce Solution Architect, Independent Consultant, and the founder of SalesforceCodex.com. With nearly two decades of IT experience and extensive expertise in Salesforce architecture, he helps startups and enterprises design scalable, secure, and high-performance CRM solutions using Sales Cloud, Service Cloud, Experience Cloud, Data Cloud, Apex, Lightning Web Components (LWC), and enterprise integration patterns.
Through SalesforceCodex, he shares practical tutorials, real-world implementation guides, enterprise architecture best practices, and interview preparation resources for Salesforce Developers, Architects, and Administrators.
Learn more about his Salesforce consulting and freelance services at dhaniksahni.com.
