Salesforce: Autocomplete features for Lookup Fields
Using lookup fields in Salesforce can be very tedious and frustrating unless the record you want to look up has been searched (with the wildcards) recently.
Introduced at Dreamforce ’14, Salesforce1 Lightning technologies was a major upgrade for Salesforce1 platform. Lightning Components were built with the open-source Aura UI framework similar to the Salesforce1 App framework. Including some of the standard components such as UI Components or Aura Components and enabling the developers with an extended functionality to create the custom components.
Used by another components or app like creating instances of a class, Lighting components are like class definitions, defining the use of the component when used.
Similarly, the autocomplete component was designed to be used by other components or apps allowing the user to retrieve the fields with maximum number of results by specifying an Object type supporting accounts, contacts, users, opportunities and custom object lookups. The autocomplete components include the markup of the component to where they want it to show up, allowing the users to select the record of choice from a dynamic list of recently used matched records specific to the character typed; with the attribute value exclusively given to it to empower control over the component.
Here’s an example of Autocomplete:
As you type, autocomplete gives you suggestions on what you could be searching for. In this example, I am searching for an Account. Based on my input, “As”, the autocomplete suggested “Ashish Chaudhary”. The same thing would have happened if I had typed “shi”, or “chau”.
This example is generic of all Objects i.e. the same page, controller and component can be used for any and all Objects, even new custom Objects you create.
User Permissions Needed for Lookup Auto-Completion:
- To enable lookup auto-completion: Customize Application
- To use lookup auto-completion: Edit the record that includes the lookup field
For Live Demo CLICK HERE
How to Setup Lookup Auto-Completion
Lookup Auto-Completion is not enabled by default and needs to be activated manually. Pretty easy to enable, following are the steps to setup Lookup Auto-Completion:
- From the Setup menu, enter Search Setting in Quick Find.
- Select Search Settings and scroll down to Lookup Settings.
- Select the object that you need to enable Auto-completion for (like account, contact, opportunity, user or custom object lookup).
- Save the settings.
Points to consider for Lookup Auto-Completion in Salesforce:
- Lookup Auto-Completion in Salesforce needs to be enabled manually. Hence, the parent object needs to be enabled when a lookup file is created.
- Lookup Auto-Completion in Salesforce is case insensitive.
- Lookup Auto-Completion works only for Master-Detail and Lookup relationship.
- Lookup Auto-Completion retrieves the records from the recent item lists from both recent tab and list view as you type.
- Lookup Auto-Completion retrieves records with the each character as you type.
Attributes for Lookup Auto-Completion in Salesforce:
Lookup Auto-Completion retrieves the matching records from the any Salesforce object as you type in each character; controlling the component by accepting few attributes.
- label (String type attribute)
It displays a label over the component if a value is supplied.
- objectApiName (String type attribute)
It retrieves the API name of the object that is queried.
- idFieldApiName (String type attribute)
It retrieves the API name of Id field that is queried.
- valueFieldApiName (String type attribute)
It retrieves the API name of the field you want to get value from.
- extendedWhereClause (String type attribute)
It retrieves the records for the component that takes additional conditions for backend query.
- maxRecords (Number type attribute)
It displays the maximum matching records you want to fetch with default as 10.
Steps to develop Autocomplete on Visualforce Page for any Object:
This is a simple AJAX and JSON based Auto Complete component with the help of JQUERY UI. First I am assuming that you already have Static Resource of Named “AutoComplete”. This Static resource has all images, CSS and JQuery library needed to implement this component.
First, let’s start with how you would actually implement it in a Visualforce page.
Here are the attributes defined:
- returnValue– the controller property that is used for the ID of the selected record (REQUIRED).
- ComponentLabel – The label of the field (REQUIRED).
- LabelStyleClass – css class of the input label.
- for– The Id of the input element (REQUIRED).
- sObject– The api of the SObject of the lookup field (REQUIRED).
- label– the field api of what you want to search inside and also what will be stored in the input field (REQUIRED)
- value– the field api of what will be passed to the page’s controller (REQUIRED)
- details– comma-delimited list of field api names that will show as sub-text in the suggestion box.
- whereClause– additional where criteria to the query
- limit clause– limit of the return number of records. Defaults to 10.
Visualforce JsonString For AutoComplete :
First, you have a Visualforce page that simply displays a JSON (Java Script Object Notation) list of records returned by the page’s controller query.
The data in the Visualforce page is controlled by the page’s controller. The controller gets the variables set in the url to get the data needed to build the query, performs the queries, and returns a JSON representation of the results.
Controller AC_JSONCtrl:
The main part to pay attention in the Class is the DataWrapper inner class. That is what the returned JSON is representing. There are 3 components: Label, Detail, and Value.
The “Label” is the field that is being queried against based on your input. It is also the main part of the autocomplete suggestion. The “Detail” is the field that shows up underneath the label to provide more details into the record that is returned. The “Value” is the field that will be stored in the database. For lookup fields, you will need this to store the “Id” field. In the above example, the label was “Name,” the detail was “Type,” and the value was “Id”.
Visualforce Component Autocomplete:
Now let’s create a Component which will make AJAX request to above visualforce page “JsonStringForAutoComplete” and Parse JSON page using JQuery.
Visualforce to implement:
Now the Visualforce page, which will host above Component.
Final Result:
Conclusion:
Lookups are functional but very tedious to use. Making it easy is the Autocomplete for Lookup Fields in Salesforce wherein the records are fetched matching to each character as you type.
This article talks about everything you need to know about Autocomplete for Lookup Fields in Salesforce. If you need any assistance in enabling AutoComplete for a field, please reach out to us on sales@hicglobalsolutions.com
India 
USA
UK
Canada