How do we pre-populate force:inputField in Lightning Component?

Question

I'm trying to preset a Lookup field when my Lightning Component form loads, but the field is always showing as nothing selected, even though the value exists in the field itself.

The code looks like this:

InputFieldTest.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes" access="global" >

    <ltng:require styles="{!$Resource.slds_v0110 + '/assets/styles/salesforce-lightning-design-system-ltng.min.css'}"
                  afterScriptsLoaded="{!c.performInit}" />

    <aura:attribute name="newRec" type="Contact"
                    default="{ 'sobjectType': 'Contact',
                               'FirstName': '',
                               'LastName': '',
                               'AccountId': ''
                             }"
                    access="global" />

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <div class="container slds" style="padding:5px">
        <form class="slds-form--stacked">
            <div class="slds-form-element">
                <label class="slds-form-element__label">First Name</label>
                <div class="slds-form-element__control">
                    <force:inputField value="{!v.newRec.FirstName}" />
                </div>
            </div>
            <div class="slds-form-element">
                <label class="slds-form-element__label">Last Name</label>
                <div class="slds-form-element__control">
                    <force:inputField value="{!v.newRec.LastName}" />
                </div>
            </div>
            <div class="slds-form-element">
                <label class="slds-form-element__label">Account</label>
                <div class="slds-form-element__control">
                    <force:inputField value="{!v.newRec.AccountId}" />
                </div>
            </div>
        </form>
    </div>
</aura:component>

InputFieldTestController.js

({
    doInit: function(component) {

    },
    performInit: function(component) {
        component.set("v.newRec.AccountId","0019000001eByTN");
        component.set("v.newRec.LastName","Test L");
    }
})

The lookup field is always empty, I've to manually select value in it. The other field is prepopulating correctly.

Is there any trick to pre populate a lookup field bounded to force:inputField?

Answer 1

I had to modify Folkert's answer to get it to work...

You first need to add an aura:id to the lookup field to be able to search for it in your controller/helper:

<force:inputField value="{!v.newRec.AccountId}" aura:id="accountLookup"/>

In your javascript, you then need to search for the force:inputField and set the values attribute for it. In the values you set the type of the lookup, the Id, a label and an icon like this:

    // we need this for the actual 'pill' in the lookup field
    var values = [{
        type: 'Account',
        id: "0019000001eByTN",
        label: cmp.get('v.accountName'), //obviously, you should get this from somewhere, perhaps in your apex controller
        icon : {
            url:'/img/icon/t4v35/standard/account_120.png',
            backgroundColor:'A094ED',
            alt:'Account'
        }
    }];

    component.set("v.newRec.AccountId","0019000001eByTN");
    component.find('accountLookup').set('v.values', values);

replace

 component.find('accountLookup').set('v.values', values;

with

 component.find("accountLookup").get("v.body")[0].set("v.values", values); 

I'm not sure if this is supported but its working for me.

Answer 2

Unfortunately, ui:inputField doesn't work for lookups.

I imagine this is coming, but for now, you need to roll your own - or use a pre-rolled version like mine. Try this one (Too much code to put here, so linking to github).

Essentially, you have to grab the static lookup code created by Salesforce here and animate it.

You will need to handle init, search, select and deselect actions from your custom component (this is done in the linked version)

The search performs a SOSL search on the Apex controller, which sends back results, which are rendered via an iterator on the component.

When a selection is made, LookupChange event is despatched, which you listen for in your parent component.

Let me know if you need more details.

Answer 3

It will work but you need to do a bit more than simply setting the value of a component attribute to get it prefilled.

You first need to add an aura:id to the lookup field to be able to search for it in your controller/helper:

<force:inputField value="{!v.newRec.AccountId}" aura:id="accountLookup"/>

In your javascript, you then need to search for the force:inputField and set the values attribute for it. In the values you set the type of the lookup, the Id, a label and an icon like this:

        // we need this for the actual 'pill' in the lookup field
        var values = [{
            type: 'Account',
            id: "0019000001eByTN",
            label: cmp.get('v.accountName'), //obviously, you should get this from somewhere, perhaps in your apex controller
            icon : {
                url:'/img/icon/t4v35/standard/account_120.png',
                backgroundColor:'A094ED',
                alt:'Account'
            }
        }];

        component.set("v.newRec.AccountId","0019000001eByTN");
        component.find('accountLookup').set('v.values', values);