Lightning - dynamically creating force:inputField

Question

With the release of Spring '16 there appear to be significant improvements to the force:inputField components especially for the lookup fields.

We are trying to use them in our application, but are having issues generating them dynamically. In our use case the user may define a set of fields that they want displayed for their form. This means we need to generate a list of inputs based on a dynamic set of fields.

Here is a statically defined example of how we can show the Custom_Acccount_Lookup__c field.

<aura:attribute name="contact" type="Contact" default="{ 'sobjectType': 'Contact' }"/>
<force:inputField value="{!v.contact.Custom_Account_Lookup__c}"/>

However how can we generate this same code if the field we want displayed was user defined? The code below obviously doesn't work, but is it possible to achieve this some other way? We have also tried to generate the component in the controller but run into similar issues when passing in the value.

<aura:attribute name="contact" type="Contact" default="{ 'sobjectType': 'Contact' }"/>
<aura:attribute name="fieldToShow" type="String" default="Custom_Account_Lookup__c"/>

<force:inputField value="{!v.contact[v.fieldToShow]}"/>

We are starting to suspect that there is some pre-processing of the component code before it renders. Upon code inspection the component actually generated is a force:inputLookup which is not one that we can create but apparently Salesforce uses to display the lookup field.

Answer 1

I received the response below from Salesforce support. It looks like it's not currently possible. The reference link is a good read, but doesn't help us build a force:inputLookup or any of the other field types.

This is very disappointing because it means we are now going to have to code our own force:inputLookup from scratch when there's already an implementation there that just isn't exposed for us to use.

If anyone finds an alternative please let me know.

---

From Salesforce Support:

Looks like Dynamic Field Binding is not fully available yet. However when looking into the Dynamic Field Names in Aura, I came across this reference below.

Reference Link : http://opfocus.com/blog/dynamic-field-binding-in-salesforce-lightning-experience/

Edit (3/4/2016):

I've also created this entry in IdeaExchange. Please upvote it to better bring this issue to Salesforce's attention.

https://success.salesforce.com/ideaView?id=08730000000E1UKAA0

Answer 2

Dynamic binding is not possible in that manner because that array[element] syntax is not supported in expressions.

However, you can create the component dynamically in the controller. For instance:

myArrayOfFields.forEach(function(field){    
  $A.createComponent(
    "force:inputField",
    {
      "value" : cmp.getReference("v.myObject." + field)
    },
    function(newField, status, errorMessage){
      //Add the new button to the body array
      if (status === "SUCCESS") {
        var body = cmp.get("v.body");
        body.push(newField);
        cmp.set("v.body", body);
      }
    })
  );
});

Even better and easier would be to use lightning:inputField like so:

<lightning:recordEditForm aura:id="recordViewForm"
                          recordId="XXXX00000000000000"
                          objectApiName="My_Object__c">
  <lightning:messages />
  <aura:iteration value="{!v.myArrayOfFields}" var="field">
     <lightning:inputField fieldName="{!field}" />
  </aura:iteration>
</lightning:recordEditForm>

https://developer.salesforce.com/docs/component-library/bundle/lightning:inputField/documentation