function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Emily CottonEmily Cotton 

Trailhead Error - Lightning Component Basics - Attributes & Expressions

Hi Board. Has anyone had any success completing the Lightning Component Basics - Attributes & Expressions module?   I attempted the challenge using the Trailhead playground. And think what I did is correct. Yet I get the following error... 

"Challenge Not yet complete... here's what's wrong: The Quantity field is not using the correct output component."

Following is the component I have written:

Component Bundle Name : "campingListItem" 
<aura:component >
    
    <aura:attribute name="item" type="Camping_Item__c" required="True"/>
    
    <ui:outputText value="{!item.Name}"/>
    <ui:outputCurrency value="{!item.Price__c}"/>
    <ui:outputNumber value="{!item.Quantity__c}"/>
    <ui:outputCheckbox value="{!item.Packed__c}"/>
	
</aura:component>

User-added image

Object schema is :   Name - Text (80),  Packed__c - Checkbox,  Price__c - Currency (16,2), Quantity__c - Number (18,0).

What could I be doing wrong. Any advice?

 
kumar_arunkumar_arun
Hi Emily,

Use below code snippet. It should work. 
<aura:component >

  <aura:attribute name="item" type="camping_item__c"/>

  <p>Name:
      <ui:outputText value="{!v.item.Name}"/>
  </p>
  <p>Price:
      <ui:outputCurrency value="{!v.item.Price__c}"/>
  </p>
  <p>Quantity:
      <ui:outputNumber value="{!v.item.Quantity__c}"/>
  </p>
  <p>Packed?:
      <ui:outputCheckbox value="{!v.item.Packed__c}"/>
  </p>

</aura:component>

If it helps, Please mark it as BEST Answer.
Emily CottonEmily Cotton
Thank you Arun.
But that doesn't work. The error now suggests to use lightning:input to display the Packed checkbox. I refactored code like this now: 
<aura:component >
    
    <aura:attribute name="item" type="Camping_Item__c" required="True"/>
    
    <ui:outputText value="{!v.item.Name}"/>
    <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    <lightning:formattedNumber value="{!v.item.Quantity__c}" style="decimal"/>
    <lightning:input type="checkbox" label="Packed?" name="packed" checked="{!v.item.Packed__c}"/>      
    
</aura:component>

Error:
Challenge Not yet complete... here's what's wrong: 
The Packed field is either not using the lightning input component, the checked value of the item's Packed__c attribute or the correct type of input.​

:(  Quite frustrating.
Ginto MathewGinto Mathew
Hi Emily,
Can you try converting the lightning 'checkbox' to 'toggle'? 
<lightning:input type="toggle" 
                             label="Packed?"
                             name="packed"
                             class="slds-p-around--small"
                             checked="{!v.item.Packed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"/>
Let us know if this worked.
 
kishore eppakishore eppa
Hi Emily, 
Try below code its working for me 

<aura:component >
  <aura:attribute name="item" type="Camping_Item__c" required="true"/>
        <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="Number"/>
    </p>
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}" style="Number"/>
    </p>
    <p>
        Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
     </p> 
     <div>
         <lightning:button label="Packed!" onClick="{!c.packItem}"/>
    </div>
</aura:component>
Apoorv Shukla 8Apoorv Shukla 8
HI Kishore,

Code Works perfectly, only change required is the style of the Price field from style="Number" to style="Currency".

Thanks
alberto martinez 7alberto martinez 7
HI Kishore,

Thanks a lot.
As apoorv said...you only have to change the style of the Price field from style="Number" to style="Currency" and the code runs perfectly.
Like this:

<aura:component >
  <aura:attribute name="item" type="Camping_Item__c" required="true"/>
        <p>Price:
            <lightning:formattedNumber value="{!v.item.Price__c}" style="Currency"/>
    </p>
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}" style="Number"/>
    </p>
    <p>
        Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
     </p> 
     <div>
         <lightning:button label="Packed!" onClick="{!c.packItem}"/>
    </div>
</aura:component>
gowtham murugesangowtham murugesan
hi,

For Attributes and Expressions Trail, below this code work,


<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" 
                    required="true"
                    default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:true}"
                    />
        <p> The Item is <ui:outputText value ="{!v.item}"></ui:outputText></p>

        <ui:outputText value="{!v.item.Name}"/>
   <lightning:input type="toggle" label="Packed" name="togglevalue" checked="{!v.item.Packed__c}" />
    <lightning:formattedNumber value="{!v.item.Price__c}" style="currency" currencyCode="USD" currencyDisplayAs="symbol"/>

    <lightning:formattedNumber  value="{!v.item.Quantity__c}"/>
</aura:component>

Thankyou
Madhumitha M 3Madhumitha M 3
Hi,
<aura:component >
     <aura:attribute name="item" type="Camping_Item__c" required="true"/>
        <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="Currency"/>
    </p>
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}" style="Number"/>
    </p>
    <p>
        Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
     </p> 
     <div>
         <lightning:button label="Packed!" onClick="{!c.packItem}"/>
    </div>
</aura:component>