5

Can some one explain me how to use two separate components with Lightning Data Service, i tried the following code for accDisplay and accEdit for this challenge . My code worked as i expected but i got the following error! I am missing some thing, can some one explain me how LDS works with multiple componets!

Challenge Not yet complete... here's what's wrong: The 'accDisplay' Lightning Component does not appear to be displaying the 'Name' using 'ui:outputText' and the value 'v.accountRecord.Name

<!--accDisplay component-->
<aura:component 
implements="flexipage:availableForRecordHome,force:hasRecordId">
<aura:attribute name="accountRecord" type="Object" />
<force:recordData aura:id="AccountRecordCreator"
recordId="{!v.recordId}"
layoutType="FULL"
targetRecord="{!v.accountRecord}"
targetFields="{!v.simpleNewAccount}"
targetError="{!v.newContactError}"
              mode="VIEW"
/>




<!-- Display a header with details about the record -->
<div class="slds-form--stacked">
    <div class="slds-form-element">
        <label class="slds-form-element__label" for="recordName">Name: </label>
        <div class="slds-form-element__control">
          <ui:outputText class="slds-input" aura:id="recordName"
            value="{!v.simpleNewAccount.Name}" />
        </div>
        <label class="slds-form-element__label" 
         for="recordIndustry">Industry: </label>
        <div class="slds-form-element__control">
          <ui:outputText class="slds-input" aura:id="recordIndustry"
            value="{!v.simpleNewAccount.Industry}" />
        </div>
         <label class="slds-form-element__label" 
         for="recordDescription">Description: </label>
        <div class="slds-form-element__control">
          <ui:outputTextArea class="slds-input" aura:id="recordDescription"
            value="{!v.simpleNewAccount.Description}" />
        </div>
         <label class="slds-form-element__label" for="recordPhone">Phone: </label>
        <div class="slds-form-element__control">
          <ui:outputPhone class="slds-input" aura:id="recordPhone"
            value="{!v.simpleNewAccount.Phone}" />
        </div>
    </div>
</div>

</aura:component>

<!--accEdit-->
<aura:component 
implements="flexipage:availableForRecordHome,force:hasRecordId">

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

<force:recordData aura:id="AccountRecordCreator"
recordId="{!v.recordId}"
layoutType="FULL"
targetRecord="{!v.accountRecord}"
targetFields="{!v.simpleNewAccount}"
targetError="{!v.newContactError}"
              mode="EDIT"
/>

<ui:outputText class="slds-output" 
            value="Edit Account" />
 <lightning:input aura:id="recordName" name="accountRecord" label="Name"
              value="{!v.simpleNewAccount.Name}" />

 <lightning:button label="Save Account" onclick="{!c.handleSaveRecord}"
           variant="brand" class="slds-m-top--medium"/>
 </aura:component>
2
  • Trailhead's validation does not work properly. view detail explanation in the answer(s) below
    – glls
    Jul 11, 2017 at 18:32
  • consider accepting an answer if any of them helped. Thanks!
    – glls
    Oct 14, 2017 at 18:13

2 Answers 2

5

The challenge mentions "Create a display component named accDisplay.cmp using the record attribute named accountRecord", however you're using the attribute named simpleNewAccount.

Try to use the correct attribute name and it should be ok.

1
  • This helped me to pass this challenge. i am missing the account attribute for the target record and accountRecord for target fields which solved the problem. thanks for your suggestion!
    – ak_1
    Jun 23, 2017 at 13:38
4

This Trailhead Validation doesnt seem to handle class and aura:id attributes when used in these components PRIOR to the value attribute:

ui:outputText
ui:outputPhone
ui:outputTextArea

If you copy pasted the markup from the Trailhead module and changed attribute values and so on, consider removing the class and aura:id's names of the Aura components mentioned above.

For Example:

<ui:outputText class="slds-input" aura:id="recordName"
                value="{!v.accountRecord.Name}" required="true"/>

consider removing un-required attributes to the following:

<ui:outputText value="{!v.accountRecord.Name}"/>

or Reorder the attributes as follows:

<ui:outputText value="{!v.accountRecord.Name}" class="slds-input" 
                aura:id="recordName"/>

Lightning:input seems to be having other validation issues, be careful with unsupported attributes from the documentation

2
  • This is infuriating. I spent way too much time figuring out it can't handle the aura:id when validating Jul 14, 2017 at 16:08
  • @Kyle Thornton, I hope this helped you pass the challenge. consider up voting if this answer proved useful. cheers
    – glls
    Jul 14, 2017 at 17:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .