Is it possible to use the new v41.0 lightning:outputField in huge numbers inside tables? Is it possible to extend it?
- Is it possible at all?
No.
- Are Standard Components extensible at all?
No.
- Even if it would be possible, is extension a good idea?
It'd be potentially useful, but we can't.
- Slow and async rendering
You shouldn't be using tables. It's a shame that they actually allow it, because tables are not used anywhere in Lightning at all. Everything is meant to be responsive, and tables are not responsive by nature. You didn't say exactly how your layout got messed up, but you should look at the lightning:layout element to create a grid that can reflow elegantly with fewer CSS hacks.
- Is
<lightning:recordViewForm>
designed to be used in high numbers?
The documentation doesn't say, but I'd have to guess "probably not." You might consider using force:outputField/force:inputField instead. I've had much better luck using combinations of lightning:layout
and lightning:layoutItem
. This give you better control over how things are laid out.
Also, I'd solidly recommend pagination if you're looking at more than ~25 items. Actually, using pagination or infinite scrolling might be a better idea anyways; the data could load progressively so that you can minimize the rendering time.
What I came eventually up with it a wrapper component around lightning:recordViewForm
and lightning:outputField
which looks like that (look at currency and date-formats - they will adapt strictly to the locale of the salesforce-user ignoring any browser or OS locales)
As you see, the it can be combined with anything in any cell. Full flexibility, rendered inline.
The compo is markup-only, no controller, no helper needed:
<aura:component >
<aura:attribute name="id" type="String" default="" />
<aura:attribute name="object" type="String" default="" />
<aura:attribute name="field" type="String" default="" />
<aura:attribute name="wrap" type="Boolean" default="true" />
<style>
.elfLCXLightningOutputField .elfForceInline * { display: inline !important; color: inherit; font-size:inherit; }
.elfLCXLightningOutputField .elfForceWrap * { white-space: normal !important; }
</style>
<span class="elfLCXLightningOutputField">
<span class="{! 'elfForceInline ' + (v.wrap?' elfForceWrap ':'') }">
<lightning:recordViewForm recordId="{!v.id}" objectApiName="{!v.object}">
<lightning:outputField fieldName="{!v.field}" variant="label-hidden" />
</lightning:recordViewForm>
</span>
</span>
</aura:component>
Used like that
<tbody>
<aura:iteration items="{! v.Opportunities }" var="item">
<tr class="elfItemRow"
>
<td data-label="" class="elfAlignRight">
<c:elfLCXLightningOutputField id="{!item.Id}" object="Opportunity" field="CloseDate" />
<span class="elfCloseStatusIndicator" title="{! item.___elfCloseStatus }"> </span>
</td>
<td data-label="" class="elfAlignRight">
<c:elfLCXLightningOutputField id="{!item.Id}" object="Opportunity" field="CreatedDate" />
</td>
<td data-label="" class="elfAlignRight">
<c:elfLCXLightningOutputField id="{!item.Id}" object="Opportunity" field="Amount" wrap="false"/>
</td>
</tr>
</aura:iteration>
</tbody>
What I notice is that due to the massive use of lightning:recordViewForm
lots of async request are ongoing. lightning:recordViewForm
and lightning:outputField
seem to query their own data. They do not use what I have loaded already in the iterator. The effect is strange but at this stage for me acceptable: it loads the table quickly with all these fields black. Then like an animation each single field pops out asynchronously. It's not blocking the UI.
I expect that this is very inefficient and would love to get a more mass-data-capable inputField from Salesforce - but having the same features like lightning:outputField
Caution:
Another thing I have noticed is that subsequential settings of the v.Opportunities attribute is causing Javascript exceptions - but ALL the compos do update correctly. As a workaround I wrapped the cmp.set() with a try/catch to suspend the error.