Apex Code Development You need to sign in to do that
Don't have an account?
Lightning Trailhead challenge not completed please help
The challenge requirements is below:
Mark Item as Packed
Add a button to the campingListItem component that when clicked, marks the item as packed.
Add a button labeled Packed! that calls the packItem controller function when clicked.
The controller action marks the item attribute as packed, updates the item value provider and disables the button.
My Component:
<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:
<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>
My Controller:
({
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");
}
})
Mark Item as Packed
Add a button to the campingListItem component that when clicked, marks the item as packed.
Add a button labeled Packed! that calls the packItem controller function when clicked.
The controller action marks the item attribute as packed, updates the item value provider and disables the button.
My Component:
<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:
<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>
My Controller:
({
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");
}
})
You are trying to execute this without passing any record in the attribute you mentioned in component. Trailhead validates it by passing a valid record that is the reason the challenge got passed. In further modules, you will learn to get the record from apex controller. I would suggest you to go through that and then validate this component again by passing some valid records.
About the javascript:
({
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.
}
})
Thanks,
Sampat Khurana
All Answers
Use the below code in js controller to resolve this issue.
({
packItem : function(component, event, helper) {
component.set("v.item.Packed__c",true);
var cItem = component.get("v.item",true);
cItem.Packed__c = true;
component.set("v.item",cItem);
var btnClicked = event.getSource();
btnClicked.set("v.disabled","true");
}
})
Thanks,
Sampat Khurana
Thanks,
Sampat Khurana
You are trying to execute this without passing any record in the attribute you mentioned in component. Trailhead validates it by passing a valid record that is the reason the challenge got passed. In further modules, you will learn to get the record from apex controller. I would suggest you to go through that and then validate this component again by passing some valid records.
About the javascript:
({
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.
}
})
Thanks,
Sampat Khurana
<aura:attribute name="item" type="Camping_Item__c" default="{ 'sobjectType': 'Camping_Item__c',
'Name': 'test-item',
'Price__c': 10,
'Quantity__c': 1,
'Packed__c': false}"/>
packItem : function(component, event, helper) {
component.set("v.item",component.Packed__c=true);
event.getSource().set("v.disabled","true");
}
})
I think this is the best optimized way to solve this problem.
It will avoid unnecessory variable declarations and assignments.