function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Eric Kendi ShiraishiEric Kendi Shiraishi 

Challenge Not yet complete... here's what's wrong: The packingListItem Lightning Component's attribute tag doesn't exist or its attributes are not set correctly.

Hi, I am having trouble with the "Attributes and Expressions" module from trailhead.

Here is the challenge:
Create a Lightning Component to display a single item for your packing list.
  • Create a component called campingListItem that displays the name (ui:outputText) and the three custom fields using the appropriate output components.
  • Add an attribute named 'item' for type Camping_Item__c.
I created an component named campingListItem and this is the code:
<aura:component >
    <aura:attribute name="item" type="<my_domain>__Camping_Item__c"/>
    
    <ui:outputText value="{!v.item.Name}"/>
    <ui:outputCheckbox value="{!v.item.<my_domain>__Packed__c}"/>
    <ui:outputCurrency  value="{!v.item.<my_domain>__Price__c}"/>
    <ui:outputNumber value="{!v.item.<my_domain>__Quantity__c}"/>
</aura:component>

The error that I am getting is: "Challenge Not yet complete... here's what's wrong: 
The packingListItem Lightning Component's attribute tag doesn't exist or its attributes are not set correctly."

With this, I tried to create another component, with the name "packingListItem", but It didn't work.

Can anyone help me?

Thanks,
Best Answer chosen by Eric Kendi Shiraishi
Jeff DouglasJeff Douglas
Sorry for the inconvenience. Change your attribute to the following and everything should pass. I'm getting this update ASAP.
<aura:attribute name="item" type="Camping_Item__c" required="true"/>

Jeff Douglas
Trailhead Developer Advocate

 

All Answers

Tyler ZikaTyler Zika
I think this trailhead is buggy. I've noticed a few typos and errors in the previous challenges.
Eric Kendi ShiraishiEric Kendi Shiraishi
Yea, I noticed that too...
I had some problems with the previous challenges..

I just hoped that some trailhead manager could help me pass through this or correct the challenge.

Thanks Tyler.
Jeff Douglas (Personal)Jeff Douglas (Personal)
Eric,

I see two problems here. The error message is because you missed something on the requirements; specificially the end of the last bullet point.

Also, if you are using a namespace, these challenge are going to fail as we don't support them. From the code you pasted it looks like you are?

HTH

Jeff Douglas
Trailhead Developer Advocate
Jeff Douglas (Personal)Jeff Douglas (Personal)
Tyler,

Can you let me know what typos and errors you noticed in previous challenges so that I can take a look at them. Thanks!

Jeff Douglas
Trailhead Developer Advocate
Eric Kendi ShiraishiEric Kendi Shiraishi
Sorry, I changed the name, it is namespace and not domain.

Well, it worked on the previous challenges, I will try on another org and I will let you know if worked.

What did I miss on the last bullet?
Eric Kendi ShiraishiEric Kendi Shiraishi
Jeff, it didn't work.

I tried on another org, without namespace and the error remains the same.
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c"/>
    
    <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>

Do you have any other idea?

Thanks
Megan JobesMegan Jobes
Having the same issue. Here is my code.
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c"/>
    
    <p>Name:
        <ui:outputText value = "{!v.Camping_Item.Name}"/>
    </p>
    <p>Price:
        <ui:outputCurrency value="{!v.Camping_Item.Price__c}"/>
    </p>
    <p>Quantity:
        <ui:outputNumber value="{!v.Camping_Item.Quantity__c}"/>
    </p>
    <p>Packed?:
        <ui:outputCheckbox value="{!v.Camping_Item.Packed__c}"/>
    </p>
</aura:component>

I am assuming since this is a new module as of today that there is a bug. I found one in an earlier section where an ordered list was needed instead of unordered. If anyone figures out a solution, let me know. Thank you!
Susan ThomlinsonSusan Thomlinson
I, too, am having the same error.  My code is virtually the same as Eric's.  Hopefully we will hear soon what the issue is. 
Tyler ZikaTyler Zika

Jeff,

On this page: https://developer.salesforce.com/trailhead/lex_dev_lc_basics/lex_dev_lc_basics_prereqs

quantity is spelled "Quanity"

 

This page: https://developer.salesforce.com/trailhead/lex_dev_lc_basics/lex_dev_lc_basics_intro

there is an inconsistenct in function calls on the click for the button for the markup and explaination: "{!c.clickReimbursed}" vs "{!c.updateReimbursed}"

Jeff DouglasJeff Douglas
Sorry for the inconvenience. Change your attribute to the following and everything should pass. I'm getting this update ASAP.
<aura:attribute name="item" type="Camping_Item__c" required="true"/>

Jeff Douglas
Trailhead Developer Advocate

 
This was selected as the best answer
Jeff DouglasJeff Douglas
When you complete this module, please let me know on this forum. LMK if you are having any issues. Thanks!!

Jeff Douglas
Trailhead Developer Advocate
marco ma 4marco ma 4

Hi Jeff, I am still getting this error: 

"Challenge Not yet complete... here's what's wrong: 
The Quantity field is not using the correct output 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__c}"/>   
    
</aura:component>
I have checked that Quantity is using Number type
Jeff Douglas (Personal)Jeff Douglas (Personal)
Marco, that should be working. If you want to send me (jdouglas@salesforce.com) your credentials I can take a look. You might want to try it one more time first.

Jeff Douglas
Trailhead Developer Advocate
Jeff Douglas (Personal)Jeff Douglas (Personal)
FYI.. Marco's problem was that he is using a namespace in his org and that is not supported in Trailhead.

Jeff Douglas
Trailhead Developer Advocate
marco ma 4marco ma 4
Hi Jeff, 

Thanks for the answer. Is there a way to pass the challenge? Since I can't remove the namespace once it's registered.
Jeff DouglasJeff Douglas
Megan,

1. Make sure you set the attributes tag to "required" equals true.
2. Check the requirements as the value provider name should be called "item" not "Camping_Item". So your code should reference it this way...
 
<ui:outputText value = "{!v.item.Name}"/>

HTH
Jeff Douglas
Trailhead Developer Advocate

 
Megan JobesMegan Jobes
Thank you Jeff, that did the trick :D 
Eric Kendi ShiraishiEric Kendi Shiraishi
Hi Jeff,

It worked, thanks! (Without namespace and with required="true")
Dan Moore 24Dan Moore 24
Jeff, is there an option for those of us that have a namespace enabled?  I'm getting the same error on the Quantity field as Marco, not sure why namespace would cause an issue with this specific field.  
Yashita Goyal 12Yashita Goyal 12
Hi Jeff,

Is there any way of passing the challenge facing similar issue - "The packingListItem Lightning Component's attribute tag doesn't exist or its attributes are not set correctly." 

I guess its coming because I have namespace enabled in my DEV org.

Below is the code for your reference:
 
<aura:component>
    <aura:attribute name="item" type="<Namespace Prefix>__Camping_Item__c" required = "true"/>
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Packed:
        <ui:outputCheckbox value="{!v.item.<Namespace Prefix>__Packed__c}"/>
    </p>
    <p>Price:
         <ui:outputCurrency value="{!v.item.<Namespace Prefix>__Price__c}"/>
    </p>
    <p>Quantity:
         <ui:outputNumber value="{!v.item.<Namespace Prefix>__Quantity__c}"/>
    </p>
</aura:component>
Can you please validate my understanding.

Thanks,
Yashita


 
Jeff Douglas (Personal)Jeff Douglas (Personal)
Correct... unfortunately we don't support namespaces so, unfortunately, the only way is to transfer this code to a new DE org.

Jeff Douglas
Trailhead Developer Advocate
Amit VaidyaAmit Vaidya
Hi,

Just for giving an update.
I have set namespace on my org. When I wrote the code as follows it passses the challege:
 
<aura:component >
	<aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <ui:outputText value="{!v.item.Name}"/>
    <!--<ui:outputCurrency value="{!v.item.Price__c}"/>-->
    <!--<ui:outputNumber value="{!v.item.Quantity__c}"/>-->
    <!--<ui:outputCheckbox value="{!v.item.Packed__c}"/>-->
</aura:component>

Thanks,
Amit
Yashita Goyal 12Yashita Goyal 12
Yes you right Amit.
Thanks :)
William Rogers 10William Rogers 10
Thanks Jeff!

Do you now how hard I was beating my head against the wall on this?!
 
 
Joseph HutchinsJoseph Hutchins
I ran into this issue today and Jeff's solution worked for me:
 
"2. Check the requirements as the value provider name should be called "item" not "Camping_Item". So your code should reference it this way..."

I was using 
<p><ui:outputNumber value = "{!v.Camping_Item__c.Quantity__c}"/></p>

instead of
<p><ui:outputNumber value = "{!v.item.Quantity__c}"/></p>

Hope this helps others.  
Vince.CasarezVince.Casarez
Amit's worked for me as well.
Srinivas AnnamSrinivas Annam
<aura:component>
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
     <p>The Item is:
         <ui:outputText value ="{!v.item}" />
    </p>
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Packed:
     <ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
    <p>Price:
     <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
  <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>
     <ui:button label="Packed!" press="{!c.packItem}"/>
    </p>
</aura:component>

ckeck as it is i got error but challenge is success
Srinivas AnnamSrinivas Annam
({
  packItem: function(component, event, helper) {
        var btn= event.getSource();
  var BtnMessage =btn.get("v.label");
        component.set("v.item",BtnMessage);
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);    
     }
})
Jeff DouglasJeff Douglas
All, we are trying to make some challenge adjustments based upon what you are posting on the forums. There are a number of ways to write JS and we are trying to accomidate them all. In the meantime, try this:

In your controllers, whenever you are referencing the item in the component use the following:
var item = component.get("v.item");
Then set the item's Packed__c value. Then you can get a reference to the button that was clicked with:
var btn = event.getSource();
Then you can .set "v.disabled" and then finally .set the item back to "v.item".

HTH

Jeff Douglas
Trailhead Developer Advocate



 
Griffin NowakGriffin Nowak

Jeff, in order to make this module more clear I think you need to be more specific in the instructions. Your error talks about "packingListItem" component but the instructions never talk about it. The wording on this challenge was also difficult to understand. Breaking it up a little more and putting it in a more clear order might fix some of this.

The best I could come up with:
Create a compenent called "campingListItem"
Add an attribute with the name "item" with a type of "Camping_Item__c".
Add three output fields that display the Name, Price, Quanity and packaging status using the appropriate output fields. 

Jeff DouglasJeff Douglas
Thanks for the comments Griffin! Love feedback on how to make stuff better. I've tweaked some stuff based upon your input.

Unfortunately, the "packingListItem" reference in the error message if an unintended consequence of refactoring. Naming and expiring the cache!!!! So hard!

We are hoping to get these changes up shortly.

Jeff Douglas
Trailhead Developer Advocate
rajjjjrajjjj
I passed the challenge. But I am getting this error :) This error showed up when I tried to include required="true"

Something has gone wrong. [NoErrorObjectAvailable] Aura.loadComponent(): Failed to initialize application. An internal server error has occurred Error ID: 1096877107-438950 (1683235083) . Please try again.

Also it would be great if you can show the sample output for all challenges. 
There are some places where its confusing and method names different. Sometimes I just assume its a correction.
Sreeharsha KaranamSreeharsha Karanam
I activated name space, eben though the below code work sfor me.(namespace directly adds, no need to do it manually)

<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>
Saroj KushwahaSaroj Kushwaha
Thanks Mr. Jeff Douglas just by adding required="true" to attribute problem was solved... i spent 3 weeks for that problem..
Noopur Rathod 8Noopur Rathod 8
Hi Jeff,

With putting required="true", I was able to pass the challenge. But the output was not getting displayed and it was throwing the following error:
Something has gone wrong. [NoErrorObjectAvailable] Aura.loadComponent(): Failed to initialize application. An internal server error has occurred Error ID: 225783206-108107 (-1741317831) . Please try again.


Thanks & Regards,
​Noopur Rathod
brijesh yadav 57brijesh yadav 57
Please try 
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <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>
Prakash  RaiPrakash Rai
Just like Noopur, I get the error when I plugged it to the harness.app and try to Preview.

Anyone knows why?
Bill KratochvilBill Kratochvil
<aura:attribute name="item" type="Camping_Item__c" 
                    required="true"
                    default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:false}"
                    />

The solution is eluded to (via default) but is not provided - the above attribute shows how to set default, which will resolve the error on Preview  AND will be very helpful on the next challenge (to test your button click).  
 
Kellan ScheiberKellan Scheiber
Thank You Bill, I was having the same issue and setting the default on the attribute resolved.
Ilya PistryakovIlya Pistryakov
required="true" fixed the issue!  Thanks for your help. 
Maria LokhandwalaMaria Lokhandwala
Amit's solution worked for me as well. It's quite frustrating if the question is not presented clearly and more so if solution is trivial
Muzammil BajariaMuzammil Bajaria
ThankYou Jeff. I was using type instead of name of attribute
Scott M - SFDC FanScott M - SFDC Fan
Hi,

I also got stuck with this error. What the heck is the

required="true"

bit in the attribute declaration? The TH unit neither explains that it is needed nor does it explain what it is.

Also, as a suggestion, most interactive tutorials also offer tips. So, when an error occurs, TH could also add some tips.

Scott
 
Shwetha GShwetha G
Hi,

I am also facing the issue reported by Noopur.

I have passed the challenge but not able to see the output.Getting the below error

This page has an error. You might just need to refresh it. Aura.loadComponent(): Failed to initialize application. An internal server error has occurred Error ID: 128803474-127331 (-1501584897)

Any help?

Thanks
Shwetha
Andreas GerogiannisAndreas Gerogiannis
This one worked fine for me. Challenge passes. And yes the required="true" is mandatory

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>

    <ui:outputText value="{!v.item.Name}"/>
    <ui:outputCurrency value="{!v.item.price__c}"/>
    <ui:outputCheckbox value="{!v.item.Packed__c}"/>
    <ui:outputNumber value="{!v.item.Quantity__c}"/>
    
</aura:component>

 
Mohammad AkramMohammad Akram
Following is working with me : I just remove some whitespace and gap in lines then its accepted.
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    
    <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>
Priyankar Pakhira 39Priyankar Pakhira 39
Use this ,but before that please make sure that you have created all the fields correctly. 

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" default="{Name:'Test, Price__c:500, Quantity__c:10, Packed__c:true}"/>
    
    <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>
Banshi LalBanshi Lal

I were having the Same Issue. I have fixed it my making following change.

<aura:attribute name="item" type="Camping_Item__c" required="true"/>
Tim SHEINER 5Tim SHEINER 5
I have the same issue as Swetha and Noopur above--my code passes the challenge but won't run and generates a system error. Is there a resolution?
Tim SHEINER 5Tim SHEINER 5
OK, found a thread that solves this problem: https://developer.salesforce.com/forums#!/feedtype=SINGLE_QUESTION_SEARCH_RESULT&id=906F0000000kCy0IAE

Definitely this trailhead needs revision. The reasons I couldn't solve it feel pretty far from what was being taught in the module.
Mukesh Gupta 38Mukesh Gupta 38

Hi Eric Kendi Shiraishi,

I have solved this you can see my  component code

<aura:component > 
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <aura:attribute name="item2" type="Camping_Item__c" required="true"
                    default="{
                             'Name':'Test NAme',
                             'Price__c':'12.90',
                             'Quantity__c':'12.0',
                             'Packed__c':true
                             }"/>
    
    <ui:outputText value="{!v.item.Name}"/><br/>
    <ui:outputCurrency value="{!v.item.Price__c}"/><br/>
    <ui:outputNumber value="{!v.item.Quantity__c}" format=".00"/><br/>
    <ui:outputCheckbox value="{!v.item.Packed__c}"/>
</aura:component>
If above code fixed you problem please mark this is best answer
Thanks Mukesh at Girikon LLC (http://www.girikon.com)
Tim SHEINER 5Tim SHEINER 5
I think what you are missing is in the attribute definition you have to provide a default state. Something like this:
Henry Burns 2Henry Burns 2
Something is really wrong with this module. I passed the module but when I run the test in the harness, I get this:

This page has an error. You might just need to refresh it. Aura.loadComponent(): Failed to initialize application. An internal server error has occurred Error ID: 440484449-269217 (1149435409) ....

Yet at the same time, the module check passed.

I know it sounds odd to complain that I passed. But I would think that when I run a component in the harness, whether it passes or fails should be an indicator that the code is right. 

This is how I solved the porblem.

<aura:component >
    
    <aura:attribute name="item" type="Camping_Item__c" required ="true"/>
    
    <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>

Henry
Amir Perlson 7Amir Perlson 7
Hi Henry, check out Bill Kratochvil's answer above - you need to define the "default" attribute so you have an actual Camping Item that can be displayed. Bill's example is:
<aura:attribute name="item" type="Camping_Item__c" required="true" default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:false}"/>
Henry Burns 2Henry Burns 2
Yeah, thanks for getting back to me. I saw the comment and made changes accordingly and it worked.
Jess BurghJess Burgh
Hey all. I've been racking my brain on what I've been doing wrong with this challenge. I made the custom object and the fields. And I keep getting this error message.

User-added image

Any suggestions would be appreciated! Thanks!!
Jeff Young Jr.Jeff Young Jr.
I'm getting the same message as Jess Burgh. Here is the code I've implemented. (I've tried with/without the "default" configurations)

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"
                    default="{
                             'Name':'Shovel',
                             'Price__c':'9',
                             'Quantity__c':'1',
                             'Packed__c':true
                             }"/>
    <ui:outputText value="{!'Name: ' + v.Name}"/>
    <ui:outputCurrency value="{!'Price: $' + v.Price__c}"/>
    <ui:outputNumber value="{!'Quantity: ' + v.Quantity__c}"/>
    <ui:outputCheckbox value="{!'Packed: ' + v.Packed__c}"/>
</aura:component>


If it's not suppose to be a <ui:outputNumber> component, then what should it be?
Jeff Young Jr.Jeff Young Jr.
I'm not sure if the issue was resolved with my original code, but I used the following to complete the challenge:

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

I wish I would have first attempted my original code (in previous post) to confirm the issue was still there, then attempted the solution above.
Sumit Sharma 172Sumit Sharma 172
Guys.....I guess most of us just ignored the "ui:output" tag with the correct datatype it required..
This works simply...

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

 
Sameer LearningSameer Learning
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"></aura:attribute>
    
    <ui:outputText value="{!v.item.Name}"></ui:outputText>
    <ui:outputCurrency value="{!v.item.Price__c}"></ui:outputCurrency>
    <ui:outputNumber value="{!v.item.quantity__c}"></ui:outputNumber>
    <ui:outputCheckbox value="{!v.item.Packed__c}"></ui:outputCheckbox>
    
</aura:component>
DevelominDevelomin
This will run fine.
<aura:component >
    
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
   
    <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>

 
ANKUR SUR 7ANKUR SUR 7
This is the Code that works absolutely FIne.

<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>Name:
     <ui:outputtext value="{!v.item.Name}"/></p>
     <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
   
    <p>Packed ?:
        <ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
    <p>Quantity :
        <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
  
    
</aura:component>
Anju SusanAnju Susan
Hi,

I also had issue with this module. 

First my code was this

harnesApp.app

<aura:application >
    <c:helloWorld />
    <c:camping />
    <c:campingListItem />
</aura:application>

campingListItem.cmp

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" />

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

I executed this code and at first it ran.....and the values of the outputText,ui:outputCurrency,ui:outputNumber and ui:outputCheckbox was coming blank,. After sometime again I executed the code...but at that time I was getting error. Then I gave the default value as below for the attribute in the campingListItem.cmp

<aura:attribute name="item" type="Camping_Item__c" required="true" default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:false}"/>

After that I executed and I got output as below



User-added image

Thanks!

 



 
PrathishaPrathisha
Thanks Manu
vleandrovleandro
Just a note for anyone else, as of June 20, 2017, the Challenge check is still not fixed.  To pass you still have to add:

required="true" 

to the attribute to get it to pass.  Here's a sample.
 
<aura:attribute name="item" type="Camping_Item__c" required="true"/>

 
Fernando AndradaFernando Andrada
Hello to everyone ! I have the same message ... what im doing wrong ? The code is ok, I have no namespece.
User-added image
Shukla YogeshShukla Yogesh

Hi Fernando

This is the generic error message which comes when there are some errors. Can you compare with below code and see what you are missing?

<aura:component >
 <aura:attribute name="item" type="Camping_Item__c" required="true"></aura:attribute>
      <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed:
        <ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
</aura:component>
 


 

Thanks
Yogesh

Sankeerth ReddySankeerth Reddy
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name:
        <ui:outputText value="{!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}"/>
    </p>
    <p>Packed:
        <lightning:input type="toggle" label="Packed?" checked="{!v.item.Packed__c}"/>
    </p>
    <div>
        <lightning:button label="Packed!" onClick="{!c.packItem}"/>
    </div>
</aura:component>
I was getting the same error, I think they redesigned this module. But, this worked for me.
 
Amit Mittal 15Amit Mittal 15
Hi Friends,

I am working on
Module : Lightning Components Basics 
Section : Connect Components with Events
I am getting below error:
"Challenge Not yet complete... here's what's wrong: 
The campingList component appears to be using UI Components instead of Base Lightning Components in the form. You should be using only Base Lightning Components."

Though my code is working as expected. But somehow TrailHead is not accepting this. Can someone help me on this pls?
Below is the component markup:
****************************************8
CAMPINGLIST:
<aura:component controller="CampingListController">
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:handler name="addItem"   action="{!c.handleAddItem}"  event="c:addItemEvent"/>
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    
    <aura:attribute name="test" type="String" default="I M Default"/>
    <!--New Form-->
    <div class = "slds-col slds-col--padded slds-p-top--large">
        <c:campingListForm />
    </div>
    <div>   
        <aura:iteration items="{!v.items}" var="item">
            <c:campingListItem item="{!item}"/>
        </aura:iteration>
    </div>
</aura:component>


************************************************* 

CAMPINGLISTFORM:

<aura:component >
     <aura:registerEvent name="addItem" type="c:addItemEvent"/>
<aura:attribute name="newItem" type="Camping_Item__c" required = "true"
                    default="{'sobjectType':'Camping_Item__c',
                               'Name':'',
                               'Price__c':'0',
                               'Quantity__c':'0',
                               'Packed__c':false}"/>
    <div aria-labelledby = "newcampingform">
            
            <fieldset class = "slds-box slds-theme--default slds-container--small">
                <legend id="newcampingform" class="slds-text-heading--small 
                                                   slds-p-vertical--medium">
                    Camping Details 
                </legend>
                
                
                <form class="slds-form--stacked ">
                    <div class="slds-form-element slds-is-required">
                        <div class="slds-form-element__control">
                            <ui:inputText aura:id="campname" label="Camping Name" 
                                          class="slds-input"
                                          labelClass="Slds-form-element__label"
                                          value="{!v.newItem.Name}"
                                          required="true"/>
                        </div>
                    </div>
                    
                    <div class="slds-form-element slds-is-required">    
                        <div class="slds-form-element__control">
                            <ui:inputCurrency aura:id="price" label="Price" 
                                              class="slds-input"
                                              labelClass="Slds-form-element__label"
                                              value="{!v.newItem.Price__c}"
                                              required="true"
                                              />
                        </div>
                    </div>
                    <div class="slds-form-element slds-is-required">    
                        <div class="slds-form-element__control">
                            <ui:inputNumber aura:id="quantity" label="Quantity" 
                                            class="slds-input"
                                            labelClass="Slds-form-element__label"
                                            value="{!v.newItem.Quantity__c}"
                                            required="true"
                                            />
                        </div>
                    </div>
                    
                    <div class="slds-form-element slds-is-required">    
                        <div class="slds-form-element__control">
                            <ui:inputCheckbox aura:id="packed" label="Packed?" 
                                              class="slds-checkbox"
                                              labelClass="Slds-form-element__label"
                                              value="{!v.newItem.Packed__c}"
                                              />
                        </div>
                    </div>
                    
                    <div class = "slds-form-element">
                        
                            <ui:Button label="Submit" 
                                       class="slds_button slds-button--brand"
                                       press="{!c.submitForm}"/>
                        
                    </div>
                 </form>
            </fieldset>
        </div>
</aura:component>

Regards,
Amit Mittal
***************************************

 
Amit Mittal 15Amit Mittal 15
Hi,

I was suggested to remove UI components and use Base components. I tried that as well but got another issue:

Error:
"Challenge Not yet complete... here's what's wrong: 
The campingList component doesn't appear to have a Quantity input field in the form using a Lightning Base component."

campingListForm:

***********************
<aura:component >
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    <aura:attribute name="newItem" type="Camping_Item__c" required="true"
                    default="{'sobjectType':'Camping_Item__c',
                             'Name':'',
                             'Price__c':'0',
                             'Quantity__c':'0',
                             'Packed__c':false}"/>
    <div aria-labelledby = "newcampingform">
        
        <fieldset class = "slds-box slds-theme--default slds-container--small">
            <legend id="newcampingform" class="slds-text-heading--small 
                                               slds-p-vertical--medium">
                Camping Details 
            </legend>
            
            
            <form class="slds-form--stacked ">
                <div class="slds-form-element slds-is-required">
                    <div class="slds-form-element__control">
                        <lightning:input label="Camping Name" 
                                         class="slds-input"
                                         name="campname"
                                         value="{!v.newItem.Name}" aura:id="campname"
                                         required="true"/>
                    </div>
                </div>
                
                <div class="slds-form-element slds-is-required">    
                    <div class="slds-form-element__control">
                        <lightning:input type="number"  label="Price" 
                                         class="slds-input"
                                         name="price"
                                         formatter="currency"
                                         value="{!v.newItem.Price__c}"
                                         required="true" aura:id="price"/>
                    </div>
                </div>
                <div class="slds-form-element slds-is-required">    
                    <div class="slds-form-element__control">
                        <lightning:input type="number"  label="Quantity" 
                                        class="slds-input"
                                        name="quantity"
                                        value="{!v.newItem.Quantity__c}"
                                        required="true" aura:id="quantity"/>
                    </div>
                </div>
                
                <div class="slds-form-element slds-is-required">    
                    <div class="slds-form-element__control">
                        <lightning:input type="checkbox"  label="Packed?" 
                                         class="slds-checkbox"
                                         name="packed"
                                         value="{!v.newItem.Packed__c}" 
                                         required="true" aura:id="packed"/>
                    </div>
                </div>
                
                <div class = "slds-form-element">
                    
                    <lightning:button label="Submit" 
                                      class="slds_button slds-button--brand"
                                      onclick="{!c.submitForm}"/>
                    
                </div>
            </form>
        </fieldset>
    </div>
</aura:component>
***********************
If anyone has any idea then please let me know. Thnx
Monalisa Halder 1Monalisa Halder 1
Hi Amit , Please use the below code - 
<div class="slds-form-element slds-is-required">    
                    <div class="slds-form-element__control">
                        <lightning:input type="number" label="Quantity" 
                                        class="slds-input"
                                        name="quantity"
                                        min="1"
                                        value="{!v.newItem.Quantity__c}"
                                        required="true" aura:id="itemform"/>
                    </div>
                </div>
                <div class="slds-form-element slds-is-required">    
                    <div class="slds-form-element__control">
                        <lightning:input type="checkbox"  label="Packed?" 
                                         class="slds-checkbox"
                                         name="packed"
                                         checked="{!v.newItem.Packed__c}" 
                                         aura:id="itemform"/>
                    </div>
                </div>

It worked for me. The question asked for min amount of 1 for Quantity, so I added min attribute.

Thanks
Sankeerth ReddySankeerth Reddy
Hey Amit,
Try the code I posted above in the component it should work 
Amit Mittal 15Amit Mittal 15
Hi Monalisa Halder 1,

It worked for me. THanks. I missed min = 1 for qunatity. Thanks again.!!
 
shubham_sonishubham_soni
 follow this steps - 
 
<aura:component >
    <aura:attribute name="item"  type="Camping_Item__c" required="true" default="{'sobjectType' : 'Camping_Item__c'}"/>
    <p><ui:outputText value="{!v.item.Name}"/></p>
    <p><lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/></p>
    <p><lightning:formattedNumber value="{!v.item.Quantity__c}" style="number"/> </p>
    <p><lightning:input type="toggle" checked="{!v.item.Packed__c}"/></p>
</aura:component>

 
Rahul.SharmaRahul.Sharma
Try this code. It will complete the challange:

<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>
        <lightning:input type="toggle"                           
                         label="Packed"                          
                         name="packed"                        
                         checked="{!v.item.Packed__c}" />

    </p>
    
    
</aura:component>

Note: Do not use your namespace. Just use simple API name.
Parag Bhatt 10Parag Bhatt 10
This Code below is 100% working the trailhead just updated this module so try this code:-

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name:
        <ui:outputText value="{!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}"/>
    </p>
    <p>Packed:
        <lightning:input type="toggle" label="Packed?" checked="{!v.item.Packed__c}"/>
    </p>
    <div>
        <lightning:button label="Packed!" onClick="{!c.packItem}"/>
    </div>
</aura:component>

Please give like if you find this answer true so that other could also get help through this.
Dinesh Kumar 326Dinesh Kumar 326
Hi.. its working perfectly fine
<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>
        <lightning:input type="toggle"                           
                         label="Packed?"                          
                         name="Packed"                        
                         checked="{!v.item.Packed__c}" />
     </p>

</aura:component>
Maanas DesaiMaanas Desai
<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?" checked="{!v.item.Packed__c}"/>
    </p>

    
</aura:component>
dhawal sanghanidhawal sanghani
<aura:component >
 <aura:attribute name = "item" type = "Camping_Item__c" required="true"></aura:attribute> 
 <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>
vinod reddy 21vinod reddy 21
Hi,
Below code working fine
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>

    <ui:outputText value="{!v.item.Name}"/>
 
    <p><lightning:formattedNumber value="{!v.item.Price__c}" style="Currency"/></p> 
    <p><lightning:formattedNumber value="{!v.item.Quantity__c}" style="Integer"/></p>
    <p><lightning:input type="toggle"                           
                         label="Packed"                          
                         name="Packed"                        
                         checked="{!v.item.Packed__c}" /></p> 
</aura:component>
AnuSFDCDevloperAnuSFDCDevloper
Still Am facing same issue. Not sure it is with this comp or CampingListForm Comp
Likith Kailas PrakashLikith Kailas Prakash
This one worked for me! I was able to pass the challenge
campingListItem Component
markandrew21markandrew21

This now works.

campingListItem.cmp

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name:
        <ui:outputText value="{!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>
ajith saikrishnaajith saikrishna
this one worked for me!
<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>
        <lightning:input type="toggle" 
                         label="Packed" 
                         name="togglevalue" 
                         checked="{!v.item.Packed__c}" />
     </p> 
</aura:component>
SangHee ParkSangHee Park
This is the code should work
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" />    
    <lightning:input value = "{!v.item.Name}"/>  
    <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
    <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    <lightning:input type="toggle" checked="{!v.item.Packed__c}" />    
</aura:component>
Abhishek sh 29Abhishek sh 29
<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}"/>
          <lightning:formattedNumber value="{!v.item.Price__c}" style="currency" currencyCode="USD" currencyDisplayAs="symbol"/>
          <lightning:formattedNumber  value="{!v.item.Quantity__c}"/>
     <lightning:input type="toggle"                           
                         label="Packed"                          
                         name="togglevalue"                        
                         checked="{!v.item.Packed__c}" />
</aura:component>
Pruthvi PonnagantiPruthvi Ponnaganti
Finally I done that with below code .. Check it once...
 
<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>
 
Chhaveel Thakur 12Chhaveel Thakur 12
The most simple code for the givven problem is this i guess , just done it .
<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>
Just Display Name , price , quantity and packed.
Price and Quantity in Formatted number and  packed in a toggle checkbox
 
ismael GACHAismael GACHA
<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}"/>
    <lightning:input type="toggle" checked="{!v.item.Packed__c}" />
</aura:component>
ismael GACHAismael GACHA
<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}"/>
    <lightning:input type="toggle" checked="{!v.item.Packed__c}" />
</aura:component>

 
bhanu_prakashbhanu_prakash
<aura:component >
<aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name:<ui:outputText value="{!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}"/>
</p>
<p>Packed:
<lightning:input type="toggle" label="Packed?" checked="{!v.item.Packed__c}"/>
</p>
<div>
<lightning:button label="Packed!" onClick="{!c.packItem}"/>
</div>
</aura:component>

Thanks,

Checkout these and visit www.forcelearn.com
SANJAY KUMAR SONI KVPSANJAY KUMAR SONI KVP
<aura:component >
    <aura:attribute name="item"  type="Camping_Item__c"  /> <!-- required="true" type="String"  -->
    <p> The Item is <ui:outputText value="{!v.item}"></ui:outputText></p>
    <p>Name:
        <ui:outputText value="{!v.item.name}" /> 
    </p>
      <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}" style="currency"/>
    </p>
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>Packed:
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
     </p> 
    <p><ui:button label="Packed!"  press="{!c.packItem}"></ui:button>
    </p>
</aura:component>






({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c",true); // it got added mistakenly in my previous comment. Not required.
        var cItem = component.get("v.item",true); // Getting the component's attribute
        cItem.Packed__c = true; // Assigning the field value to True
        component.set("v.item",cItem); // Setting the attribute back to component
        var btnClicked = event.getSource(); //Getting the button 
        btnClicked.set("v.disabled","true"); // Setting the button to disabled.
    }
})
Miguelin BoseMiguelin Bose
Correct answer:
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" />
    <p>{!v.item.Name}</p>
    <p><lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/></p> 
    <p><lightning:formattedNumber value="{!v.item.Quantity__c}" /></p>
    <p><lightning:input type="toggle" label="Packed?" checked="{!v.item.Packed__c}" /></p>  
</aura:component>
Ahmet Tunay ozturkAhmet Tunay ozturk
I look all answer but All answer wrong or Trail has changed. This is my solution:
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" default="{Name:'Test, Price__c:500, Quantity__c:10, Packed__c:true}"/>
    
    <p>Name:<ui:outputText value = "{!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="percent" /></p>
    <p>Packed:<ui:outputCheckbox value="{!v.item.Packed__c}"/></p>
    //Packed
    <p><lightning:input type="toggle"                            
                         label="Packed"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
    </p> 
    
</aura:component>

Thanks

A.T.

Syed Subhan 16Syed Subhan 16
Hi All,

Please find answer below. Its working.
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
   
    <p>{!v.item.Name}</p>
    <p>{!v.item.Price__c}</p>
    <p>{!v.item.Quantity__c}</p>
    <p>{!v.item.Packed__c}</p>

<p><lightning:input type="toggle"                            
                         label="Packed ?"                           
                         name="Packed "                         
                         checked="{!v.item.Packed__c}" />
</p> 
    
   <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency" />
    </p>
    
     <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}"  />
    </p>
	
</aura:component>
Many thanks,
Subhan.
 
shanmukh prasadshanmukh prasad
Here is the simple code to pass:
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name : <ui:outputText value="{!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}"/></p>
    <p>Packed : <lightning:input type="toggle" label="Packed" name="togglevalue" checked="{!v.item.Packed__c}" />
    </p>
</aura:component>
srikanth cheera 11srikanth cheera 11
Hii i written the code
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <ui:outputText value="{!v.item.Name}"/>
    <ui:outputCurrency value="{!v.item.Price__c}"/>
    <ui:outputNumber value="{!v.item.Quantity__c}"/>
    <ui:outputCheckbox value="{!v.item.Packed__c}"/>
</aura:component>

but the Error Was
Challenge Not yet complete... here's what's wrong: 
The Quantity field is either not using the lightning formattedNumber component or the value of the item's Quantity__c.
shanmukh prasadshanmukh prasad
Hi srikanth, you are not using lightning components for Quanity formateer, you have written the code in classic way, change the code according to my code you will pass the challenge, or atleaset you change the quanity filed only issue will resolve.
Vinay Kumar VemulaVinay Kumar Vemula
Hi Srikanth

Use <lightning:formattedNumber /> tag with style="currency" for price and style="number" for Quantity, instead of using <ui:outputNumber /> and <ui:outputCurrency /> like as below,
<lightning:formattedNumber value="{!v.item.Price__c}" style="currency" />
<lightning:formattedNumber value="{!v.item.Quantity__c}" style="number"/>
and use <lightning:input /> tag instead of <ui:outputCheckbox />,
<lightning:input type="toggle"
                     label="Packed"
                     name="Packed"
                     checked="{!v.item.Packed__c}" />

 
Gautam_KasukhelaGautam_Kasukhela
Hello All, 
   I am facing the following issue on this trailhead "Challenge Not yet complete... here's what's wrong: 
The Quantity field is either not using the lightning formattedNumber component or the value of the item's Quantity__c.".
To my understanding error does not make sense as I have used the right components. Let me know if I am missing any basics here.
User-added image

Regards,
Gautam.
 
Vinay Kumar VemulaVinay Kumar Vemula
Hi Gautam,
Your used dynamic notaions without item attribute. like v.Quantity__c
Try with following:
v.item.Name
v.item.Price__c 
v.item.Quantity__c 
​v.item.Packed__c
Alexey KardychkoAlexey Kardychko
Hello. It' my code, I passed challenge with it.
<aura:component description="campingListItem">
    <aura:attribute name="item" type="Camping_Item__c" required="true" default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:false}"/>
    <lightning:formattedText value="{!v.item.Name}"/>
    <lightning:formattedNumber value="{!v.item.Price__c}" style="currency" currencyCode="USD"/>
    <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
    <lightning:input name="Packed" label="Packed" type="toggle" checked="{!v.item.Packed__c}"/>
</aura:component>

(default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:false}") is redunant here, it's used for testing.
RaJesh NandiGamRaJesh NandiGam
Try with the below piece of code to get success of the chalenge:


<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>
        <lightning:input type="toggle"                           
                         label="Packed"                          
                         name="packed"                        
                         checked="{!v.item.Packed__c}" />

    </p>
    
    
</aura:component>



Good Luck
Kishore Singh AKishore Singh A
Hi All,

I've executed the campingListItem challenge successfully but while previewin i'm getting the "ActiveInactive" text which is acting as switch which i'm clicking on it and it is changing the packed value to true or false. Please let me know the reason why this is been shown up during the preview. here's the screen shot below,

User-added image
Alexey KardychkoAlexey Kardychko
Kishore Singh A, Try to include SLDS Framework, and you will see correct toggle checkbox.
Jasmine_NguyenJasmine_Nguyen
This works for me.
<aura:component >
    <aura:attribute name='item' type='Camping_Item__c' required="true"/>
    <p>Name: 
        <lightning:formattedText value="{!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}"/>
    </p>
    <p>
        <lightning:input type="toggle"
                         label="Packed"
                         name="packed"
                         checked="{!v.item.Packed__c}"/>
    </p>
</aura:component>
麗 楊 8麗 楊 8
we should use the 'lighting' for the items like the sample!

```
<aura:component >
 <aura:attribute name="item" type="Camping_Item__c" required="true"/>
   
    <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>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
     </p> 
   
</aura:component>
```
Himanshu NimjeHimanshu Nimje
Please add to application  :

<aura:application extends="force:slds" >


then Component :

<aura:component description="campingListItem">
    <aura:attribute name="item" type="Camping_Item__c" required="true" 
                    default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:false}"/>
   <p> <lightning:formattedText value="{!v.item.Name}"/></p>
    <p><lightning:formattedNumber value="{!v.item.Price__c}" style="currency" currencyCode="USD"/></p>
    <p><lightning:formattedNumber value="{!v.item.Quantity__c}"/></p>
    <p><lightning:input name="Packed" label="Packed" type="toggle" checked="{!v.item.Packed__c}"/></p>
</aura:component>

 
Akshay Jain 109Akshay Jain 109
Hi Eric,
It is asking to use lightning input components with their proper attributes. This should work :
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    
    <ui:outputText value = "{!v.item.Name}"/>   
            <p>
            <lightning:input type="toggle" 
                             label="Packed?"
                             name="Packed"
                             class="slds-p-around--small"
                             checked="{!v.item.Packed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"/>
        </p>
    <lightning:formattedNumber value="{!v.item.Price__c}" style="Currency"/> 
    <lightning:formattedNumber value="{!v.item.Quantity__c}" style="Number"/>   
    
</aura:component>

 
pranesh songapranesh songa
Hi All,

Just remove all the code and try the belpw code.

<aura:component >

    <aura:attribute name="item" type="Camping_Item__c" required="true"/>

    <aura:attribute name="item2" type="Camping_Item__c" required="true"/>
   default="{

                             'Name':'Test NAme',

                             'Price__c':'12.90',

                             'Quantity__c':'12.0',

                             'Packed__c':true

                             }"/>
    <ui:outputText value="{!v.item.Name}"/><br/>
    <lightning:formattedNumber  value="{!v.item.Price__c}" style="currency"/><br/>

    
  <lightning:formattedNumber value="{!v.item.Quantity__c}"/><br/>
    <p><lightning:input type="toggle"                            
                         label="Packed?"                           

                         checked="{!v.item.Packed__c}" /></p>

</aura:component>
akash kilaruakash kilaru
Hi all,
I completed this challenge, please refer the code 

<aura:component >
    

    <aura:attribute name="item" type="Camping_Item__c" required="true"/>

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

    <!--<p><ui:outputCurrency value="{!v.item.Price__c}"/></p>-->
        <p> <lightning:formattedNumber value="{!v.item.Price__c}" style="Currency"/> </p>


    <!--<p><ui:outputNumber value="{!v.item.Quantity__c}"/></p>-->
    <p> <lightning:formattedNumber value="{!v.item.Quantity__c}" style="Number"/> </p>

    <!--<p><ui:outputCheckbox value="{!v.item.Packed__c}"/></p>-->
    <p>
        <lightning:input type="toggle"                            
                         label="Packed Status?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
     </p> 

</aura:component>
Michael RigamontiMichael Rigamonti
How can I complete this challenge writing attributes if the trail didn't learn me what is an attribute?! For me this trail is crazy!
RODRIGO DOMINGUESRODRIGO DOMINGUES
i spend a time for this !! arrrrr kkkk 
Satish SoniSatish Soni
This code passes the test.

<aura:component >
    Camping List Item
    
    <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="decimal"/>
        </p>
        
        <p>
            <lightning:input type="toggle" label="Packed" name="packed" checked="{!v.item.Packed__c}"/>
                
        </p>

           
</aura:component>
AMAN CLOUDAMAN CLOUD
This Code will let you qualify the challenge :
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" />
   <p>Name:
        <ui:outputText value = "{!v.item.Name}"/>
    </p>
    <p>Price:
        <lightning:formattedNumber style="currency" value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
       <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed?:
        <lightning:input type="toggle" checked="{!v.item.Packed__c}"/>
    </p>    
</aura:component>
Donald HurseyDonald Hursey
Thanks Aman that code worked for me.
Harjeet Makkar 13Harjeet Makkar 13
Below worked for me :-

<aura:component >
    <Aura:attribute name= "item" type="Camping_item__c" required ="true"/>
    <p> 
        Name : <lightning:input value="{!v.item.Name}"/>
        Price : <lightning:formattednumber style="Currency" value= "{!v.item.price__c}"/>
        Quantity : <lightning:formattednumber value="{!v.item.Quantity__c}"/> 
        Packed : <lightning:input type="toggle" name="packed" checked= "{!v.item.Packed__c}" />
        
    </p>
</aura:component>
DVB VIKRAMDVB VIKRAM
<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" value="{!v.item.Packed__c}" /><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>
this code is working..
rajenderrajender
<aura:component>
    
    <aura:attribute name="item" type="Camping_Item__c" required = "True"/>
    
     <p>Name:
        <ui:outputText value = "{!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}"/>
    </p>
    <p>Packed?:
        <lightning:input  type="toggle" checked="{!v.item.Packed__c}"/>
    </p>
</aura:component>
Rishabh Kumar 21Rishabh Kumar 21
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    
    <p>Name:
        <lightning:formattedText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <lightning:formattedNumber style="currency" value="{!v.item.Price__c}"/>
    </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}" />
  Packed
    </p>
</aura:component>

 
Sneha1991Sneha1991
I am facing the same issue:

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>         
       <lightning:formattedText value="{!v.item.Name}"/>
    </p>
    <p>
        Price: <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>      
    </p>
    <p> 
       Quantity: <lightning:formattedNumber value="{!v.item.Price__c}"/>         
    </p>
    <p>      
        <lightning:input label="Packed?" name="Packed" type="toggle"  checked="{!v.item.Packed__c}"/>         
    </p>    
    <lightning:button label="Packed!" onclick="{!c.packItem}" disabled="{!v.item.Packed__c}"/>    
</aura:component>

Thanks.
Gopal ChatGopal Chat
Challenge Not yet complete... here's what's wrong: 
The Quantity field is either not using the lightning formattedNumber component or the value of the item's Quantity__c.
I am facing the same issue till now.here is my code

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <ui:outputText value ="{!v.item.Name}"/>
    <ui:outputCurrency  value="{!v.item.Price__c}"/>
    <ui:outputNumber value="{!v.item.Quantity__c}"/>
    <ui:outputCheckbox value="{!v.item.Packed__c}"/>
</aura:component>
 
Josué PeixotoJosué Peixoto
I had the same issue but is the correct code:
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>

    <lightning:formattedNumber value="{!v.item.Name}"/>
    <lightning:formattedNumber  value="{!v.item.price__c}" style="currency"/>
    <lightning:input type="toggle" label="Packed" name="togglevalue" checked="{!v.item.Packed__c}" />
    <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
    
</aura:component>

Regards
Ashutosh Verma 38Ashutosh Verma 38
Please Try this.

<aura:component >    
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name:
    <ui:outputText value="{!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}"/></p>
    <p>Packed?:<lightning:input type="toggle" label="Packed" name="togglevalue" checked="{!v.item.Packed__c}" />
    </p>
</aura:component>
Bala Gangadhar VadlamuriBala Gangadhar Vadlamuri
<aura:component>
    <aura:attribute name="item" type="Camping_Item__c" required = "true"/>
    <p>Name:
        <ui:outputText value="{!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}"/>
    </p>
    <p>Packed:
        <lightning:input type="toggle" label="Packed" name="Packed" checked="{!v.Item.Packed__c}" />
    </p>
</aura:component>
This code worked for me!
 
Nishant Dubey 7Nishant Dubey 7
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name:
        <ui:outputText value = "{!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" name="Packed" checked="{!v.item.Packed__c}" />
    </p>
</aura:component>
This Code working Super fine but practice also.
JsinghJsingh
hi
this my code

<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="decimal"/>
     </p>
    <p>
        Name: {!v.item.Name__c}</p>
   
    <p>
        <lightning:input type="toggle"                            
                         label="Packed ?"                           
                         name="packed "                         
                         checked="{!v.item.Packed__c}" />
    </p> 
    </aura:component>
still i am not able to pass the challenge
error is -Challenge not yet complete... here's what's wrong:
The Quantity field is either not using the lightning formattedNumber component or the value of the item's Quantity__c.
and
challenge was-

Create a Packing List Item Component
Create a Lightning Component to display a single item for your packing list.
Create a component called campingListItem.
Add an attribute named item of type Camping_Item__c that is required.
Display Name, Price, Quantity, Packed using an expression.
Display Price and Quantity using the appropriate formatted number fields.
Display Packed status using a toggle.
JsinghJsingh
<p>Quantity :
         <lightning:formattedNumber value="{!v.item.Quantity__c}" style="number"/> 
i am using number not decimal

pls help me 
sarat Rahul 10sarat Rahul 10
Here is my code...it worked fine for me.

<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}"/>
    <lightning:input type="toggle" checked="{!v.item.Packed__c}"/>
    
</aura:component>
sagarvp9sagarvp9
Below worked for me :)

<aura:component >
    <aura:attribute Name="item" type="Camping_Item__c" required="true" />
     <ol>
        <li>{!v.item.Name}</li>
        <li><lightning:formattedNumber name="Price" value="{!v.item.Price__c}" style="currency"/> </li>
        <li><lightning:formattedNumber  name="Quantity" value="{!v.item.Quantity__c}" style="decimal"/></li>         
        <li><lightning:input type="toggle"  checked="{!v.item.Packed__c}" label="Packed?" name="Packed"  /></li>                                                             </ol>
</aura:component>             
                                                                  
   
Abdulla d 5Abdulla d 5
I have passed this test with this code.....

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:false}" />
    <lightning:card title="{!v.item.Name}" iconName="standard:scan_card"
                    class="{!v.item.Packed__c ?'slds-theme--success' : ''}">
        <p>
            Name :<lightning:input value="{!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="currency"/>
        </p>
        <p>
            <lightning:input type="toggle" label="Reimbursed?" name="reimbursed"                         
                             checked="{!v.item.Packed__c}" />
        </p>
    </lightning:card>
</aura:component>
Riccardo CastellanoRiccardo Castellano
this code pass the test :
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>{!v.item.name}</p>
    <p>{!v.item.price__c}</p>
    <p>{!v.item.quantity__c}</p>
    <p>{!v.item.packed__c}</p>
    <lightning:formattedNumber value="{!v.item.price__c}" style="currency"/>
    <lightning:formattedNumber value="{!v.item.quantity__c}" style="number"/>
    <p>
        <lightning:input type="toggle"                            
                         label="PackedStutus"                           
                         name="packed"                         
                         checked="{!v.item.packed__c}" />
     </p> 
</aura:component>

 
Harsha vardhan 135Harsha vardhan 135
This page has an error. You might just need to refresh it. Aura.loadComponent(): Failed to initialize application. An internal server error has occurred Error ID: 1238697463-116031 (-157401857)
Eswar Vallangi 5Eswar Vallangi 5
After so many changes, This code completed the challenge. 
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    
    <p>Name:
        <ui:outputText value = "{!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>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
     </p> 
</aura:component>

Thank you,
Eshu
Priyesh Kumar 10Priyesh Kumar 10

Getting Below error when calling the component from .app

This page has an error. You might just need to refresh it. Aura.loadComponent(): Failed to initialize application. An internal server error has occurred Error ID: 1748342382-17731 (-157401857)

But I cleared the trailhead challenge with  below code
<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>
        <lightning:input type="toggle" 
                         label="Packed" 
                         name="togglevalue" 
                         checked="{!v.item.Packed__c}" />
     </p> 
</aura:component>

Vikash Kumar MandalVikash Kumar Mandal
I completed this challenge you can use my code.
<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>
        <lightning:input type="toggle"
                         label="Packed?"
                         name="packed"
                         checked="{!v.Item.Packed__c}"/>
    </p>
</aura:component>


 
Jasmin ChauhanJasmin Chauhan
Hi, 
If you get below error then you have to just change API version 41.0

Versions are assigned declaratively in the Developer Console. When you’re working on a component, click Bundle Version Settings in the right panel to define the version. Change API version as 41.0
User-added image
User-added image
 
Joshua Cournoyer 22Joshua Cournoyer 22
<aura:component >
    <aura:attribute name="item"  type="Camping_Item__c"
                    default="{name:'Tent', Price__c:100, Quantity__c:1, Packed__c:false}"
                    /> <!-- required="true" type="String"  -->
    <p> The Item is <ui:outputText value="{!v.item}"></ui:outputText></p>
    <p>Name:
        <ui:outputText value="{!v.item.name}" />
    </p>
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}" />
    </p>
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>Packed:
        <lightning:input type="toggle"
                         label="Packed?"
                         name="Packed"
                         checked="{!v.item.Packed__c}" />
    </p>
    <p><lightning:button label="Packed!"
                         onclick="{!c.packItem}"/>
    </p>
</aura:component>

({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c",true); // it got added mistakenly in my previous comment. Not required.
        var cItem = component.get("v.item",true); // Getting the component's attribute
        cItem.Packed__c = true; // Assigning the field value to True
        component.set("v.item",cItem); // Setting the attribute back to component
        var btnClicked = event.getSource(); //Getting the button
        btnClicked.set("v.disabled","true"); // Setting the button to disabled.
    }
})

 
Vinothini murugesh 10Vinothini murugesh 10
Hi All ,
This code is wrking perfectly and i have completed the challenge
1) Campaingnlistctroller.js:
({
    
    doInit: function(component, event, helper){
        
        var action=component.get("c.getItems");
        action.setCallback(this,function(response){
            var state=response.getState();
            if(state==="SUCCESS"){
                component.set("v.items",response.getReturnValue());
                
            }
            else{
                console.log("Failed with state: " + state);
            }
        });
        $A.enqueueAction(action);
    
},
    handleAddItem: function(component, event, helper){
      var itemToSave=event.getParam("item");
      
        var action=component.get("c.saveItem");
        action.setParams({"item":itemToSave});
        
        action.setCallback(this,function(response){
            
            var state=response.getState();
            if(state==='SUCCESS'){
                var items=component.get("v.items");
                items.push(response.getReturnValue());
                component.set("v.items",items);
            }
        });
        $A.enqueueAction(action);
}
    
})


2)campaignlistcmp:
<aura:component controller="CampingListController">
    <aura:attribute name="items" type="Camping_Item__c[]" />
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem}"/>
    
        
    <lightning:layout >
        <lightning:layoutItem padding="around-small" size="6">
            <c:campingListForm/>
        </lightning:layoutItem>
    </lightning:layout>
    
    <lightning:card title="Camping Items">
        <p class="slds-p-horizontal--small">
            <aura:iteration items="{!v.items}" var="item">
                <c:campingListItem item="{!item}" />
            </aura:iteration>
        </p>
    </lightning:card>
</aura:component>

campaignlisthelper:
({
    createItem : function(component,event,item) {
        console.log('step6');
        var action=component.get("c.saveItem");
        action.setParams({
            "item": item
        });
        action.setCallback(this,function(response){
            var state=response.getState();
            if(state=="SUCCESS"){
                console.log('step7');
                var items=component.get("v.items");
                items.push(response.getReturnValue());
                component.set("v.items",items);
            }
            else{
                console.log('State Returned '+state);
            }
        });
        $A.enqueueAction(action);
    }
})

3)Campaignlistformcmp:
<aura:component >
    <aura:attribute name="newItem" type="Camping_Item__c" default= "{'sobjectType':'Camping_Item__c',
                                                                    'Name':'',
                                                                    'Packed__c':false,
                                                                    'Quantity__c':0,
                                                                    'Price__c':0
                                                                    }"/>
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    
    <form>
        <lightning:input aura:id="itemform" label="Camping Name" value="{!v.newItem.Name}" messageWhenValueMissing="Camping Name cannot be blank" required="true"/>
        <lightning:input aura:id="itemform" type="number" label="Quantity" min="1" value="{!v.newItem.Quantity__c}" messageWhenRangeUnderflow="Enter minimum 1 Quantity" required="true" />
        <lightning:input aura:id="itemform" type="itemform" label="Price" formatter="currency" value="{!v.newItem.Price__c}" min="0.1" step="0.01" messageWhenRangeUnderflow="Enter an amount that's at least $0.10."  required="true"/>
        <lightning:input aura:id="itemform" type="checkbox" label="Packed?" checked="{!v.newItem.Packed__c}" />
        <lightning:input type="date" label="Date"/>
        <lightning:button label="Create Camping" class="slds-m-top--medium"
                              variant="brand"
                              onclick="{!c.clickCreateItem}"/>
    </form>
</aura:component>


4)Campaingnlistfomrcontroller:js
({
    clickCreateItem: function(component, event, helper) {
        console.log('step1');
        var validItem = component.find('itemform').reduce(function (validSoFar, inputCmp) {

            // Displays error messages for invalid fields

           inputCmp.showHelpMessageIfInvalid();
           return validSoFar && inputCmp.get('v.validity').valid;

        }, true);


        if(validItem){
            console.log('step2');
            var item = component.get("v.newItem");
            var newItem = JSON.parse(JSON.stringify(item));
            console.log('step3');
            //var items=component.get("v.items");
            console.log('step4');
            //items.push(newItem);
            //component.set("v.items", items);
            
           
         helper.createItem(component,event,newItem);
             
        }
    }
})

5)Campaignlistformhelper:
({
    createItem : function(component,event,item) {
         
        var saveEvent=component.getEvent("addItem");
        saveEvent.setParams({"item":item});
        saveEvent.fire();
        
         component.set("v.newItem",{'sobjectType':'Camping_Item__c',
                                                                    'Name':'',
                                                                    'Packed__c':false,
                                                                    'Quantity__c':0,
                                                                    'Price__c':0
                                                                    } );
    }
})

6)CampingListController:
public with sharing class CampingListController {
    @AuraEnabled
    public static List<Camping_Item__c> getItems() {
       return [SELECT Id, Name, Price__c, Quantity__c, Packed__c FROM Camping_Item__c];
   }
   
    @AuraEnabled
   public static Camping_Item__c saveItem(Camping_Item__c item) {
     upsert item;
      return item;
 }
}

7)addItemEvent:
<aura:event type="COMPONENT">
    <aura:attribute name="item" type="Camping_Item__c"/>
</aura:event>

8)CampaignListitemcmp:
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" />
    
   <p>Name:
       <ui:outputText value="{!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}"/>
    </p>
    
    <p>
        <lightning:input type="toggle" label="Packed" checked="{!v.item.Packed__c}" />
    </p>
    
    <lightning:button label="Packed!" onclick="{!c.packItem}"/>
</aura:component>


9)CampaignListitemcontroller.js:
({
    packItem : function(component, event, helper) {
        component.set("v.item.packed__c",true);
        var btn=event.getSource();
         btn.set("v.disabled",true);
    }
})
Ajinkya AmbalkarAjinkya Ambalkar
This code can work for you:

<aura:component >
    <aura:attribute name= "item" type= "Camping_Item__c" required="true"/>
         <p>Name:  
             <ui:outputText value="{!v.item.Name}"/> 
            </p> 
         <p>Pack:   
                 <lightning:input type="toggle"  checked="{!v.item.Packed__c}"/>
            </p>
          <p>Price:  
              <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
            </p>
          <p>Quantity:  
              <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
          </p>    
</aura:component>
Henri BendelsHenri Bendels
Hi, 

use lightning: components instead of ui: is as follows ...

8) CampingListitemcmp:

<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="togglevalue" checked="{!v.item.Packed__c}" /></p>   

    <div>    <lightning:button label="Packed!"   onclick="{!c.packItem}"/> </div>
    
</aura:component>
Mohamed Arzad AliMohamed Arzad Ali
This is the solution
 
<aura:component >
	<aura:attribute name="item" type="Camping_Item__c" required="true"/>
    
    <lightning:formattedText value="{!v.item.Name}"/>
    <lightning:formattedNumber  style="currency" value="{!v.item.Price__c}"/>
    <lightning:formattedNumber style="decimal" value="{!v.item.Quantity__c}"/>
    <lightning:input type="toggle" checked="{!v.item.Packed__c}"/>
</aura:component>

It worked !
UTKARSH MISHRA 21UTKARSH MISHRA 21
You can use this also , it worked for me

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name:
        <lightning:formattedText value="{!v.item.Name}" style="Text"/>
    </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>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
     </p> 
</aura:component>

 
Anoop K SharmaAnoop K Sharma
I've successfully executed the programe as below:

<aura:component >
       <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name: 
        <lightning:formattedText  value="{!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>
        Packed : {!v.item.Packed__c}
    </p>
    <p>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
     </p> 
</aura:component>
priyanshu nemapriyanshu nema
I've successfully executed the programe as below:

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <ui:outputText value="{!v.item.Name}"/>
    <ui:outputCurrency  value="{!v.item.Price__c}"/>
    <lightning:formattedNumber value="{!v.item.Quantity__c}" style="currency"/>
    <lightning:input type="toggle"                            
                     label="Packed"                           
                     name="Packed"                         
                     checked="{!v.item.Packed__c}" />
</aura:component>
Riya DhananiRiya Dhanani
I was facing many errors while solving thia unit.
At the end, this code worked for me.
I GOT ''CHALLENGE COMPLETED" BY USING THIS CODE.
I hope it helps you all.

<aura:component > 
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <aura:attribute name="item2" type="Camping_Item__c" required="true"
                    default="{
                             'Name':'Test NAme',
                             'Price__c':'12.90',
                             'Quantity__c':'12.0',
                             'Packed__c':true
                             }"/>
    
    <ui:outputText value="{!v.item.Name}"/><br/>
    <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/><br/>
    <lightning:formattedNumber value="{!v.item.Quantity__c}" format=".00"/><br/>
    <lightning:input checked="{!v.item.Packed__c}" type="toggle"/>
</aura:component>
Shubham Raj 29Shubham Raj 29

Hey All,You all can try this code. this is working fine on mine and challenge also has been completed.

COMPONENT FILE: -

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"></aura:attribute>
    
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>
        Name: {!v.item.Name}
    </p>
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}" style="currency"/>
    </p>
    <p>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
     </p>
    <lightning:button label="Packed!" onclick="{!c.packItem}" />
</aura:component>

 

CONTROLLER.JS

({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c",true);
        
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true); 
    }
})

Saket Ranjan 3Saket Ranjan 3
following is the right code ,go with it,and do like/comment as per your result.

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
     <ui:outputText value="{!v.item.Name}"/>
    <lightning:input type="toggle"  label="Packed?"  name="Packed" checked="{!v.item.Packed__c}"/>
    <lightning:formattedNumber   value="{!v.item.Price__c}" style="currency"/>
    <lightning:formattedNumber  value="{!v.item.Quantity__c}"/>
</aura:component>
Amina Ansari 15Amina Ansari 15
Hello everyone,this code runs successfully!!!

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <lightning:input type="text" value="{!v.item.name}"/>
    <lightning:formattedNumber value="{!v.item.Price__c}" style="Currency"/>
    <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
    <lightning:input type="toggle" label="Packed?" name="Packed" checked="{!v.item.Packed__c}"/>
</aura:component>
Abhi bhardwajAbhi bhardwaj
This is a solution 
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name
        <lightning:input type="text" value="{!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}"  />
    </p>
    <p>Packed
         <lightning:input name="Packed"
                     label="Packed"
                     type="toggle"
                     checked="{!v.item.Packed__c}"/>                
    </p>
</aura:component>

 
Yash Mehta 44Yash Mehta 44
<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}" />
    </p>
    <p>
        <lightning:input type="toggle"                            
                         label="Packed"                           
                         name="packed"                         
                         checked="{!v.item.Packed__c}" />
    </p>
	
</aura:component>
Try this worked for me !
I passed the challenge..
 
AVINASH NAIR 7AVINASH NAIR 7
Thanks @Yash Mehta 44,

It really helped me to pass the challenge. :)
MCL AirconMCL Aircon
This is very helpful. Thanks AIRCON servicing (https://Mclaircon.com)
Varun Sharma 150Varun Sharma 150
Here is a working sample to entire which I passed with success today:

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <aura:attribute name="Name" type="String"/>
    <aura:attribute name="Price" type="Integer"/>
    <aura:attribute name="Quantity" type="Integer"/>
    <aura:attribute name="Packed" type="Boolean"/>
    
    <p>Name:<lightning:formattedText value="{!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><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>


Controller:

({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c", true);
        var button = event.getSource();
        button.set('disabled',true);      
    }
})

Please like if you feel it worked for you !!!!
Apps StatusApps Status
This is the best ever method to get the test of the get methode use the following lines
click here (http://showboxinfo.com) and you can get latest whatsapp (http://whatsappstatus.vip) status now for more info click here (http://appsapkbox.com)
Vikas Sharma 173Vikas Sharma 173
The Following code will helf to pass the chellenge
 
<aura:component >
    <aura:attribute name ="item" type ="camping_item__c" required ="true"/>
    <p>
        Name:{!v.item.Name}
    </p>
    
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}" />
    </p>
    
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    
    <p>
        <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
        
    </p>
</aura:component>

 
GOURISHETTY SAIRAMGOURISHETTY SAIRAM
This code works perfectly 
 
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name:
        <ui:outputText value = "{!v.item.Name}"/>
    </p>
    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
        <lightning:formattedNumber style="currency" value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed?:
        <lightning:input type="toggle" checked="{!v.item.Packed__c}"/>
    </p>
</aura:component>
meenal sankhla 22meenal sankhla 22
please check below code which works for me 
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="item" type="Camping_Item__c" required="true" default=""></aura:attribute>    
    <p>Name :{!v.item.Name}</p>
    <p>Price :{!v.item.Price__c}</p>
    <p>Quantity : {!v.item.Quantity__c}</p>
    <p>Packed :{!v.item.Packed__c}</p>
    <p>
  <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"></lightning:formattedNumber>
  <lightning:formattedNumber value="{!v.item.Quantity__c}" style="currency"></lightning:formattedNumber>
   </p>   
    <p>
    <lightning:input type="toggle" label="Packed Status" name="Packed Status" checked="{!v.item.Packed__c}"></lightning:input>
    </p>
</aura:component>
 
Rajul VishwakarmaRajul Vishwakarma
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <lightning:formattedText value="{!v.item.Name}"/>
    <lightning:formattedNumber value="{!v.item.Price__C}" style="currency"/>
    <lightning:formattedNumber value="{!v.item.Quantity__c}" />
    <lightning:input type="toggle"
                         label="Packed?"
                         name="packed"
                         checked="{!v.item.Packed__c}" />
</aura:component>
Akshay MenseAkshay Mense
This Works Perfectly fine.


<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>
Amol S GaikwadAmol S Gaikwad
Please use below code snippet. You should be able to pass the challenge

<aura:component>
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
        Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}" style="currency"/>
    </p>
    <p>
        Name: {!v.item.Name}
    </p>
    <p>
        <lightning:input type="toggle"
                         label="Packed"
                         name="Packed"
                         checked="{!v.item.Packed__c}" />
     </p>
    <!-- Other markup here -->
</aura:component>
parsoramparsoram
For quantity you should not use 'Currency'. Use below code, it works.
 
<aura:component>
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
        <p>Name:<ui:outputText value = "{!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>
        <lightning:input type="toggle"
                         label="Packed?"
                         name="packed"
                         checked="{!v.item.packed__c}" />
     </p>
    <!-- Other markup here -->
</aura:component>

 
Kalpesh Nikam 7Kalpesh Nikam 7
For the name we can print in <p> tag without additional tag and for Quantity you dont need to set style number is default.
<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}"/>
    </p>

    <p>
        <lightning:input type="toggle"
                         label="Packed?"
                         name="packed"
                         checked="{!v.item.packed__c}" />
     </p>
    <!-- Other markup here -->
</aura:component>
This code also accepted.
sammouda Elyessammouda Elyes
This worked for me 
<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>
        Name: {!v.item.Name}
    </p>
     <p>Price:
         <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>
Rajveer Singh RawatRajveer Singh Rawat
hey Guys there is lots of issue in your code
Write this Code and check Challenge you get success..
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <P> Name:{!v.item.name}
    <lightning:outputField value="{!v.item.name}"/>
        </P>
    <P> Price:{!v.item.Price__c}
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    
        </P>
    <P> Quantity:{!v.item.Quantity__c}
       <lightning:formattedNumber value="{!v.item.Quantity__c}" style="currency"/>
        
</P>
    <P> Packed:{!v.item.Packed__c}
    <lightning:outputField value="{!v.item.Packed__c}"/>
        <lightning:input type="toggle"
                         label="Reimbursed?"
                         name="reimbursed"
                         checked="{!v.item.Packed__c}" />
    </P>
    
</aura:component>
Shubham guptaShubham gupta
Hello guys Use thiis simple & Optimized code for pass Trailhead Component:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="item" type="Camping_Item__c" required = "true" />
    <p> Name: {!v.item.Name}</p>
    <p> <lightning:formattedNumber value="{!v.item.Price__c}" style = "currency"/></p>
    <p> <lightning:formattedNumber value="{!v.item.Quantity__c}" style = "Number"/> </p>
    <p>  <lightning:input type="toggle"
                 label="Packed: "
                 name="toggle"
                 checked="{!v.item.Packed__c}"/></p> 
</aura:component>
Juliho CastilloJuliho Castillo
This works for mw
<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>

Source: https://github.com/Mulodo-Salesforce-Training/trailhead-salesforce-challenge