Input Field Lookup

This component creates a lookup field similar to the generic Salesforce Lookup fields to be used in Lightning components or applications.

It automatically loads the object icon and allows to create a new record similar the native component (it won't navigate away and will select it after creation).

Default state:

Focused, showing recent items:

Record Selected:

Record Selected and Disabled:

Usage

Define lookupField component in a custom component markup:

<aura:component>

    <aura:attribute name="selectedId" type="String" />
    
    <c:lookupField 
                    objectAPIName="Account" 
                    label="Relate to"
                    returnFields="['Name','Phone','Website']" 
                    queryFields="['Name','Phone','Website']"
                    selectedId="{!v.selectedId}"
                    filter="CreatedDate > 2001-01-01T00:00:01Z"/>

</aura:component>

Properties

• objectAPIName (String) - The API name of the object.
• label (String) - The label of the input field (optional).
• variant (String) - Changes the appearance of the component. Accepted values are standard and label-hidden. Defaults to standard (optional).
• showIcon (Boolean) - Show the Icon of the Object (Tab). Defaults to true (optional).
• returnFields (List) - The list of fields to display in the search results. Default displays only Name (optional).
• queryFields (List) - The list of fields to search into. Default displays only Name (optional).
• maxResults (Integer) - Maximum numbers of records in the search. Defaults to 5 (optional).
• sortColumn (String) - Field used to sort the search results. Defaults to CreatedDate (optional).
• sortOrder (String) - Field used to define the sort direction of the search results. Defaults to DESC (optional).
• showRecent (Boolean) - Indicates whether to display the recent user records when focus. Defaults to true (optional).
• showAddNew (Boolean) - Indicates whether to allow create a new record and relate to it. Defaults to true (optional).
• selectedId (Boolean) - Gets or Sets the RecordId of the Object. (optional).
• selectedName (Boolean) - Gets or Sets the Name of the Selected Record of the Object. (optional).
• disabled (Boolean) - Specifies whether the component should be displayed in a disabled state. Defaults to false (optional).
• filter (String) - Allows the user to define a filter for the search query. Defaults to null (optional).
• required (Boolean) - Specifies that an input field must be filled out before submitting the form. Defaults to false (optional).
• showError (Boolean) - Gets or Sets the display type of the component, normal or error. Defaults to false (optional).
• errorMessage (String) - Gets or Sets error message. Defaults to null (optional).

Notes & Considerations

The variable selectedName uses the first value in the returnFields parameter. If none is defined it will return the Name field of the Object.

When adding new record from the menu option + New _objectname_, it won't navigate away, instead it selects the recently created record.

If you see the Search Error! message in the Search Results, check the fields you are using in the returnFields, queryFields and filter parameters as they might not exists or they might not be available for query or filter (You cannot filter by the Description field in the Account object so you shouldn't use it as in the queryFields but you can use it in the returnFields).

When using the filter please note that it is placed directly in the 'WHERE' condition of the SOQL statement without any validations, so please double check it.

How to Deploy it in your Salesforce Org (Sandbox)

Open the Developer Console and proceed as follows:

1. Create a new Apex Class (File > New > Apex Class) and name it: lookupfieldController.
2. Create a new Lightning Event (File > New > Lightning Event) and name it selectedsObjectRecordEvent.
3. Create a new Lightning Component (File > New > Lightning Component) and name it lookupField.
4. Copy and pase the code from the SRC directory into the recently created files.
   • For the Apex Class: lookupfieldController.apxc
   • For the Event: selectedsObjectRecordEvent.evt
   • For the lightning component:
     • COMPONENT: lookupField.cmp
     • CONTROLLER: lookupField.js
     • HELPER: lookupField.helper
     • STYLE: lookupField.css

Alternatively you can use deploy2.org to deploy directly from Github to your Sandbox.