Built Multiselect Picklist Utilizing Salesforce Lightning Design System and AngularJs

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.

1. 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
2. Download the scoped version of the Design Systems files and upload Zip folder as your static resource.
3. 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.

Select and Click – Standard way of selecting the values

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

Double Click on values for Add/Remove the 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 :

1. Appiphony Lightning JS on your Visualforce pages
2. Lightning Design System
3. 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