Lightning - How to use force:inputField?

Question

I've seen that since Spring'15, there are new standard components available in Lightning.

I've been looking for a component that would be a sort of apex:inputField, but in Lightning. The force:inputField component seems to be what I want, however I was not able to make it work.

The component is available inside the Documentation App (/auradocs/reference.app), but there is nothing about it inside the Spring'15 Release Notes so I wonder if this component is fully available or not.

I wrote a really basic test to display an Account Name. I've set the attribute type to Account, using type="Account" in my aura:attribute tag but that is not working. Maybe am I missing something about the correct way to set it ? Here is my code :

LIGTHNING COMPONENT

<aura:component controller="[YOURNAMESPACE].AccountController" implements="force:appHostable">
    <aura:attribute name="account" type="Account"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <force:inputField value="{!v.account.Name}" />
</aura:component>

COMPONENT CONTROLLER

({
    doInit: function(component, evt, helper) {
        var action = component.get("c.getAccount");
        action.setCallback(this, function(a) {
                component.set("v.account", a.getReturnValue());
        });
        $A.enqueueAction(action);
    },
})

APEX CONTROLLER

public class AccountController {
    @AuraEnabled
    public static Account getAccount() {
        return [select Id, Name from Account Limit 1];
    }
}

However, using <ui:inputText value="{!v.account.Name}" /> instead of <force:inputField value="{!v.account.Name}" /> is working.

Did someone manage to use it ?

Answer 1

This is a current shortcoming of those components.

As explained to me by Doug Chasman, force:inputField and force:outputField have always been provided the metadata definition of what the sObject was by their containing component (for instance force:recordEdit). At some point they will be able to do so on their own, but for now, we need to help them.

The way to do this is to provide a default value object to the Account attribute, like this:

<aura:attribute name="account" type="Account" default="{ sobjectType: 'Account' }"/>

I just tested this out, and it works for me it works to get rid of the error.

Answer 2

Here is some sample code using what Peter provided.

<aura:component implements="force:appHostable">

  <aura:attribute name="task" type="Task" default="{ sobjectType: 'Task' }"/>


  <force:inputField value="{!v.task.Subject}" />

  <force:inputField value="{!v.task.Description}" />

  <force:inputField value="{!v.task.Priority}" />

  <force:inputField value="{!v.task.ActivityDate}" />

  <force:inputField value="{!v.task.WhoId}" />

  <force:inputField value="{!v.task.WhatId}" />

</aura:component>

I only found the following issues.

1. Lookup fields are not styled correctly and look pretty bad.
2. Picklists and multipicklists are disabled by default. They load the correct data but can not be selected.

If anyone knows how to fix these two issues let me know.

Answer 3

I was able to use it for picklists to some degree in the context of this question. My component is designed to run on a Community created by the Community Builder using the Napili-Template.

As @Andrew explained, the picklist will be rendered disabled for an yet unknown reason... To overcome this flaw, I used jQuery. Believe it or not the Napili-Template comes out-of-the-box with jQuery loaded from /sfsites/assets/Scripts/jquery/jquery.js - thank you so much for that!

The shipped jQuery is a pretty old version back from 2011, but still fine to do workarounds with one-liners. For Standalone Lightning Apps however jQuery is NOT loaded and you need to take care on you own. This seems to be important to see error-messages as explained here.

The result works for me to read and write data like this:

Component elfL1.cmp

<aura:component controller="elfL1" implements="forceCommunity:availableForAllPageTypes,force:appHostable">
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <aura:attribute name="account"  type="Account" default="{ sobjectType: 'Account' }" />
    <h1>Test1</h1>
    <form>
        <force:inputField value="{!v.account.Name}" class="form-control uiInput--input input" />
        <force:inputField value="{!v.account.Type}" class="elfForceEditable" />
        <force:inputField value="{!v.account.Rating}"  class="elfForceEditable"  />
        <!--The following is the way we do NOT want to proceed-->
            <!-- <ui:inputText aura:id="client"-->
            <!-- label="{!$ObjectType.Account.fields.Name.Label}"-->
            <!-- class="form-control"-->
            <!-- value="{!v.account.Name}"-->
            <!-- placeholder="test"-->
            <!-- />-->
        <br />
        <ui:button class="form-control" aura:id="button" label="Save" press="{!c.save}"/>
        <br /><br />
    </form>
</aura:component>

First I mark the wrongly disabled selects with the class elfForceEditable. Second I think even the styling is OK for a starter. I just added the classes uiInput--input and input for the plain text field (Salesforce should make this consistent). The picklist got the styling right on it's own.

Clienside controller elfL1Controller.js

({
    init : function(component, event, helper) {
        console.log('elfL1.init()');
        var action2 = component.get("c.getAccount");        
        action2.setCallback(this, function(response) {
            console.log(response.getReturnValue());
            component.set("v.account", response.getReturnValue());
            $('select.elfForceEditable').removeAttr('disabled');    
        });
        $A.enqueueAction(action2);
    }, 
    save : function(component, event, helper) {
        console.log('save:1');
        var action = component.get("c.saveAccount");
        var account = component.get("v.account");
        action.setParams({"account": account});
        action.setCallback(this, function() {  console.log('SAVED.');  } );
        $A.enqueueAction(action);
        console.log('save:end');
    },
})

Here comes the one-liner workaround: I just remove the disabled attribute with $('select.elfForceEditable').removeAttr('disabled');

APEX controller elfL1.cls

public class elfL1 {
    @AuraEnabled public static Account          getAccount(){
        return (Account) Database.query( ' SELECT Name,Type,Rating FROM Account LIMIT 1 ' )[0];
    }
    @AuraEnabled public static Account          saveAccount(Account account){
        upsert account;
        return account;
    }
}