You need to sign in to do that
Don't have an account?
Eric 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.
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,
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.
<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,
Jeff Douglas
Trailhead Developer Advocate
All Answers
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.
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
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
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?
I tried on another org, without namespace and the error remains the same.
Do you have any other idea?
Thanks
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!
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 Douglas
Trailhead Developer Advocate
Jeff Douglas
Trailhead Developer Advocate
Hi Jeff, I am still getting this error:
I have checked that Quantity is using Number type"Challenge Not yet complete... here's what's wrong:
The Quantity field is not using the correct output component."
Jeff Douglas
Trailhead Developer Advocate
Jeff Douglas
Trailhead Developer Advocate
Thanks for the answer. Is there a way to pass the challenge? Since I can't remove the namespace once it's registered.
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...
HTH
Jeff Douglas
Trailhead Developer Advocate
It worked, thanks! (Without namespace and with required="true")
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:
Can you please validate my understanding.
Thanks,
Yashita
Jeff Douglas
Trailhead Developer Advocate
Just for giving an update.
I have set namespace on my org. When I wrote the code as follows it passses the challege:
Thanks,
Amit
Thanks :)
Do you now how hard I was beating my head against the wall on this?!
I was using
instead of
Hope this helps others.
<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
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);
}
})
In your controllers, whenever you are referencing the item in the component use the following: Then set the item's Packed__c value. Then you can get a reference to the button that was clicked with: Then you can .set "v.disabled" and then finally .set the item back to "v.item".
HTH
Jeff Douglas
Trailhead Developer Advocate
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.
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
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.
<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>
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
<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>
Anyone knows why?
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).
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
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
<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>
<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>
<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>
I were having the Same Issue. I have fixed it my making following change.
Definitely this trailhead needs revision. The reasons I couldn't solve it feel pretty far from what was being taught in the module.
Hi Eric Kendi Shiraishi,
If above code fixed you problem please mark this is best answerI have solved this you can see my component code
Thanks Mukesh at Girikon LLC (http://www.girikon.com)
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
<aura:attribute name="item" type="Camping_Item__c" required="true" default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:false}"/>
Any suggestions would be appreciated! Thanks!!
<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?
<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.
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>
<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>
<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>
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
Thanks!
required="true"
to the attribute to get it to pass. Here's a sample.
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?
Thanks
Yogesh
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
***************************************
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
<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
Try the code I posted above in the component it should work
It worked for me. THanks. I missed min = 1 for qunatity. Thanks again.!!
<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.
<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.
<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>
<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>
<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>
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>
This now works.
campingListItem.cmp
<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>
<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>
<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>
Price and Quantity in Formatted number and packed in a toggle checkbox
<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>
Thanks,
Checkout these and visit www.forcelearn.com
<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.
}
})
<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>
Thanks
A.T.
Please find answer below. Its working. Many thanks,
Subhan.
<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>
<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.
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, and use <lightning:input /> tag instead of <ui:outputCheckbox />,
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.
Regards,
Gautam.
Your used dynamic notaions without item attribute. like v.Quantity__c
Try with following:
(default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:false}") is redunant here, it's used for testing.
<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
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,
```
<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>
```
It is asking to use lightning input components with their proper attributes. This should work :
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>
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>
<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>
<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>
<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>
<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..
<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>
<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.
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>
<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
<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>
<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.
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.
<lightning:formattedNumber value="{!v.item.Quantity__c}" style="number"/>
i am using number not decimal
pls help 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>
<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>
<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>
Thank you,
Eshu
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>
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
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);
}
})
<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>
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>
It worked !
<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>
<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>
<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>
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>
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);
}
})
<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>
<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>
I passed the challenge..
It really helped me to pass the challenge. :)
<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 !!!!
click here (http://showboxinfo.com) and you can get latest whatsapp (http://whatsappstatus.vip) status now for more info click here (http://appsapkbox.com)
<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>
<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>
<aura:component >
<aura:attribute name="item" type="Camping_Item__c" required="true"/>
Name: <ui:outputText value="{!v.item.Name}"/>
<p>Price :
<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
</p>
<p>Quantity :
<lightning:formattedNumber value="{!v.item.Quantity__c}"/>
</p>
<p>Packed:
<lightning:input type="toggle" label="Packed" checked="{!v.item.Packed__c}"/>
</p>
</aura:component>
<aura:component>
<aura:attribute name="item" type="Camping_Item__c" required="true"/>
<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>
<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>
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>
<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>
Source: https://github.com/Mulodo-Salesforce-Training/trailhead-salesforce-challenge