-1

How can I use the new v41.0 <lightning:outputField> inside an <aura:iteration>?

I have tried this

<aura:attribute name="Opportunities" type="Object" default="{}" />
<aura:iteration items="{! v.Opportunities }" var="item">
    <lightning:recordViewForm recordId="{!item.Id}" objectApiName="Opportunity">
        <lightning:outputField fieldName="CloseDate" />
    </lightning:recordViewForm>
</aura:iteration>

The attribute v.Opportunities gets populated in the controller calling an Apex @AuraEnabled which returns an Opportunity[]

It is failing with some kind of endless loop.

In the console I get uncountable numbers of these very hard to reaqd errors and can only close the tab of the browser, because it freezes and becomes unresponsive

The main issue seems to be this buried in the middle of the error-code: recordIds should be a string list, but received - but I'm sure the iterated Ids are fine.

Full error example (endless loop creates these errors infinitely):

AuraError
    $stackFrames$: (9) [StackFrame, StackFrame, StackFrame, StackFrame, StackFrame, StackFrame, StackFrame, StackFrame, StackFrame]
    $stackTrace$: 
        list.forEach.field()@https://xe323-dev-ed.lightning.force.com/components/force-lds-records.js:244:27
        constructKeyFromStringList()@https://xe323-dev-ed.lightning.force.com/components/force-lds-records.js:242:18
        RecordUiCacheKeyBuilder.build()@https://xe323-dev-ed.lightning.force.com/components/force-lds-records.js:251:27
        Object.getRecordUi()@https://xe323-dev-ed.lightning.force.com/components/force-lds-records.js:1575:154
        Object.wireRecordUi()@https://xe323-dev-ed.lightning.force.com/components/lightning/recordViewForm.js:26:46
        afterRender()@https://xe323-dev-ed.lightning.force.com/components/lightning/recordViewForm.js:79:16"
        action: null
    component: 
        lightning:recordViewForm
        componentStack: 
            [lightning:recordViewForm] > [auraStorage:fuelGauge] > [auraStorage:fuelGauge] > [auraStorage:fuelGauge] > [force:outputLookup] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [ui:modal] > [uns:notifications] > [uns:notifications] > [ui:modal] > [ui:modal] > [ui:modal] > [auraStorage:fuelGauge] > [ui:modal] > [setup:gear] > [home:fp0M00Y000000ktOtSAI__pageWithoutSobject__1507626421000] > [aura:component] > [aura:html] > [aura:html] > [aura:html] > [aura:html] > [aura:html] > [aura:html] > [flexipage:runtimeComponent] > [aura:component] > [aura:html] > [aura:html] > [aura:expression] > [aura:expression] > [c:elfElkHomepageOverview] > [aura:component] > [aura:html] > [aura:html] > [aura:html] > [aura:html] > [aura:html] > [aura:html] > [aura:html] > [aura:html] > [aura:iteration] > [aura:iteration] > [aura:html] > [aura:html] > [aura:html] > [aura:html] > [lightning:recordViewForm]
        data: null
        handled: falseid: -23967233
        message: 
            afterRender threw an error in 'lightning:recordViewForm' [recordIds should be a string list, but received ]"
            name: "TypeError"reported: falseseverity: undefined
        stackFrames: (9) [StackFrame, StackFrame, StackFrame, StackFrame, StackFrame, StackFrame, StackFrame, StackFrame, StackFrame]
        stackTrace: 
            list.forEach.field()@https://xe323-dev-ed.lightning.force.com/components/force-lds-records.js:244:27
            constructKeyFromStringList()@https://xe323-dev-ed.lightning.force.com/components/force-lds-records.js:242:18
            RecordUiCacheKeyBuilder.build()@https://xe323-dev-ed.lightning.force.com/components/force-lds-records.js:251:27
            Object.getRecordUi()@https://xe323-dev-ed.lightning.force.com/components/force-lds-records.js:1575:154
            Object.wireRecordUi()@https://xe323-dev-ed.lightning.force.com/components/lightning/recordViewForm.js:26:46
            afterRender()@https://xe323-dev-ed.lightning.force.com/components/lightning/recordViewForm.js:79:16"
        stacktraceIdGen: "lightning:recordViewForm$list.forEach.field"__proto__: Error
            at new <anonymous> (https://xe323-dev-ed.lightning.force.com/auraFW/javascript/nRhh35vBDuL0P3mlbcWPkg/aura_proddebug.js:7126:23)
            at https://xe323-dev-ed.lightning.force.com/auraFW/javascript/nRhh35vBDuL0P3mlbcWPkg/aura_proddebug.js:2691:1

one.app#/home:1

I'm not sure, if it is designed to be used in iteration - but honestly: inside iterations is exactly where we need it...

Now after the experiences with <force:inputField> can we count on <lightning:outputField> and <lightning:inputField> or do we really need to create our own set of smartfields finally?

Uwe Heim
  • 28,350
  • 18
  • 115
  • 283

1 Answers1

2

Edit by Uwe Heim:

I made two mistakes:

  • I needed to use "{!item.Id}" instead of "{item.Id}" notice !
  • I used the wrong attribute type Object but needed to use Opportunity[]

Original Answer:

If you read debug you will find reason of this issue.

[Record ID {item.Id} is not a valid record ID.]

It will be "{!item.Id}" instead of "{item.Id}" notice !

<aura:attribute name="Opportunities" type="Object" default="{}" />
<aura:iteration items="{! v.Opportunities }" var="item">
    <lightning:recordViewForm recordId="{!item.Id}" objectApiName="Opportunity">
        <lightning:outputField fieldName="CloseDate" />
    </lightning:recordViewForm>
</aura:iteration>
Uwe Heim
  • 28,350
  • 18
  • 115
  • 283
Himanshu
  • 10,486
  • 5
  • 20
  • 33
  • Thanks for pointing me to the typo - fixing brought up only a new error. – Uwe Heim Oct 12 '17 at 13:29
  • This should fix this. <aura:attribute name="Opportunities" type="Opportunity[]" default="{}" /> – Himanshu Oct 12 '17 at 13:30
  • Yes, it does, thanks a lot!! However this will lead me to the next question (I will as a new one for that): the performance is slow as hell (5 seconds rendering time for 12 line items). So still not usable, I guess... – Uwe Heim Oct 12 '17 at 13:34