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