<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:
<ui:outputNumber value="{!v.item.Quantity__c}" />
</p>
<p>Price:
<ui:outputCurrency value="{!v.item.Price__c}" />
</p>
<p>Packed?:
<ui:outputCheckbox value="{!v.item.Packed__c}" />
</p>
<p><ui:button label="Packed!" press="{!c.packItem}"></ui:button>
</p>
</aura:component>Now Its required of me to :Add a button to the campingListItem component that when clicked, marks the item as packed.1.Add a button labeled "Packed!" that calls the packItem controller function when clicked.2.The controller action marks the item attribute as packed and disables the button.I have done with the first pointI'm struggling with the second point.the controller code looks something like this (which currently isnt working)({
packItem : function(component, event, helper) {
var btn= event.getSource();
var BtnMessage =btn.get("v.label");
component.set("v.item","Packed");
btn.disabled=false;
}
})each time I have failing the trailhead because of this error messageChallenge Not yet complete... here's what's wrong:
The campingListItem JavaScript controller isn't setting the 'Packed' value correctly.
Hi Atticus,Please try updating following statement in your controller:({ packItem: function(component, event, helper) { var a = component.get("v.item",true); a.Packed__c = true; component.set("v.item",a); var btnClicked = event.getSource(); btnClicked.set("v.disabled",true); }})Thanks,Amit This worked for meComponent:<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" name="togglevalue" checked="{!v.item.Packed__c}" /> </p> <div> <lightning:button label="Packed!" onclick="{!c.packItem}"/> </div></aura:component>Controller:({ packItem : function(component, event, helper) { var btnClicked = event.getSource(); var btnMessage = btnClicked.get("v.label"); component.set("v.item.Packed__c", "true"); btnClicked.set("v.disabled",true); }}) If anyone is struggling with this challenge currently. I found that when it asks you to create a "lightning" button, you actually have to use a <lightning:button /> component.
<lightning:button label="Packed!" onclick="{!c.packItem }"/>
Sorry, just making an correction to utilize the BtnMessage variable: ({
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);
}
})
<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>
<p>
<lightning:button label="Packed!"
onclick="{!c.packItem}"/>
</p>
</aura:component>
({
packItem: function(component, event, helper) {
var a = component.get("v.item",true);
a.Packed__c = true;
component.set("v.item",a);
var btnClicked = event.getSource();
btnClicked.set("v.disabled",true);
}
})
<aura:component > <aura:attribute name="item" type="Camping_Item__c" required="true"/> <p>Name:{!v.item.Name}</p> <p>{!v.item.Price}</p> <!--<p>{!item.Quantity__c}</p>--> <p>{!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}" style="number"/> </p> <p> <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) { var a=component.get(v.item); a.Packed__c=True; component.set("v.item",a); var btn1=event.getSource(); document.getElementById(btn1.id).disabled=true; }}) Hi All,with above code I have completed the challenge thanks!!...When I tried to add this componet to Application and tried to check the UI part..I got below error, Can some one please let me know what the mistake is???Something has gone wrong. [NoErrorObjectAvailable] Aura.loadComponent(): Failed to initialize application. An internal server error has occurred Error ID: 991118890-131685 (-1741317831) . Please try again.APP:<aura:application > <c:campingListItem /></aura:application>COMPONENT:<aura:component > <aura:attribute name="item" type="Camping_Item__c" required="true"/> <ui:outputText value="{!v.item}"/> <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}"/> <ui:button label="packed!" press="{!c.packItem}" > </ui:button></aura:component>CONTROLLER:({ packItem: function(component, event, helper) { var a = component.get("v.item",true); a.Packed__c = true; component.set("v.item",a); var btnClicked = event.getSource(); btnClicked.set("v.disabled",true); }})Thanks The cleanest and sintactically correct solution:----------------------------COMPONENT--------------------------- <aura:attribute name="item" type="Camping_Item__c" required="true" default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:true}"/>
<p>{!v.item.Name}</p>
<lightning:formattedNumber value="{!v.item.Price__c}" style="currency" currencyCode="USD"/>
<lightning:formattedNumber value="{!v.item.Quantity__c}" maximumFractionDigits="0"/>
<lightning:input type="toggle" label="Packed?" name="packed" checked="{!v.item.Packed__c}"/>
<lightning:button label="Packed!" onclick="{!c.packItem}"/>
</aura:component>----------------------------CONTROLLER---------------------------
packItem : function(component, event, helper) {
component.set("v.item.Packed__c", true);
event.getSource().set('v.disabled',true);
}
})
Controller code should be as below:({ packItem : function(component, event, helper) { component.set("v.item.Packed__c",true); component.set("v.disabled",true); }}) Hi All, Please try the following code:<aura:component> <aura:attribute name="item" type="Camping_Item__c"/> <lightning:button label="Packed!" onclick="{!c.packItem}"/></aura:component>({ packItem : function(component, event, helper) { var a=component.get(v.item); a.Packed__c=True; component.set("v.item",a); var btn1= event.getsource(); document.getElementById(btn1.id).disabled = true; }})