23

I've created a Lightning component to view key details for the Account and Contact lookups from a Case, like so:

enter image description here

The problem is, I have been unable to get field content to render when using the <force:inputField/> or <force:outputField/> components when I place them inside the markup to style them as cards. I've used <ui:outputText/> as a workaround, but that means I don't get any of the built-in behaviors I would get with the <force:*Field/> components -- like Lightning styling, which means I have to manually do it using SLDS.

This displays the contact name as expected:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="LightningCaseTestController">
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <aura:attribute name="recordId" type="Id" />
  <aura:attribute name="contact" type="Contact" default="{sobjectType: 'Contact'}"/>

  <force:outputField value="{!v.contact.Name}"/>
  <force:inputField value="{!v.contact.Name}"/>

</aura:component>

This does not:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" controller="LightningCaseTestController">
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <aura:attribute name="recordId" type="Id" />
  <aura:attribute name="contact" type="Contact" default="{sobjectType: 'Contact'}"/>

  <article>
    <force:outputField value="{!v.contact.Name}"/>
    <force:inputField value="{!v.contact.Name}"/>
  </article>

</aura:component>

Basically, it appears that as soon as any markup is placed around the <force:*Field/> tags -- even just a <div> -- they no longer render. Examples in Trailhead and other places all seem to use <ui:outputText/> or <ui:input*/>.

This seems like a lot of extra manual work. Am I missing something?

Update: it only fails when the component is included in a Lightning page -- such as the record detail page -- from Lightning App Builder. If I add it to a simple Lightning app, it works:

<aura:application >
    <c:LightningCaseTest recordId="SOMECASEID" />
</aura:application>

So it appears to be a bug?

6
  • 1
    sounds like a bug to me .Is it only happening inside the App builder or even if you view inside a simple lightning app? Sep 6, 2016 at 19:33
  • Good call. I added the component to a simple Lightning app and it displays the content as expected. I'll update the question. That seems like a pretty big bug though! Sep 6, 2016 at 19:54
  • It's a big bug in builder !Huge .Did you tweet to someone or @askforce ? Sep 6, 2016 at 19:57
  • 2
    I'm about to - I updated the question with additional details, now to go tweet at people. Sep 6, 2016 at 20:01
  • How about using createComponent method to dynamically inject it .Sometimes it does make difference :) Sep 6, 2016 at 20:20

3 Answers 3

9

I just heard from Farhan Tahir, the product manager for Aura. He's confirmed that it is in fact a bug (W-3342864).

UPDATE: the bug's been nevered. PM guidance is to "use lightning namespaced components. force:inputField should be replaced with lightning:inputField (or even better with lightning-input-field, which is the LWC version)."

5
  • @shanonsans - Do you now if there's a link to this bug on the Known Issues Site? It would be good to be able to get to it directly, if possible.
    – Bigears
    Nov 1, 2016 at 11:50
  • It doesn't appear to be (that I can find) Nov 1, 2016 at 20:40
  • Thanks @shannonsans. I was going crazy until I came across your post. sigh
    – Doug Ayers
    Nov 10, 2016 at 23:36
  • Its a pretty big bug!! Six months later and it is still present. Did anyone find if it was on the path to be fixed?
    – dacology
    Mar 10, 2017 at 15:11
  • Here's the known issue: success.salesforce.com/issues_view?id=a1p3A0000008gDzQAI Mar 26, 2017 at 22:25
3

As of Summer 17, here's the work around we're using:

<!-- component setup -->
<aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
<aura:attribute name="newContractLine" type="Contract_Line__c" default="{'sobjectType': 'Contract_Line__c'}" />
<!-- end component setup -->

<!-- workaround for form fields below -->
<force:outputField aura:id="contractType" value="{!v.newContractLine.Type__c}" class="slds-hidden" />
<!-- end workaround -->

<!-- contract line form -->
<lightning:layout horizontalAlign="spread" multipleRows="true">

    <!-- type -->
    <lightning:layoutItem size="6" class="slds-p-horizontal--small">
        <ui:outputText class="slds-form-element--label" value="Type"/>
        <force:inputField aura:id="typeInput" value="{!v.newContractLine.Type__c}"/>
    </lightning:layoutItem>
    <!-- end type -->

</lightning:layout>
<!-- end contract line form -->
1
  • 1
    It works ... randomly. Reloading the page is a hit or miss. One year later, and this problem is not yet fixed ... Mar 16, 2018 at 8:40
0

I just found a weird work around for this:

<aura:attribute name="contact" type="Contact" default="{sobjectType: 'Contact'}"/>
<aura:attribute name="dummmyContact" type="Contact" default="{sobjectType: 'Contact'}"/>
<force:inputField value="{!v.dummmyContact.Name}" class="slds-hide"/>
<article>
    <force:outputField value="{!v.contact.Name}"/>
    <force:inputField value="{!v.contact.Name}"/>
</article>

By having one inputField at the top level (where we've confirmed that it can render), it seems to pull in the dependencies needed for the rest of the force: components to work.

1
  • 4
    This used to work until Spring 17. Starting with Summer 17 (v40) we cannot get the field to show anymore...
    – Christoph
    May 26, 2017 at 9:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .