Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jonathan BruceJonathan Bruce 

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?

User-added image

<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>
Vershley JoyejobVershley Joyejob
Check that your Quantity field is using the Number data type in your org.
Ajay K DubediAjay K Dubedi
Hi Jonathan,
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:
  
<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__c}"/>
</aura:component>


Hope this help you to pass the challenge.

Regards,
Ajay
Vershley JoyejobVershley Joyejob

Jonathan,

Also notice that your *Quantity* field name is not formatted as a custom one.
It should be 

!v.item.Quantity__c

instead of

!v.item.Quantity
Jeff DouglasJeff Douglas
Please try this challenge again as we updated ths module yesterday.

Jeff Douglas
Trailhead Developer Advocate
Stephen NStephen N
Any one have luck with this? I've confirmed the data type for the Quantity field is Number(18,0) and I am using  
<ui:outputNumber value="{!v.item.Quantity__c}"/>
to display the field in the component. However, I am still receiving the same error message Jonathan called out.
User-added image
Nathaniel TullyNathaniel Tully
I'm getting the same thing.
BigMagBigMag
I am getting the same error.  here is my code:
<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>
John Zhao 4John Zhao 4
You gotta take out the hardcoded text from the <ui> tags, so instead of <ui:outputNumber  value="{!'Quantity: ' + v.item.Quantity__c}"/>, do Quantity: <ui:outputNumber value="{!v.item.Quantity__c}"/>. And do that for all of them.
BigMagBigMag
Thanks John Zhao.  That resolved my issue!!!  Here is the new corrected code that worked.

<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>
G SAI CHANDRA KASHYAPG SAI CHANDRA KASHYAP
This code works perfect.

<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>
Naeem T-PearsonNaeem T-Pearson
ok so i tried 

<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
Mounica M 10Mounica M 10
This code woks perfectly for me
<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>
Rajesh Sahoo 6Rajesh Sahoo 6
Working Code 
<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>
Aboo ThahirAboo Thahir
<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.
Tiffany Oda 17Tiffany Oda 17
This might be a really dumb question but I keep getting the error "Failed to save campingListItem.cmp: Invalid <aura:attribute> type: Camping_Item__c: Source" and I can't figure out how to fix this. Anyone able to assist?
Andrew WeinsteinAndrew Weinstein
Tiffany, did you create the "Camping Item" custom object? It was in a previous step (maybe the first step of this trail).

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.
Alexis MASSON 6Alexis MASSON 6

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 app page





My component code :
User-added image





The controller :
This obviously is where I got wrong


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.
Dave Pattison 10Dave Pattison 10
While I passed this challenge, I don't understand why the output of my component has "ActiveInactive" beside the toggle

Packed toggle checkbox has ActiveInactive beside it.
Evan McDanielEvan McDaniel
I'm getting an error on this now as well, with code that seems like it should work. Here's the code:
  
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name: {!item.Name}</p>
    <p>Price: <lightning:formattedNumber value="{!item.Price__c}" style="currency"/></p>
    <p>Quantity: <lightning:formattedNumber value="{!item.Quantity__c}" style="number"/></p>
    <p><lightning:input type="toggle"
                        label="Packed"
                        name="packed"
                        checked="{!item.Packed__c}"/>
                        </p>
    
</aura:component>

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?
Jeff DouglasJeff Douglas
Evan,

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
Evan McDanielEvan McDaniel
Hi Jeff, thanks for the response. Triple checked and definately using that component.
Evan McDanielEvan McDaniel
Hi Jeff, thanks for the response. Triple checked and definately using that component.
Sunil KhuwalSunil Khuwal
You make use of the existing code style in it to use to create the code to pass the challenge.
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. 
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"
                    default="{Name:'ABC', Price__c:100, Quantity__c:1, Packed__c:false}"
                    />
    
    <p>Item 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="double"/>
    </p>
    
    <p>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="packed"                         
                         checked="{!v.item.Packed__c}" />        
    </p>
    
</aura:component>

 
Lucy Monk 1Lucy Monk 1
Hi guys

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!
 
Shathish Kumar 6Shathish Kumar 6
Try this:
    <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>
Asif Ali 49Asif Ali 49
campingListItem code:
<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
Kishor MakwanaKishor Makwana
This code working perfect .
<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.