Use case:
Let's say you are in need of a multi-select picklist for your lightning application/component development. The available in-house options are to use 'lightning:dualListbox' or some external JS libraries. The problem with 'lightning:dualListbox' is, it takes lots of space on UI, and still, you need to write code to make it work. And you know we are writing code anyway, so why not we should try our own multi-select picklist component which will make it more attractive, takes less space and almost the same amount of code.
Jugar (Solution) :
Here is what we are going to do. We will use 'lightning: select' standard lightning component to hold the list of values like single select value and 'slds-pill' to list all the selected values just below to it.
Below is the quick demo of it.
Quick Demo:
Components and Controllers:
LightningDemoApp.App
It’s a lightning app, just to use/hold our multi-select component by passing the available options.
It’s a lightning app, just to use/hold our multi-select component by passing the available options.
Lightning_MultiSelect.cmp
Lightning_MultiSelectController.js and Lightning_MultiSelectHelper.js
Comments
Post a Comment