I've created a Lightning component to view key details for the Account and Contact lookups from a Case, like so:
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?
Best Answer
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 withlightning:inputField
(or even better withlightning-input-field
, which is the LWC version)."