Lightning Data Service TargetRecord on PageLoad

Question

I'm trying to use Lightning Data Service to retrieve fields without Apex/SOQL but I'm receiving errors due to my targetRecord being null on a page load. I have a function in my JS controller which I'm trying to invoke on loading the page but when I try to access the record via

var problemRec = component.get("v.problemRecord");

My problemRec is always null. If I wait for the page to load and then invoke my action/function from a button my problemRec is never null. It seems I can't invoke it until the page has loaded.

I've tried the following to get this to work. To call my JS Controller function from

<aura:handler name="render" value="{!this}" action="{!c.setupData}"/>

when this failed I then tried to call my function from afterRender in my JS Renderer but again my problemRec is null. I've even tried "if(document.readyState === 'complete)' in my afterRender but again it fails.

I'm assuming the issue is because I'm trying to access a targetRecord but the Lightning Component loads before my record detail itself completes loading.

I have <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId"> in my aura definition.

I've tried the following in my recordData.

<force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      targetRecord="{!v.problemRecord}"
                      targetFields="{!v.targetFields}"
                      fields="Field1__c,Field2__c,Field3__c,
                      Field4__c"
                      mode="VIEW"/>

<force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      targetRecord="{!v.problemRecord}"
                      fields="Field1__c,Field2__c,Field3__c,
                      Field4__c"
                      mode="VIEW"/>

<force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      targetRecord="{!v.problemRecord}"
                      targetFields="{!v.targetFields}"
                      mode="VIEW"/>

<force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      targetRecord="{!v.problemRecord}"
                      targetFields="{!v.targetFields}"
                      layoutType="FULL"/>

And a few other attempts.

I'm sure I'm just doing something wrong.

Can someone confirm, when using Lightning Data Service where the targetRecord should be set and available when the page loads, what is required for doing this? Any basic example would be appreciated. As mentioned my targetRecord is set ok if I click on a button which invokes my controller action after the page has already been loaded.

Answer 1

Please follow the Salesforce documentation for force:recordData.

As per the documentation "To perform tasks beyond rerendering the record when the record changes, handle the recordUpdated event. You can handle record loaded, updated, and deleted changes, applying different actions to each change type."

In your case invoke your other function once eventParams.changeType === "LOADED" is true.

Component:

.................
<force:recordData aura:id="recordLoader"
  recordId="{!v.recordId}"
  layoutType="FULL"
  targetRecord="{!v.record}"
  targetFields="{!v.simpleRecord}"
  targetError="{!v.recordError}"
  recordUpdated="{!c.handleRecordUpdated}"
  />
..............

Controller:

({
    handleRecordUpdated: function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "LOADED") {
           // record is loaded (render other component which needs record data value)
            console.log("Record is loaded successfully.");
        } else if(eventParams.changeType === "CHANGED") {
            // record is changed
        } else if(eventParams.changeType === "REMOVED") {
            // record is deleted
        } else if(eventParams.changeType === "ERROR") {
            // there’s an error while loading, saving, or deleting the record
        }
    }
})