Built Multiselect Picklist Utilizing Salesforce Lightning Design System and AngularJs

Hello There,

 

giphy-5.gif

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

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.
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.

  • Double-click the value to add/remove a picklist value
SLDS Multiselect Picklist 2.gif

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.

200 (11).gif

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🙂

Advertisements

10 thoughts on “Built Multiselect Picklist Utilizing Salesforce Lightning Design System and AngularJs

  1. 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

    Like

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