Lightning Data Service Basics for Aura Components challenge passed/Completed ||Trailhead Challenge||Lightning Data Service||LDS

Lightning Data Service :

Lightning data service is similar to Standard controller in Visualforce page .We can make the server calls without using server side controller.
Lightning Data Service Basics for Aura Components trailhead module provides clear information about LDS with hands on examples .
If you find any difficulty in passing the challenge ,Please compare your code with the below written code

1.Manipulate Records with force:recordData

Use force:recordData to create two Aura components that display and edit the details of an account

Create Aura components to manage accounts. Use force:recordData to create a component that displays the details of a standard account record, and another component that allows for quick edits to that record.

Solution :Create accDisplay component with the particulars mentioned in the trailhead challenge .If you face any issues please compare your code with the below code and modify accordingly.  

accDisplay.cmp 

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="record" type="object"/>
    <aura:attribute name="accountRecord" type="object"/>
    <aura:attribute name="recordError" type="String"/>
    
    <force:recordData aura:id="displayrecord"
                      layoutType="FULL"
                      recordId="{!v.recordId}"
                      targetError="{!v.recordError}"
                      targetRecord="{!v.record}"
                      targetFields="{!v.accountRecord}"
                      mode="VIEW"/>
    
    <lightning:card iconName="standard:account" title="{!v.accountRecord.Name}">
        <div class="slds-p-horizontal--small"> 
            <p class="slds-text-heading--small">
                <lightning:formattedText title="Industry" value="{!v.accountRecord.Industry}"/> </p>
            <p class="slds-text-heading--small">
                <lightning:formattedText title="Description" value="{!v.accountRecord.Description}"/> </p>
            <p class="slds-text-heading--small">
                <lightning:formattedPhone title="Phone" value="{!v.accountRecord.Phone}"/> </p>
        </div>
    </lightning:card>
    
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}
        </div>
    </aura:if>
</aura:component>

2.accEdit.cmp

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="record" type="object"/>
    <aura:attribute name="accountRecord" type="object"/>
    <aura:attribute name="recordError" type="String"/>
    
    <force:recordData aura:id="recordEditor"
           layoutType="FULL"
           recordId="{!v.recordId}"
           targetError="{!v.recordError}"
           targetRecord="{!v.record}"
           targetFields="{!v.accountRecord}"
           mode="EDIT"/>

    <lightning:card iconName="action:edit" title="Edit Account">
        <div class="slds-p-horizontal--small">
            <lightning:input label="Account Name" value="{!v.accountRecord.Name}"/>
            <br/>
            <lightning:button label="Save Account" variant="brand" onclick="{!c.handleSaveRecord}" />
        </div>
    </lightning:card>
     <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}
        </div>
    </aura:if>
</aura:component>


accEdit.JS (Java ScriptController):

({
    handleSaveRecord: function(component, event, helper) {
        component.find("recordEditor").saveRecord($A.getCallback(function(saveResult) {
            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                console.log("Save completed successfully.");
            } else if (saveResult.state === "INCOMPLETE") {
                console.log("User is offline, device doesn't support drafts.");
            } else if (saveResult.state === "ERROR") {
                console.log('Problem saving record, error: ' + 
                           JSON.stringify(saveResult.error));
            } else {
                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
            }
        }));}
})

2.Handle Record Changes and Errors

Use force:recordData to create a component that shows an error message if it is loaded with invalid data Build on the components you created in the previous unit challenge by adding notification handling to your components. If the edits in your editable component create an error, make sure the display component shows an error message.

accEdit.cmp:
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="record" type="object"/>
    <aura:attribute name="accountRecord" type="object"/>
    <aura:attribute name="recordSaveError" type="String"/>
    
    <force:recordData aura:id="recordEditor"
                      layoutType="FULL"
                      recordId="{!v.recordId}"
                      targetError="{!v.recordSaveError}"
                      targetRecord="{!v.record}"
                      targetFields="{!v.accountRecord}"
                      mode="EDIT"
                      recordUpdated="{!c.handleRecordUpdated}"/>
    
    <lightning:card iconName="action:edit" title="Edit Account">
        <div class="slds-p-horizontal--small">
            <lightning:input label="Account Name" value="{!v.accountRecord.Name}"/>
            <br/>
            <lightning:button label="Save Account" variant="brand" onclick="{!c.handleSaveRecord}" />
        </div>
    </lightning:card>
    <aura:if isTrue="{!not(empty(v.recordSaveError))}">
        <div class="recordError">
            {!v.recordSaveError}
        </div>
    </aura:if>

</aura:component>


accEdit.JS(Java ScriptController):

({
    handleSaveRecord: function(component, event, helper) {
        component.find("recordEditor").saveRecord($A.getCallback(function(saveResult) {
            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                console.log("Save completed successfully.");
            } else if (saveResult.state === "INCOMPLETE") {
                console.log("User is offline, device doesn't support drafts.");
            } else if (saveResult.state === "ERROR") {
                console.log('Problem saving record, error: ' + 
                            JSON.stringify(saveResult.error));
            } else {
                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
            }
        }));},
    
    
    handleRecordUpdated: function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "CHANGED") {
            // get the fields that are changed for this record
            var changedFields = eventParams.changedFields;
            console.log('Fields that are changed: ' + JSON.stringify(changedFields));
            // record is changed so refresh the component (or other component logic)
            var resultsToast = $A.get("e.force:showToast");
            resultsToast.setParams({
                "title": "Saved",
                "message": "The record was updated."
            });
            resultsToast.fire();
        } else if(eventParams.changeType === "LOADED") {
            // record is loaded in the cache
        } else if(eventParams.changeType === "REMOVED") {
            // record is deleted and removed from the cache
        } else if(eventParams.changeType === "ERROR") {
            console.log('Error: ' + component.get("v.error"));
            component.set("v.recordSaveError",v.error);
        }
    }

})

We hope you are clear with the challenge now .

If you still require further clarifications,Please let us know in the comments .

Happy Learning☺☺☺