You need to sign in to do that
Don't have an account?
Lightning Components Basics: Attributes & Expressions Trail
The following won't validate, but won't pass the validation in this trail. Quantity field is howver using the correct field. Thoughts?

<aura:component>
<aura:attribute name="item" type="Camping_Item__c" required="true"/>
<ui:outputText value="{!v.item.Name}"/>
<ui:outputCheckbox value="{!v.item.Packed__c}"/>
<ui:outputCurrency value="{!v.item.Price__c}"/>
<ui:outputNumber value="{!v.item.Quantity}"/>
</aura:component>
<aura:component>
<aura:attribute name="item" type="Camping_Item__c" required="true"/>
<ui:outputText value="{!v.item.Name}"/>
<ui:outputCheckbox value="{!v.item.Packed__c}"/>
<ui:outputCurrency value="{!v.item.Price__c}"/>
<ui:outputNumber value="{!v.item.Quantity}"/>
</aura:component>
The challenge requires you to create three custom fields with appropriate output components. Here in the above code Quantity is not custom field.
You can take help from the following code:
Hope this help you to pass the challenge.
Regards,
Ajay
Jonathan,
Also notice that your *Quantity* field name is not formatted as a custom one.
It should be
instead of
Jeff Douglas
Trailhead Developer Advocate
<aura:component >
<aura:attribute name="item" type="Camping_Item__c[]" required="True" />
<p><ui:outputText value="{!'Name: ' + v.item.Name}"/></p>
<p><ui:outputCurrency value="{!'Price: ' + v.item.Price__c}"/></p>
<p><ui:outputNumber value="{!'Quantity: ' + v.item.Quantity__c}"/></p>
<p><ui:outputCheckbox value="{!'Packed: ' + v.item.Packed__c}"/></p>
</aura:component>
<aura:component >
<aura:attribute name="item" type="Camping_Item__c[]" required="True"
default="{Name:'ABC', Price__c:100, Quantity__c:1, Packed__c:false}" />
Name: <ui:outputText value="{!v.item.Name}"/>
Price: <ui:outputCurrency value="{!v.item.Price__c}"/>
Quantity: <ui:outputNumber value="{!v.item.Quantity__c}"/>
Packed: <ui:outputCheckbox value="{!v.item.Packed__c}"/>
<ui:button label="Packed!" press="{!c.packItem}" />
</aura:component>
<aura:component >
<aura:attribute name ="item" type= "Camping_Item__c" required = "true"/>
Name: <ui:outputText value="{!v.item.Name}"/>
<p>Price:
<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
</p>
<p>Quantity :
<lightning:formattedNumber value="{!v.item.Quantity__c}"/>
</p>
<p>Packed:
<lightning:input type="toggle" label="Packed?" checked="{!v.item.Packed__c}"/>
</p>
</aura:component>
<aura:component >
<aura:attribute name="item" type="Camping_Item__c[]" required="True"
default="{Name:'ABC', Price__c:100, Quantity__c:1, Packed__c:false}" />
Name: <ui:outputText value="{!v.item.Name}"/>
Price: <ui:outputCurrency value="{!v.item.Price__c}"/>
Quantity: <ui:outputNumber value="{!v.item.Quantity__c}"/>
Packed: <ui:outputCheckbox value="{!v.item.Packed__c}"/>
<ui:button label="Packed!" press="{!c.packItem}" />
</aura:component>
and it works, until i get rid of the default
then i tried
<aura:component >
<aura:attribute name ="item" type= "Camping_Item__c" required = "true"/>
Name: <ui:outputText value="{!v.item.Name}"/>
<p>Price:
<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
</p>
<p>Quantity :
<lightning:formattedNumber value="{!v.item.Quantity__c}"/>
</p>
<p>Packed:
<lightning:input type="toggle" label="Packed?" checked="{!v.item.Packed__c}"/>
</p>
</aura:component>
but it doesnt work
are there any suggestions
<aura:component >
<aura:attribute name="item" type="Camping_Item__c" required="true"/>
<ui:outputText value="{!v.item.Name}"/>
Price:
<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
Quantity
<lightning:formattedNumber value="{!v.item.Quantity__C}" style="number"/>
<p>
<lightning:input type="toggle"
label="Packed?"
name="Packed__c "
checked="{!v.item.Packed__c }" />
</p>
</aura:component>
<aura:component >
<aura:attribute name="item" type="Camping_Item__c" description="" required="true" />
<p>Name: {!v.item.name}</p>
<p>Price: <lightning:formattednumber value="{!v.item.Price__c}" style="currency" currencyCode="USD" /> </p>
<p>Quantity:<lightning:formattednumber value="{!v.item.Quantity__c}" /> </p>
<p>
<lightning:input type="toggle" label="Packed" name="Packed" checked="{!v.item.Packed__C}" />
</p>
</aura:component>
<aura:attribute name="item" type="Camping_Item__c" required="true"/>
<lightning:input type="text"
label="Camping Item Name"
name="Name"
value="{!v.newItem.Name}"
required="true"/>
<lightning:input type="number"
label="Quantity"
name="Quantity"
value="{!v.newItem.Quantity__c}"
required="true"/>
<lightning:formattedNumber style="currency"
value="{!v.newItem.Price__c}"/>
<lightning:input
label="Packed?"
name="Packed"
type="toggle"
checked="{!v.newItem.Packed__c}"/>
</aura:component>
Hope this will work..Please try and give a reply.
For everyone using ui:outputNumber or ui:outputCurrency: I think they want you to use lightning:formattedNumber, since that's what they use in their examples.
I thought the instructions were pretty vague on this challenge. For example, they said to display Name with an expression, but something like {! 'Name: ' + v.item.Name} (which they did in their examples) fails validation.
Does anyone knoww how to instanciate a Camping_Item__c object in order to test our codes ?



Mine works, but I'm not able to render it (I did an app and include the component, the renderring is ... nothing)
Render :
My component code :
The controller :
I am sure I got wrong in the js code ...
But I can't fix it (have to learn how js works, I'va done so little in js :( )
Thanks and good luck !
Also, your help here worked for me, for those how got issues coding.
The error I get is: "The Quantity field is either not using the lightning formattedNumber component or the value of the item's Quantity__c."
I get that with and without the style="number" attribute.
Am I missing something?
Check the error message again. There's a formattedNumber Lighting Component (https://developer.salesforce.com/docs/component-library/bundle/lightning:formattedNumber/example). That's what we are looking for. Make sure you use that component.
Thanks
Jeff Douglas
Director, Trailhead Developer Advocacy
One thing which I think is required is that the Required attribute should be set as true and followed by default with value if you would like to put bogus value in it.
Using the cues from the unit examples included I came up with:
<aura:component >
<aura:attribute name="item" type="Camping_Item__c" required="true"/>
<p>
Name:{!v.item.Name}
</p>
<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>Packed:
<lightning:input type="toggle"
label="Packed?"
name="Packed"
checked="{!v.item.Packed__c}" />
</p>
</aura:component>
& it works, good luck!
<aura:component >
<aura:attribute name="item" type="Camping_Item__c" required="true"/>
<div>
Name: <ui:outputText value="{!v.item.Name}"/> <br/>
Price: <lightning:formattedNumber value="{!v.item.Price__c}"
style="currency"/> <br/>
Quantity: <lightning:formattedNumber value="{!v.item.Quantity__c}" /><br/>
<lightning:input type="toggle"
label="Packed"
Name="pkd"
checked="{!v.item.Packed__c}"/>
</div>
</aura:component>
Test:
<aura:application extends ="force:slds">
<c:campingListItem item="{Name:'Testing', Price__c:500, Quantity__c:5, Packed__c:true}"/>
</aura:application>
<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}"/> <lightning:button label="Packed!" onclick="{!c.packItem}"/>
</aura:component>
--------------------------------------------------------------------------
campingListItemController.js code:
({
packItem : function(component, event, helper) {
component.set("v.item.Packed__c",true);
event.getSource().set("v.disabled",true);
}
})
----------------------------------------------------------------
for those whos still getting error "packItem is not found in the campingListItemcontroller.js" make sure to make the controller code within the campingListItem code .there is no need to make another lightning component for the controller.js .
thanks
<aura:component >
<aura:attribute name="item" type="Camping_Item__c" required="true"/>
<p>
Name:{!v.item.Name}
</p>
<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>Packed:
<lightning:input type="toggle"
label="Packed?"
name="Packed"
checked="{!v.item.Packed__c}" />
</p>
</aura:component>
Hope this help you.
if working fine then like and responce to best answer.