Salesforce already has many out of box UI and Lightning Base components, but there is always scope for something more. We came across a requirement where we had to override a standard button of custom object and that component, we needed a Lookup input with prepopulated values on load.

We first tried it with standard Force:inputField –

Using Force: inputField for Lookup

Create the following component –

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global"> 
<aura:attribute name="testContact" type="Contact" default="{'sobjectType':'Contact'}"/> 
<aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
<force:inputField aura:id="lookup" value="{!v.testContact.AccountId}"/> 
</aura:component>

Using force:inputField it is not possible to set a prepoulated value directly in controller using aura id for example –

component.set(‘v.testContact.AccountId’, ‘001f4000002TfjEAAS’);

The workaround to assign a lookup object as a value is –

({
Controller
doInit: function(component, event, helper){ 
        var value = [{ 
               type: 'Account', 
               id: "001f100001HNc9iAAD", 
               label: "AccountName", 
        }]; 
        component.find("lookup").get("v.body")[0].set("v.values", value); 
} 
})

Please note that this workaround does not work with quick actions or override standard button in lightning Experience rather it works perfectly fine with communities.

As Force:inputField could not work in this case, we created Generic Lookup Component which can work as lookup input for any object just by providing proper attribute values, also the value can be prepopulated in it onload.

Generic Lookup Component

Component

<aura:component controller="InputLookupAuraController" access="global">
<ltng:require styles="/resource/Lgt_InputLookup/css/typeahead.css"
scripts="/resource/Lgt_InputLookup/js/jquery-2.2.4.min.js,
/resource/Lgt_InputLookup/js/bootstrap.min.js,
/resource/Lgt_InputLookup/js/typeahead.js"
afterScriptsLoaded="{!c.initTypeahead}" />
<aura:registerEvent name="inputLookupEvent" type="c:InputLookupEvt" />
<aura:handler name="inputLookupEvent" event="c:InputLookupEvt" action="{!c.handleInputLookupEvt}"/>
<aura:attribute type="String" name="type"  description="SobjectType" default="Contact" access="global"/>
<aura:attribute name="value" type="String" description="Source / Destination value" access="global"/>
<aura:attribute name="className" type="String" description="class name of the input object" access="global"/>
<aura:attribute name="nameValue" type="String" description="Name of the current lookup 'name' field: loaded by controller" access="PUBLIC"/>
<aura:attribute name="isLoading" type="Boolean" description="Loading component" default="true" access="PRIVATE"/>
<div class="slds-form-element__control">
<div class="slds-combobox_container slds-has-inline-listbox">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-combobox-lookup" aria-expanded="false" aria-haspopup="listbox" role="combobox">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<input id="{!globalId+'_typeahead'}" type="text" class="{!v.className}" readonly="{!v.isLoading}" onkeyup="{!c.disableButton}" />
<span class="slds-icon_container slds-icon-utility-search slds-input__icon slds-input__icon_right">
<lightning:icon iconName="utility:search" size="x-small"/>
</span>
</div>
</div>
</div>
</div>
</aura:component>

The complete Code for component is available on GitHub

Create component with Controller , Helper and other sections, Lightning Event, Apex class, upload static resource from link provided above.

Now use this generic component in your parent component where you want prepopulated lookup value component, create another component –
Parent Component

<aura:component implements="lightning:actionOverride,forceCommunity:availableForAllPageTypes" access="global" controller=”ParentController"><aura:attribute name="contacts" type="Contact" default="{'sobjectType':'Contact'}" access="global"/>
<div class="slds-form-element">
<label class="slds-form-element__label" for="combobox-unique-id-2">Account</label>
<c:lookupInput aura:id="techAcc0" type="Account" value="{!v.contacts.AccountId}" className="slds-input slds-combobox__input" />
</div>
</aura:component>

Controller

({
doInit: function(component, event, helper){
var action = component.get("c.fetchContactAccountValue");
action.setCallback(this, function(response) {
component.set("v.contacts",response.getReturnValue());
});
$A.enqueueAction(action);
}
})

Apex class

public class ParentController{
@AuraEnabled
public static Contact fetchContactAccountValue(){
return [Select Id, AccountId, Account.Name from contact limit 1 ];
}
}

This component can be used for both Standard, Custom Object and both Standard, custom Field.
Let’s check how to pass attributes value in Generic Lookup component –

<c:lookupInput aura:id="techAcc0" type="Account" value="{!v.contacts.AccountId}" className="slds-input slds-combobox__input" />

aura:id – This assign aura:id to input used for lookup
type – Type of object of field for Eg – you want contact accountIds as lookup values input then type of object is Account.

value – This is value of field that needs to be prepopulated for Eg -{!v.Contacts.AccountId} (Query this from apex)

className – This is used for styling input

Note: The Default Type attribute is set as Contact for contact lookup, it gets replaced with value you pass in type attribute.

#Happy Coding