An ‘auto-suggest’ alternative to Lookup Fields for Visualforce Pages

The trouble with Lookup Components

For anyone who’s worked with both Salesforce Lightning Components and Visualforce Pages, once you’re developing for the latter, you should run into Look-up Fields soon enough. That’s because Visualforce pages, unlike Lightning Components, don’t support auto-suggestion for lookup Fields.

And as is characteristic of Lookups, you’ll be accosted by a dialogue box each time you need to pick a Field value or Related Object. This could inflate Record creation for agents.

Even more, many single-page applications like POS or Checkout pages tend to block pop-up, making dialogue boxes inoperable.

Where do I find a lookup Field, though?

Pretty much everywhere. Just hop over to any Object Tab from your Org’s homepage, and you should see a Field with a lookup button next to it. It’s the thing that looks like a magnifying lens shown below.

custom lookup field

And clicking on it should bring up a dialogue box like this one.

Why not write a ‘type-ahead’ Component from scratch?

Modifying the Standard Lookup Component has its pros.

For one thing, it means you won’t need to write validation rules to check if a Field value entered is valid. You’re also saved from writing error messages and error handling routines. Just use the ones that come with the Lookup.

Even more, customizing a Standard Component lets us build the interface closer to Lightning Experience (like we did in the upcoming sample), or any other design interface.

Here’s an illustration

To demonstrate how to repurpose Lookups, we’ve implemented a Custom Lookup Component over Contacts to suggest valid options to choose from in Field that accepts parent Accounts.

The Component uses JS Remoting to fetch lookup data from the apex controller, while Underscore JS converts special symbols from HTML named code back into characters. The JQuery UI plugin then lists choices in a dropdown under the Accounts Field.

Like always, we’ve put up our source code below for reference.

Here’s an illustration

Source Code for the Visualforce Page

A Preview of our custom-made Component

Give this a spin yourself

Now that you’ve seen what this Component can do, you could apply text-predicting dropdowns to your own forms and Record fields.

For more assistance with Productivity Customizations or agent-friendly interfaces, reach out to us at sales@hicglobalsolutions.com.

Our Location worldwide
India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
SR Tower 2nd Floor Hydel Gate Haldwani Uttarakhand 263126 +91-5946359996
USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada
HIC Global Solutions INC
43 Lafferty Lane, Richmond Hill, L4C 3N8, CA +1(262) 310-7818