22

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?

  • 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? – Mohith Shrivastava Sep 6 '16 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! – shannonsans Sep 6 '16 at 19:54
  • It's a big bug in builder !Huge .Did you tweet to someone or @askforce ? – Mohith Shrivastava Sep 6 '16 at 19:57
  • 2
    I'm about to - I updated the question with additional details, now to go tweet at people. – shannonsans Sep 6 '16 at 20:01
  • How about using createComponent method to dynamically inject it .Sometimes it does make difference :) – Mohith Shrivastava Sep 6 '16 at 20:20
7

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)."

  • @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 '16 at 11:50
  • It doesn't appear to be (that I can find) – shannonsans Nov 1 '16 at 20:40
  • Thanks @shannonsans. I was going crazy until I came across your post. sigh – Doug Ayers Nov 10 '16 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 '17 at 15:11
  • Here's the known issue: success.salesforce.com/issues_view?id=a1p3A0000008gDzQAI – shannonsans Mar 26 '17 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
    It works ... randomly. Reloading the page is a hit or miss. One year later, and this problem is not yet fixed ... – Christophe Vidal Mar 16 '18 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.

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

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.