Built Multiselect Picklist Utilizing Salesforce Lightning Design System and AngularJs

Hello There,

giphy-5

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 !

Lb6NYkY.gif

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,

  1. Use the arrow to add/remove elements from a picklist.
slds-multiselect-picklist-1

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.

2. Double-click the value to add/remove a picklist value

 

slds-multiselect-picklist-2

Double click on value 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.

Ohh Yes, we have effectively built up the Multiselect picklist component utilizing Salesforce Lightning Design System and AngularJS.

200 (11).gif

References :

What’s Next ?

Keep your eyes on upcoming blog entry Part I for Design your visualforce page utilizing Lightning Design System.
Enjoy! Happy Coding 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s