force:recordData Individual Fields Access

Question

I cannot seem to get the fields from force:recordData available to my component. I'm fairly confident I have the syntax wrong, but I can't find the proper way to reference the data.

This code in the component works perfectly:

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

<!--init is triggered on render and sets up columns and gets record data-->
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

<!-- Display a lightning card with details about the record -->
<div class="Record Details"> 
    <lightning:card iconName="standard:account" title="{!v.simpleRecord.Name}" >
        <div class="slds-p-horizontal--small">
            <p class="slds-text-heading--small">
                <lightning:formattedText title="Invention" value="{!v.simpleRecord.Invention__c}" /></p>
            <p class="slds-text-heading--small">
                 <lightning:formattedText title="Record Type" value="{!v.simpleRecord.RecordTypeId}" /></p>
        </div>
    </lightning:card>
</div>

I can get it to display the values that are obviously in the fields. However, I cannot get access to that same field in the js controller.

doInit : function(component, event, helper) {
    //get record type of initial record
    var passRecID = component.get("{!v.simpleRecord.RecordTypeId}");
    console.log('The recordID pulled is ' + passRecID);

When I do that code, I get this error:

The recordID pulled is null

Answer 1

I dont know if its a bug or Lightning Application Lifecyle, but Init event is called first even before the records are loaded with force:recordData.

You can test this behaviour by adding a button in your code and see same JS controller method returning you the required value.

<lightning:button variant="brand" label="Submit" onclick="{! c.doInit }" ></lightning:button>

---

Solution: It looks like you cannot use doInit event's functionality. There is a workaround for it. force:recordData has a recordUpdated method which is called when the record is initialized/changed. You can take advantage of this to call your logic instead of doInit.

Your code will now look like.

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

<!--Commenting Do init method.-->
<!--<aura:handler name="init" value="{!this}" action="{!c.doInit}" />-->