Built Lookup Utilizing Salesforce Lightning Design System and AngularJs.

Hi There,

200-14

Welcome back! On Salesforce Developer forum and Salesforce StackExchange forum, many Salesforce Developers have posted the issue with Lightning Design System Lookup. So in this blog, we will explore how to built Lookup with the utilization of Salesforce Lightning Design System and AngularJs.

 

In my previous post, I had covered how to Built Picklist Utilizing 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.

Look & Feel

I have considered contact lookup for demonstration.

slds-lookup-example

Note:  As you can see in above GIF, I have purposely limited the search after entering minimum 4 characters, this helps us in giving better performance by limiting the number of the query result as well as consumes minimal system resource. If we enable search for every single character entered in the search box, could you imagine if a system contains millions of record and users are searching for the desired result  ??? If your requirement is different than the developers have rights to modify this limit from angular code.

In Addition, I have also given ‘Add Contact’ privilege to the user, if searched contact in not available in database and users wants to add a new contact. On click of ‘Add Contact’ dropdown, it will redirect the user to create new contact layout as demonstrated in below GIF.

SLDS Lookup Example 2.gif

Show me the code!

 

VF Page:

Controller :

 

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

Reference :

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

What’s Next?

200-16

Keep your eyes on upcoming blog entry – Built Visualforce page Utilizing Salesforce Lightning Design System and AngularJs part – I.

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