Dynamically load record using force:recordData

You must be aware about standard controller for visualforce pages, it allows you to access record field values, create or update the record without using apex controller. Similar capability is being provided in custom lightning components using force:recordData which is called lightning data service. You need to pass record id which can be captured by implementing component using force:hasRecordId interface.

This is straight forward, if the component is placed on record page, record id will be available in recordId attribute. Using lightning data service, the field information will be available to use in component. But what if there are list of records and based upon the link click you want to fetch that record information without using APEX controller.

Here I have build a demo lightning component, having a text field to input id of contact record. Once hit on “Fetch Data” button, it will fetch FirstName, LastName, Email fields of that contact. This is all done with the help of lightning data service. No apex controller is involved.

Lets jump into the code stating with lightning component.

Lightning Component:

<aura:component >
    <aura:attribute name="recordId" type="Id"/>
    <aura:attribute name="contactRecord" type="Object"/>
    <aura:attribute name="recordLoadError" type="String"/>
    
    <force:recordData aura:id="recordLoader"
                      recordId="{!v.recordId}"
                      fields="FirstName,LastName,Email"
                      targetFields="{!v.contactRecord}"
                      targetError="{!v.recordLoadError}"
                      />
    <lightning:layout multipleRows="true">
        <lightning:layoutItem size="4" padding="around-small">
            <lightning:card class="section">
                <lightning:input label="Enter Contact Id" value="{!v.recordId}"/>
                <div class="slds-text-align_center slds-p-vertical_x-small">
                    <lightning:button label="Fetch Data" title="Fetch Data" onclick="{! c.fetchData }"/>
                </div>
            </lightning:card>	
        </lightning:layoutItem>
        <lightning:layoutItem size="8" padding="around-small">
            <lightning:card class="section">
                First Name: <lightning:formattedText value="{!v.contactRecord.FirstName}" /><br/>
                Last Name: <lightning:formattedText value="{!v.contactRecord.LastName}" /><br/>
                Email: <lightning:formattedText value="{!v.contactRecord.Email}" />
            </lightning:card>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

• force:recordData is used to fetch the field values based upon the id passed by recordId attribute.
• Input contact record id with the help of lightning:input and store in recordId attribute.
• Button Fetch Data is calling fetchData method from lightning controller.
• Another lightning section is used to output the contact information fetched by force:recordData.

Lightning Controller:

({
	fetchData : function(component, event, helper) {
        var RecordId = component.get("v.recordId");
		component.find("recordLoader").set("v.recordId", RecordId);
        component.find("recordLoader").reloadRecord();
	}
})

• Get the record id inputted by user
• Set the recordId attribute of force:recordData with newly inputted record id.
• Refresh the record information as per the new id provided. This is important.

Lightning Style:

.THIS .section{
    padding: 10px;
}

This is not mandatory, just a styling to put padding inside lightning:cards.

Lightning Application:

<aura:application extends="force:slds">
      <c:Dynamic_Data_Service></c:Dynamic_Data_Service>
</aura:application>

This is not mandatory, call the component with the name you have given.

Above logic you can utilize to provide delete functionality in lightning:datatable. I will be having new post on this topic soon.