You need to sign in to do that
Don't have an account?
Radiya Firdous
Lightning Components Basics - Input Data Using Forms - Help completing challenge
Hi!
The error I'm seeing is 'The campingList component isn't iterating the array of 'items' and creating 'campingListItem' components'. I think my problem is in my campingListItem.cmp and campingListItemController. I am iterating through the list of items and outputting them but are they being created? When is the packItem method being accessed?
My code is as follows:
campingList.cmp (Component)
<aura:component >
<aura:attribute name="items" type="Camping_Item__c[]"/>
<aura:attribute name="newItem" type="Camping_Item__c"
default="{ 'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0}"/>
<!-- CREATE NEW ITEM FORM -->
<form class="slds-form--stacked">
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<ui:inputText aura:id="name" label="Item 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: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">
<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}"/>
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputCheckbox aura:id="packed" label="Packed"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newItem.Packed__c}"/>
</div>
</div>
<div class="slds-form-element">
<ui:button label="Create Item"
class="slds-button slds-button--brand"
press="{!c.clickCreateItem}"/>
</div>
</form>
<!-- / CREATE NEW EXPENSE FORM -->
<div class="slds-card slds-p-top--medium">
<!--
<header class="slds-card__header">
<h3 class="slds-text-heading-small">Items</h3>
</header>-->
<section class="slds-card__body">
<div id="list" class="row">
<aura:iteration items="{!v.items}" var="item">
<c.campingListItem item="{!item}"/>
</aura:iteration>
</div>
</section>
</div>
</aura:component>
campingListController
({
clickCreateItem : function(component, event, helper) {
// Simplistic error checking
var validItem = true;
var item = component.get("v.newItem");
// Name must not be blank
var nameField = component.find("name");
var itemname = nameField.get("v.value");
if ($A.util.isEmpty(itemname)){
validItem = false;
nameField.set("v.errors", [{message:"Please enter item name"}]);
}
else {
nameField.set("v.errors", null);
}
// Quantity must not be blank
var quantityField = component.find("quantity");
var itemquantity = quantityField.get("v.value");
if ($A.util.isEmpty(itemquantity)){
validItem = false;
quantityField.set("v.errors", [{message:"Please enter item quantity"}]);
}
else {
quantityField.set("v.errors", null);
}
// Price must not be blank
var priceField = component.find("price");
var itemprice = priceField.get("v.value");
if ($A.util.isEmpty(itemprice)){
validItem = false;
priceField.set("v.errors", [{message:"Please enter price"}]);
}
else {
priceField.set("v.errors", null);
}
if(validItem){
var newItem = component.get("v.newItem");
// document.write('Create item: '+JSON.stringify(newItem));
var theItemList = component.get("v.items");
var newItem = JSON.parse(JSON.stringify(newItem));
theItemList.push(newItem);
component.set("v.items",theItemList);
}
var setList = component.get("v.items")
console.log('the Item list is: '+JSON.stringify(setList));
component.set("v.newItem",{'sobjectType': 'Camping_Item__c',
'Name': '',
'Price__c': 0,
'Quantity__c': 0,
'Packed__c': false });
}
})
campingListItem.cmp
<aura:component >
<aura:attribute name='item' type="Camping_Item__c" />
<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>
</aura:component>
campingListItemController
({
packItem : function(component, event, helper) {
var trialItem = component.get("v.item")
console.log('the Item is: '+JSON.stringify(trialItem));
var x = component.get("v.item", true);
x.Packed__c = true;
component.set("v.item", x);
var buttonClicked = event.getSource();
buttonClicked.set("v.disabled", true);
}
})
The error I'm seeing is 'The campingList component isn't iterating the array of 'items' and creating 'campingListItem' components'. I think my problem is in my campingListItem.cmp and campingListItemController. I am iterating through the list of items and outputting them but are they being created? When is the packItem method being accessed?
My code is as follows:
campingList.cmp (Component)
<aura:component >
<aura:attribute name="items" type="Camping_Item__c[]"/>
<aura:attribute name="newItem" type="Camping_Item__c"
default="{ 'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0}"/>
<!-- CREATE NEW ITEM FORM -->
<form class="slds-form--stacked">
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<ui:inputText aura:id="name" label="Item 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: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">
<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}"/>
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputCheckbox aura:id="packed" label="Packed"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newItem.Packed__c}"/>
</div>
</div>
<div class="slds-form-element">
<ui:button label="Create Item"
class="slds-button slds-button--brand"
press="{!c.clickCreateItem}"/>
</div>
</form>
<!-- / CREATE NEW EXPENSE FORM -->
<div class="slds-card slds-p-top--medium">
<!--
<header class="slds-card__header">
<h3 class="slds-text-heading-small">Items</h3>
</header>-->
<section class="slds-card__body">
<div id="list" class="row">
<aura:iteration items="{!v.items}" var="item">
<c.campingListItem item="{!item}"/>
</aura:iteration>
</div>
</section>
</div>
</aura:component>
campingListController
({
clickCreateItem : function(component, event, helper) {
// Simplistic error checking
var validItem = true;
var item = component.get("v.newItem");
// Name must not be blank
var nameField = component.find("name");
var itemname = nameField.get("v.value");
if ($A.util.isEmpty(itemname)){
validItem = false;
nameField.set("v.errors", [{message:"Please enter item name"}]);
}
else {
nameField.set("v.errors", null);
}
// Quantity must not be blank
var quantityField = component.find("quantity");
var itemquantity = quantityField.get("v.value");
if ($A.util.isEmpty(itemquantity)){
validItem = false;
quantityField.set("v.errors", [{message:"Please enter item quantity"}]);
}
else {
quantityField.set("v.errors", null);
}
// Price must not be blank
var priceField = component.find("price");
var itemprice = priceField.get("v.value");
if ($A.util.isEmpty(itemprice)){
validItem = false;
priceField.set("v.errors", [{message:"Please enter price"}]);
}
else {
priceField.set("v.errors", null);
}
if(validItem){
var newItem = component.get("v.newItem");
// document.write('Create item: '+JSON.stringify(newItem));
var theItemList = component.get("v.items");
var newItem = JSON.parse(JSON.stringify(newItem));
theItemList.push(newItem);
component.set("v.items",theItemList);
}
var setList = component.get("v.items")
console.log('the Item list is: '+JSON.stringify(setList));
component.set("v.newItem",{'sobjectType': 'Camping_Item__c',
'Name': '',
'Price__c': 0,
'Quantity__c': 0,
'Packed__c': false });
}
})
campingListItem.cmp
<aura:component >
<aura:attribute name='item' type="Camping_Item__c" />
<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>
</aura:component>
campingListItemController
({
packItem : function(component, event, helper) {
var trialItem = component.get("v.item")
console.log('the Item is: '+JSON.stringify(trialItem));
var x = component.get("v.item", true);
x.Packed__c = true;
component.set("v.item", x);
var buttonClicked = event.getSource();
buttonClicked.set("v.disabled", true);
}
})
Try changing that to see if that is the problem.
All Answers
I am not sure if this is the problem, but you are missing the button that you should have created in the previous challenge.
<aura:component >
<aura:attribute name='item' type="Camping_Item__c" />
<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}"/>
</p>
</aura:component>
Try changing that to see if that is the problem.