Built Multiselect Picklist Utilizing Salesforce Lightning Design System and AngularJs
Hello There,
There are a lot of pre-built UI controls that you can use to create an interface, but there are a couple of vital missing pieces. Salesforce Lightning Design System Multiselect Picklist often causes style problems while integrating it into a Lightning App.
So in this blog, we will explore how to built Multiselect Picklist with the utilization of Salesforce Lightning Design System and AngularJs.
By any chance, if you are looking for normal picklist you should visit my next post – Picklist SLDS, I had covered Datepicker functionality in the previous article – Built Datepicker Utilizing Salesforce Lightning Design System.
Let the Lightning Game Begin !
Afore starting with Initial setup, get acquainted with Lightning introduction.
- Download the ‘Salesforce Lightning Design System’ Custom Scoped CSS from here , place your desired scoping class name into the “Scoping class” input and click Generate CSS. This Scoping class wraps your content using the Lightning Design System to avoid CSS conflicts. Scoping class name example : slds
- Download the scoped version of the Design Systems files and upload Zip folder as your static resource.
- As I am using Angular Js in my code, included angular Js file in code. Download AngularJS file from here and upload to a static resource.
Overview :
Lets have an overview of developed LDS component, mainly there are two ways to select a value,
- Use the arrow to add/remove elements from a picklist.
In the above GIF, we have to select picklist value first before clicking on arrow button which is again a bit time consuming, lets have an optical canvassing of another way to add/remove a value which is the more time efficient method.
- Double-click the value to add/remove a picklist value
In the above GIF, we can see that value are selected by just double clicking(Time efficient way). Cheers
Show me the code!
For clear understanding, I have included a particular inline remark(Comment) about code segments.
Code is available on Github
Note : You need to replace the all static resource name with your static resource name.
Ohh Yes, we have effectively built up the Multiselect picklist component utilizing Salesforce Lightning Design System and AngularJS.
References :
- Appiphony Lightning JS on your Visualforce pages
- Lightning Design System
- Introducing Appiphony Lightning JS
What’s Next ?
Keep your eyes on upcoming blog entry Part I for Design your visualforce page utilizing Lightning Design System.
Enjoy! Happy Coding
You put ng-click=”addToSelectedPicklistValues()” to svg tag so it’s hard to click. Hope you can add move up/down button in selected list. Great job !
LikeLike
Hi Jack,
I will surely have a look for up down arrow.
Thanks.
—
G10
LikeLike
[…] back !
LikeLike
[…] back !
—
G10
LikeLike
[…] back ! […] back !
LikeLike
[…] back ! […] back !
LikeLike
[…] back ! […] back !
LikeLike
How do we save? does that work in standard layout ? how do I add it as a field to standard layout?
LikeLike
Hi Jiten , its a great piece of code, I have to implement the same using only SLDS and no external libs like angular.
It would be of great help if you can share it incase u have did it.
LikeLike
Sure buddy, please drop your email ID.
LikeLike
Hi Jiten – This is fantastic, thanks very much for guidance. I have implemented and works great. However, the one issue I’m encountering is there is no scrollable in x direction. So when text exceeds the width of the container we don’t see it. It is truncated with “…”. Have you encountered and dealt with this issue? Thanks! Jason
LikeLike
Hi Jiten,
can you please post the SLDS picklist code with no use of external library? I need to implement the same.
LikeLike