4

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>
  • Trailhead's validation does not work properly. view detail explanation in the answer(s) below – glls Jul 11 '17 at 18:32
  • consider accepting an answer if any of them helped. Thanks! – glls Oct 14 '17 at 18:13
4

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.

  • 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 '17 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

  • This is infuriating. I spent way too much time figuring out it can't handle the aura:id when validating – Kyle Thornton Jul 14 '17 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 '17 at 17:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.