Built Multiselect Picklist Utilizing Salesforce Lightning Design System and AngularJs
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.
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.
- 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