Advance Lightning PickList

Custom Picklist component with search feature and both single-select and multi-select Picklist, recommended for picklist with many values like Country, sObject, Fields, Region, State, etc.

Deploy to Salesforce

https://www.screencast.com/t/XuBGqkQJm

Features

1. Support Single Select

Custom Picklist

2. Support Multiselect

custom multiselect Picklist

3. Searching
4. HelpText

Usage

AttributeTypeDescription
labelStringField Label
valueStringSelected Value, format will be A;B;C in multiselect
optionsListListList of Object with 2 attributes label and value, eg. [{“label”:”Agriculture”, “value”:”Agriculture”},{“label”:”Banking”, “value”:”Banking”}]
requiredBooleanShow required * on UI, you have to add validation separately.
helptextStringHelp text to be displayed
multiselectBooleanMake this a multi-select picklist
showLabelBooleanMake label visible on UI

Single Select

<c:AdvancePicklist helptext="Please fill in this field as this is required field."
   label="{!v.ObjectType.Account.Industry.label}" 
   value="{!v.record.Industry}"
   optionsList="{!v.ObjectType.Account.Industry.picklistOptions}"
></c:AdvancePicklist>

Multi Select

<c:AdvancePicklist required="true"
   helptext="Please fill in this field as this is a required field."
   label="{!v.ObjectType.Account.Industry.label}" 
   value="{!v.record.Industry}"
   multiselect="true"
   optionsList="{!v.ObjectType.Account.Industry.picklistOptions}"
></c:AdvancePicklist>

Methods

To clear the value in the picklist, give the Picklist component an aura:id, say “advPicklistId”

<c:AdvancePicklist  aura:id="advPicklistId"
   label="{!v.ObjectType.Account.Industry.label}" 
   value="{!v.record.Industry}"
   optionsList="{!v.ObjectType.Account.Industry.picklistOptions}"
 ></c:AdvancePicklist>

After that in the parent component controller, execute this command and it will reset the picklist.

let childPicklistCmp = component.find("advPicklistId");
if (childPicklistCmp) {
  let auraMethodResult = childCmp.clearPicklist();
}

Here is the link to Git Repository https://github.com/abhimanyud3dx/Advance-PickList/

Was this post useful? If yes then please share.



Leave a Comment

All fields marked with an asterisk (*) are required


shares