Built Picklist Utilizing Salesforce Lightning Design System and AngularJs.

Hi There,

Welcome back ! In my previous post, I had covered how to Built Multiselect Picklist Utilizing Salesforce Lightning Design System and AngularJs. As many readers asked me to demonstrate about the normal salesforce picklist utilizing Lightning design system. So in this blog, we will explore how to built Picklist with the utilization of Salesforce Lightning Design System and AngularJs.

Initial setup : 

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, I have included angular Js file in code. Download AngularJS file from here and upload to a static resource.

Overview :

I have considered three picklist fields to demonstrate the example,

SLDS Picklist Example.gif

Show me the code!

200-8

For clear understanding, I have included a particular inline remark(Comment) about code segments.

Code is available on Github.

So That’s all ! we have successfully Build Picklist Utilizing Salesforce Lightning Design System and AngularJs. Cheers !

200-27

Reference :

  1. Lightning Design System
  2. Salesforce Trailhead – Lightning Design System

What’s Next ?

Keep your eyes on upcoming blog entry – Built Lookup Utilizing Salesforce Lightning Design System and AngularJs.

I would appreciate if you could share your thoughts in the comments section.

Happy Coding 🙂

Thank you.

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