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

Dynamic Visualforce Bindings with Example

Image
This blog will be explaining how to use dynamic Visualforce bindings with example. Sometimes we have to build Visualforce pages based on certain conditions or based on user input, i.e fields on page are determined at run time rather than compile time, In this case rendering based on conditions is not enough to achieve the goal. At this point dynamic Visualforce bindings come into the picture. In dynamic Visualforce bindings along with user input there are methods and properties of the controller that determine how to assemble a new page. Syntax : reference [expression] We can use dynamic binding in formula expression on Visualforce like {!reference [expression]} Where reference can be Sobject or Apex class, expression can be name of the field or object which recursively returns field. In this blog we will be creating Visualforce page for case creation and fields on the form will be decided at run time based on fields selected form will be created. We will show on
Read more