Two Columns Multi-Select Picklist Lightning Component


Note : From API Version 41.0 and later you can use lightning:dualListBox for the same.
for more information refer Lightning component developer guide

Two Columns multi-select is one of the frequently required functionality in web development. MultiselectPicklist is a Lightning Component developed for the same. It can be used easily in lightning components as well as in visualforce pages.

Component Name: MultiselectPicklist
Required Attribute: name=availablePickList, type= String []
Usage:
  1. In Lightning component / Lightning App :
Syntax : 
<c:MultiselectPicklist availablePickList= List of picklist/>
Eg.
<c:MultiselectPicklist availablePickList="['spray', 'limit','elite', 'exuberant', 'destruction', 'present']"/>
  1. In Visualforce Page :
To use this component in Visualforce page, create an App which extends ltng:outApp. Set Dependency In Lightning App. Refer TestApp

TestApp:  
<aura:application access="global" extends="ltng:outApp">
<aura:dependency resource="c:MultiselectPicklist">
</aura:dependency></aura:application>

TwoColumnsMultiSelectVFpage:
<apex:page >

<apex:includeLightning />

<div id="multiselectDiv" />

<script>

$Lightning.use("c:TestApp", function() {

$Lightning.createComponent("c:MultiselectPicklist",

{availablePickList : ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']},

'multiselectDiv',

function(cmp) {

console.log('component created successfully')

});

});

</script>

</apex:page>

You can download MultiselectPicklist lightning component from here.

How it looks:


Comments

  1. brahmaji11 January 2018 at 08:25

    lightning:dualListbox base component is already available for similar use case.

    ReplyDelete
    Replies
    1. Amit Ghadage12 January 2018 at 05:07

      Thanks Brahmaji. I was not aware of this component. Thanks for sharing.

      Delete

Post a Comment

Popular posts from this blog

Uploading multiple files as attachments using chaining of actionfunction in single click.

Image
File operations in salesforce are not easy compared to other technologies because of it's governance limits like maximum heap size, maximum string length etc.This post will be explaining how to upload multiple files with single browse by chaining of actionfunction using JavaScript. Limitations of apex : i nputF i le:  1) apex:inputFile cannot be used in conjunction with an action component, apex:commandButton or apex:commandLink that specifies a rerender or oncomplete attribute. So this tag is not useful on complex vf page. 2)This tag can upload only one file at a time. Implementation: In JavaScript function uploadFiles converts attachments body in base-64 encoded string and calls actionFunction saveFileAF(Base64 Encoded attachment body, File Name). In Apex decode base64 string and create attachment. On complete this  again call uploadFiles function in JS for next file. Repeat the same operation for each file. Code:            ...
Read more

Pagination In Lightning Component

Image
This blog is a continuation of ‘Dispalying Data Table in Lightning'.  If you haven't read that blog and want to read click here . In that blog we simply queried Accounts and displayed on lightning component.    The Salesforce Lightning component framework uses a stateful client and stateless server architecture. So we need to take a slightly different approach to do pagination than traditional VF. In order to maintain the value of offset. This is how we are doing. In Server Side Controller: We have a wrapper class AccountWrapper which wraps Accounts need to be displayed in accList, hasNext, hasPrev and offset. Server side action returns instance of AccountWrapper. In Client Side Controller : We have 4 action functions       1)  doinit  : This action function invokes on page load. Querying accounts with default page size.       2)     prev  : This action function invokes after pressing Pre...
Read more

Send SMS using Twilio Salesforce Library

Image
SMS is still one of the best way to connect with customer . This blog will be explaining how to use the twilio-salesforce helper library to send SMS. As usual we will implement a small application for it. We will add “Send SMS” button on Account. After clicking “Send SMS” button Salesforce user can type message and send to phone number of that Account. Steps: 1) download the twilio-salesforce library from GitHub.   2) If you don’t have Force.com migration tool install from here . 3) Extract downloaded twilio-salesforce zip file and edit i nstall/build.properties   to insert your Salesforce username and password. append security token to     your password.    Open command line to the install folder, then deploy using Ant:          Command : $ ant deployTwilio 4) Sign up for twilio account by trial pack you can send SMS to verified phone     ...
Read more