17

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 ?

  • Fabien, can you post what you've tried? Presumably, like the Visualforce apex:inputField VF tag, you'd need to bind it to something that was a field of an sObject, not just plain-old data in some JS property or random JSON object. Can you try binding it to a component attribute that is some sObject type and give it a go. If I have a chance to try tomorrow, I'll give it a go, too as I am curious. – pchittum Feb 1 '15 at 23:40
  • Thanks @Peter I've edited my question to add my code samples. – Fabien Taillon Feb 2 '15 at 11:13
  • And just to do a check: you are trying this on a Spring 15 org, right? – pchittum Feb 2 '15 at 11:31
  • 2
    update: I am making progress hunting down why this is happening, but probably won't have answer until tomorrow at earliest. – pchittum Feb 9 '15 at 12:54
  • 1
    Hey guys. I am currently looking for an answer to this as well. Did anyone have anymore updates on this one? – Daniel Fuller Aug 3 '15 at 15:14
8

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.

| improve this answer | |
  • Thanks Peter, is it possible for you to ask Doug about the disabled picklists (see answers from @Andrew and me below)? I would like to use this approach in a bigger Community project on production and I need to know if this feature is ready for prime time right now. In my tests, it works fine with my workaround and this would be lightyears ahead of going back to ui:inputWhatever – Uwe Heim Oct 23 '15 at 8:58
  • I've also logged a premier support case to that issue. The number is 12672526 and I'm in contact with Akash there - just in case it might help to streamline the communication. At the case I linked the relevant articles here, too, to avoid redundancy as much as possible. – Uwe Heim Oct 23 '15 at 9:21
  • Hi @Peter - I've an issue to use this technique inside an <aura:iteration> and asked this as a different question here: salesforce.stackexchange.com/questions/97184/… - in case you have any idea how this could work, it would help me a lot. Obvious stuff like default="{ sobjectType: 'Opportunity[]' }" and default="{ sobjectType: 'List<Opportunity>' }" I've tried already unfortunately without success... – Uwe Heim Oct 26 '15 at 12:09
  • @UweHeim or @Peter Hi, I've got an issue displaying force:inputField inside a slds modal dialog of lightning component in a visualforce page. Could you please share us your thoughts, if you came across the same issue before? Posted my question here.salesforce.stackexchange.com/questions/161197/… – sam_s Feb 21 '17 at 1:28
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.

enter image description here

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;
    }
}
| improve this answer | |
  • That's right, I tried to play with the picklist too, and it's disabled even though it should. However, all values are here, and just removing the "disabled" attribute make the picklist work. Maybe it's just a bug on the component, setting this disabled attribute on picklist even when it shouldn't ? – Fabien Taillon Oct 23 '15 at 9:03
  • Uwe, this seems like it might be a better answer to your question that you referenced in your answer, don't you think? @Fab.'s question is about getting the error to not appear. Yours is about picklists. It is a good work-around, by the way. And the "disabled" does seem like a bug to me. – pchittum Oct 23 '15 at 10:53
  • @Peter : he asks explicitly for it "If anyone knows how to fix these two issues let me know." so I provided it here, too. There is obviously a bit of redundancy in these questions as it happens. Yeah, I think too, that it looks like a bug. Unfortunately there are even more bugs... I'll post them as soon as I can. – Uwe Heim Oct 23 '15 at 11:02
  • You're answering an answer. Not the original question. I also suggested that answer become a new question. I'm not saying this shouldn't be an answer somewhere. It should. Just not on Fab.'s original question at the top. :-) – pchittum Oct 23 '15 at 12:34
  • 1
    Yes, @Peter you are right. Somehow I didn't have realized that there was a question in an answer already... – Uwe Heim Oct 23 '15 at 12:46
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.

| improve this answer | |
  • 1
    The question about picklists has already been asked by @UweHeim. The Lookup field question should be asked as a new question, not as an answer to this question. Andrew, it looks like you're new to SFSE, please take a moment to read up on topics like salesforce.stackexchange.com/help/how-to-ask as well as salesforce.stackexchange.com/help/how-to-answer. Not following the rules of a Stack Exchange is likely to get your posts flagged, voted down, or deleted. Thanks! And welcome. – pchittum Oct 23 '15 at 10:47
  • Thanks for the coaching on this @Peter. I've submitted a new question here and linked to the related questions. I wish I could have just commented on your answer rather than submitting another "answer", but my reputation is too low to do this. – Andrew Oct 24 '15 at 14:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.