+ Start a Discussion
Emilien Guichard 40Emilien Guichard 40 

Trailhead module Lightning Data Service Basics - Manipulate Records with force:recordData unable to complete challenge

Hi,
I am trying to complete the challenge Lightning Data Service Basics - Manipulate Records with force:recordData and I am getting the followling error:
Challenge Not yet complete... here's what's wrong:
Could not find either the 'accEdit' component, 'accDisplay' component or both components in the Account Record Page.
This is strange because the 2 components are indeed on the page:
User-added image
Could please assist ?
Thanks for your help.
 
Best Answer chosen by Emilien Guichard 40
Emilien Guichard 40Emilien Guichard 40
Thanks for help, i did it again on another org and it passes, strange...

All Answers

Raj VakatiRaj Vakati
AccDisplay : 
<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome">

    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="record" type="Object" />
    <aura:attribute name="accountRecord" type="Object" />

     <force:recordData recordId="{!v.recordId}"
          targetRecord="{!v.record}"
          targetFields="{!v.accountRecord}"
          fields="Id, Name"/>

    <ui:outputText value="{!v.accountRecord.Name}"/>
    <ui:outputText value="{!v.accountRecord.Industry}"/>
    <ui:outputTextArea value="{!v.accountRecord.Description }"/>
    <ui:outputPhone value="{!v.accountRecord.Phone}"/>

</aura:component>
AccEdit : 

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
    
    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="record" type="Object" />
    <aura:attribute name="accountRecord" type="Object" />
    <aura:attribute name="recordSaveError" type="String" default=""/>
    
    
    
    <force:recordData recordId="{!v.recordId}" aura:id="recordEditer"
                      targetRecord="{!v.accountRecord}"
                      targetFields="{!v.accountRecord}"
                      fields="Name"
                      Mode="Edit"/>
    
    
    
    <ui:outputText value="Edit Account"  />
    <lightning:input aura:id="recordName" name="accountRecord" label="Name"
                     value="{!v.accountRecord.Name}" />
    
    <ui:button label="Save Account" press="{!c.handleSaveRecord}" />
    <aura:if isTrue="{!not(empty(v.recordSaveError))}">
        <br />
        Error: <ui:outputText value="{!v.recordSaveError}"/>
    </aura:if>
</aura:component>

({
    handleSaveRecord : function(component, event, helper) {
        var recordLoader = component.find("recordEditer");
        recordLoader.saveRecord($A.getCallback(function(saveResult) {
            if (saveResult.state === "ERROR") {
                var errMsg = "";
                // saveResult.error is an array of errors, 
                // so collect all errors into one message
                for (var i = 0; i < saveResult.error.length; i++) {
                    errMsg += saveResult.error[i].message + "\n";
                }
                cmp.set("v.recordSaveError", errMsg);
            } else {
                cmp.set("v.recordSaveError", "");
            }
        }));
    }
})

 
Alain CabonAlain Cabon
Here is my layout:  I used the panel on the right side.

User-added image

User-added image

Your layout should work too (strange).

Alain
Emilien Guichard 40Emilien Guichard 40
Thanks for help, i did it again on another org and it passes, strange...
This was selected as the best answer
Shreyas Dhond 16Shreyas Dhond 16
Delete any other Lightning Record Pages on the account object from the Setup Menu and it works fine!
shashi kumar 58shashi kumar 58
Can some one help me i added the both component in Account page but still i am getting the Error message like "Challenge Not yet complete... here's what's wrong: 
Could not find either the 'accEdit' component, 'accDisplay' component or both components in the Account Record Page."

if attached the screenshot step by step ... Tried in two different environment but no luck..

Please help.

Shashi
shashi kumar 58shashi kumar 58
Lightning Data Service Basics
Manipulate Records with force:recordData 
Step 1: Create accEdit.cmp
 
<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">

    <aura:attribute name="recordId" type="String" />
    <aura:attribute name="recordError" type="String" />
    <aura:attribute name="record" type="Object" />
    <aura:attribute name="accountRecord" type="Object" />
    <aura:attribute name="recordSaveError" type="String" default=""/>

	<force:recordData aura:id="recordEditor"
                  layoutType="FULL"
                  recordId="{!v.recordId}"
                  targetError="{!v.recordError}"
                  targetRecord="{!v.record}"
                  targetFields="{!v.accountRecord}"
                  fields="Name"
                  mode="EDIT" />

	<!-- Display an editing form -->
  <lightning:input label="Account Name" value="{!v.accountRecord.Name}"/>
	<lightning:button label="Save Account"  value="{!c.handleSaveRecord}" />

  <aura:if isTrue="{!v.recordSaveError}">
       <br />
       <div class="recordError">
           {!v.recordSaveError}
       </div>
    </aura:if>

</aura:component>
Step 2: Create Display component accDisplay.cmp
<aura:component description="accDisplay" implements="flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute name="recordId" type="String" />
<aura:attribute name="record" type="Object" />
<aura:attribute name="accountRecord" type="Object" />

<force:recordData recordId="{!v.recordId}"
                  targetRecord="{!v.record}"
                  targetFields="{!v.accountRecord}"
                  fields="Id, Name"/>

<label class="slds-form-element__label">Name: </label>

    <lightning:card title="{!v.accountRecord.Name}" />

<label class="slds-form-element__label">Industry: </label>
<lightning:formattedText title="Industry" value="{!v.accountRecord.Industry}"/>

<label class="slds-form-element__label">Description: </label>
<!--<lightning:card title="{!v.accountRecord.Description}"/>-->
    <lightning:formattedText title="Description" value="{!v.accountRecord.Description}" />

<label class="slds-form-element__label">Phone: </label>
<lightning:formattedPhone title="Phone" value="{!v.accountRecord.Phone}"/>

</aura:component>

Step 3: Controller class for accEditController.js
({
    handleSaveRecord: function(cmp, event, helper) {
        cmp.find("recordEditor").saveRecord($A.getCallback(function(saveResult) {
            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                console.log("Save completed successfully.");
                cmp.set("v.recordSaveError", '');
            } else if (saveResult.state === "INCOMPLETE") {
                console.log("User is offline, device doesn't support drafts.");
                cmp.set("v.recordSaveError", '');
            } else if (saveResult.state === "ERROR") {
                var errMsg = "";
                // console.log('Problem saving record, error: ' + JSON.stringify(saveResult.error));
                // saveResult.error is an array of errors,
                // so collect all errors into one message
                for(var i = 0; i < saveResult.error.length; i++) {
                    errMsg += saveResult.error[i].message + "\n";
                }
                cmp.set("v.recordSaveError", errMsg);

            } else {
                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
                cmp.set("v.recordSaveError", "");
            }
        }));
    }})

After all the steps create Lighting App builder
Click New-->Record Page-->Give "Account Record Page"-->Object "Account"--->Select Header and Right Sidebar-->In side Side put both the component -->Save-->Activation-->Make it default org.

Please markit as best Answer and like...


 
anusha Bandaru 7anusha Bandaru 7
@shashi kumar :

I tried your code but i am getting below error.

Failed to save accDisplay.cmp: The component must implement at least one of flexipage:availableForAllPageTypes,home:availableForDesktop interface.: Source

Can you please help me to resolve this issue.
Many thanks
anusha Bandaru 7anusha Bandaru 7
@shashi kumar:
I added flexipage:availableForAllPageTypes to implements and it is working now.

Thankyou shashi:-)
Rajani PolampalliRajani Polampalli
@shashi kumar,

Thank you.It works fine..
shashi kumar 58shashi kumar 58
Hi @anusha Bandaru 7, @Rajani Polampalli

Please like my answer, congratulation...


Regards,
Shashi Kumar
Rajat Sharma 84Rajat Sharma 84

Hi Please find an answer for the trailhead module, if you need any help please feel free to left the message and appreciate if you would click the like option as well.

I also have slightly extra code to practice the trailhead module concept as well.

accEdit.cmp
 

<!--
 - Created by e3kp17f on 1/24/2019.
 -->

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >

    <aura:attribute name="accountRecord" type="Object" />
    <aura:attribute name="recordError" type="String"/>
    <aura:attribute name="simpleNewAccount" type="Object" />
    <aura:attribute name="recordSaveError" type="String"/>


    <force:recordData aura:id="RecordEdit"
                      recordId="{!v.recordId}"
                      layoutType="FULL"
                      targetRecord="{!v.accountRecord}"
                      targetError="{!v.recordError}"
                      targetFields="{!v.simpleNewAccount}"
                      fields="Name,Industry,Description,Phone"
                      mode="EDIT"
                      recordUpdated="{!c.handleRecordUpdated}"/>

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

    <br/>

    <div >
        <lightning:card iconName="action:edit" title="Edit Account">
            <div class="slds-p-horizontal--small">
                <lightning:input label="Account Name" aura:id="recordName" name="recordName" required="true"
                                 value="{!v.simpleNewAccount.Name}"/>
                <br/>
                <lightning:button label="Save Account" variant="brand"
                                  onclick="{!c.handleSaveRecord}"/>
            </div>

        </lightning:card>
    </div>

    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}</div>
    </aura:if>

    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordSaveError))}">
        <div class="recordError">
            {!v.recordSaveError}</div>
    </aura:if>

</aura:component>
accDisplay.cmp
<!--
 - Created by e3kp17f on 1/24/2019.
 -->

<aura:component implements="flexipage:availableForRecordHome, force:hasRecordId"> <!--inherit recordId attribute-->
    <aura:attribute name="account" type="Object"
                    description="The record object to be displayed"/>
    <aura:attribute name="accountRecord" type="Object"
                    description="A simplified view record object to be displayed"/>
    <aura:attribute name="recordError" type="String"
                    description="An error message bound to force:recordData"/>
    <force:recordData aura:id="AccountRecordCreator"
                      layoutType="FULL"
                      recordId="{!v.recordId}"
                      targetError="{!v.recordError}"
                      targetRecord="{!v.account}"
                      targetFields ="{!v.accountRecord}"
                      fields="Name,Industry,Description,Phone"
                      mode="VIEW"/>

    <!-- Display a lightning card with details about the record -->
    <div class="Record Details">
        <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>
    </div>
    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordError))}">
        <div class="recordError">
            {!v.recordError}</div>
    </aura:if>
</aura:component>

accEditController.js
/**
 * Created by e3kp17f on 1/24/2019.
 */
({
    handleSaveRecord: function (component, event, helper) {
        console.log('inside the HandleSave Record method');
        var recordEditor = component.find("RecordEdit");
        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") {
                var errMsg = "";
                // saveResult.error is an array of errors,
                // so collect all errors into one message
                for (var i = 0; i < saveResult.error.length; i++) {
                    errMsg += saveResult.error[i].message + "\n";
                }
                cmp.set("v.recordSaveError", errMsg);
            }
            else if (!(saveResult.state === "ERROR")) {
                cmp.set("v.recordSaveError", "");
            }
            else {
                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
            }
        }));

    },
    // Control the component behavior here when record is changed (via any component)
    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"));
        }
    }
})

Go to the Account Record page
Click on the Edit Page
On the lightning page, please add both the components accDisplay and accEdit
Save it as default org.
​​​​​​​
Madhumitha M 3Madhumitha M 3
hi,
Help me to resolve this issue
Could not find either the 'accEdit' component, 'accDisplay' component or both components in the Account Record Page.
raj_sfdccraj_sfdcc
hi  all,

i have completed the module recently .if you face any errors please verify with the code mentoned in the below post :
Lightning Data Service module (https://salessforcehacks.blogspot.com/2020/02/lightning-data-service-basics-for-aura.html)