You need to sign in to do that
Don't have an account?
Trailhead challenge:"Connect components with Events"
The campingList JavaScript controller isn't setting the 'item' as a parameter or saving the record correctly.
My code is as follows:
1---Camping List Component
2---Camping List Controller
3---Camping List Helper
Empty
4---Camping List Form
5---CampingListFormController
6---CampingListFormHelper
I am still getting this error:

Any help would be appreciated.
My code is as follows:
1---Camping List Component
<aura:component controller="CampingListController"> <aura:handler name="init" action="{!c.doInit}" value="{!this}"/> <aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem }"/> <aura:attribute name="newItem" type="Camping_Item__c" default="{ 'sobjectType': 'Camping_Item__c', 'Name': '', 'Quantity__c': 0, 'Price__c': 0, 'Packed__c': false }"/> <aura:attribute name="items" type="Camping_Item__c[]"/> <ol> <li>Bug Spray</li> <li>Bear Repellant</li> <li>Goat Food</li> </ol> <!-- NEW EXPENSE FORM --> <div class="slds-col slds-col--padded slds-p-top--large"> <c:campingListForm/> </div> <!-- / 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="items"> <c:campingListItem item="{!item}"/> </aura:iteration> </div> </section> </div> </aura:component>
2---Camping List Controller
({ // Load items from Salesforce doInit: function(component, event, helper) { // Create the action var action = component.get("c.getItems"); // Add callback behavior for when response is received action.setCallback(this, function(response) { var state = response.getState(); if (component.isValid() && state === "SUCCESS") { component.set("v.items", response.getReturnValue()); } else { console.log("Failed with state: " + state); } }); // Send action off to be executed $A.enqueueAction(action); }, handleAddItem: function(component, event, helper) { var newItem = event.getParam("item"); //helper.createItem(component, newItem); this.saveItem(component, item, function(response){ var state = response.getState(); if (component.isValid() && state === "SUCCESS") { var items = component.get("v.items"); items.push(response.getReturnValue()); component.set("v.items", items); } } } })
3---Camping List Helper
Empty
4---Camping List Form
<aura:component > <aura:registerEvent name="addItem" type="c:addItemEvent"/> <!-- 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="itemname" label="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"> <ui:inputCheckbox aura:id="packed" label="Packed?" class="slds-checkbox" labelClass="slds-form-element__label" value="{!v.newItem.Packed__c}"/> </div> <div class="slds-form-element"> <ui:button label="Create Camping Item" class="slds-button slds-button--brand" press="{!c.clickCreateItem}"/> </div> </form> <!-- / CREATE NEW ITEM FORM --> </aura:component>
5---CampingListFormController
({ clickCreateItem: function(component, event, helper) { if(helper.validateItemForm(component)){ // Create the new item var newItem = component.get("v.newItem"); helper.createItem(component, newItem); } } })
6---CampingListFormHelper
({ createItem: function(component, newItem) { var createItem = component.getItem("createItem"); createItem.setParams({ "item": item }); createItem.fire(); component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c', 'Name': '', 'Quantity__c': 0, 'Price__c': 0, 'Packed__c': false }/>); }, validateItemForm: function(component) { // Simplistic error checking var validItem = true; // Name must not be blank var nameField = component.find("itemname"); var itemname = nameField.get("v.value"); if ($A.util.isEmpty(itemname)){ validItem = false; nameField.set("v.errors", [{message:"Item name can't be blank."}]); } else { nameField.set("v.errors", null); } // Quantity must not be blank var quantityField = component.find("quantity"); var quantity = nameField.get("v.value"); if ($A.util.isEmpty(quantity)){ validItem = false; quantityField.set("v.errors", [{message:"Quantity can't be blank."}]); } else { quantityField.set("v.errors", null); } // Price must not be blank var priceField = component.find("price"); var price = priceField.get("v.value"); if ($A.util.isEmpty(price)){ validItem = false; priceField.set("v.errors", [{message:"Price can't be blank."}]); } else { quantityField.set("v.errors", null); } return validItem; } })
I am still getting this error:
Any help would be appreciated.
All Answers
Try replace this method with your's in CampaignListController method.
Let me know if still you are facing any issues.
Thanks and Regards,
Sai Krishna Tavva.
I have the next error: The campingList JavaScript controller isn't adding the new record to the 'items' value provider
Here is my code: https://developer.salesforce.com/forums/ForumsMain?id=906F0000000kDmtIAE
It functions correctly, but the challenge isn't passed.
The code which worked for me is as follows:
@Guiomar Fernández de Bobadilla,you can try this piece of code:
(1) campingList Component
(2) campingListController
(3) campingList Helper
(4) campingListForm component
(5) campingListForm Controller
(6) campingListForm Helper
(7) addItemEvent.evt
I hope it works for you ! :)
I posted the solution yesterday in my discussion! (https://developer.salesforce.com/forums/ForumsMain?id=906F0000000kDmtIAE
)
Thank you anyway.
Jeff Douglas
Trailhead Developer Advocate
My issue was in the name of newItem, just changed to item and all works.
campingListController.js
changed to:
Challenge Not yet complete... here's what's wrong:
The campingList JavaScript controller isn't setting the 'item' as a parameter or saving the record correctly.
Here is code of campingListController: And code campingListHelper:
The code ran well. I have checked. Why the challenger still not pass?
I also ran into this problem and read what challenge asks us to do line by line.
Trailhead challenge do not ask us to call HELPER method from campingListController.js. It just tells us to perform save action in campingListcontroller.js method instead. This is not very intuitive as trailhead module performs saving operation in HELPER method.
Just copy and past the code from campingListHelper.js to campingListController.js to pass the challenge. This is weird but this is how it is.
I hope this would help others.
Thanks,
Akshay
Challenge Not yet complete... here's what's wrong:
The campingList JavaScript controller isn't calling the helper's 'createItem' function.
Failed to save undefined: No EVENT named markup://c:addItemEvent found : [markup://c:campinglist]: Source
Heres my code:
<aura:component controller="CampingListController">
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<aura:handler name="addItem" event="c:addItemEvent"
action="{!c.handleAddItem }"/>
<aura:attribute name="items" type="Camping_Item__c[]"/>
<ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol>
<!-- NEW ITEM FORM -->
<div class="slds-col slds-col--padded slds-p-top--large">
<c:campingListForm />
</div>
<!-- / NEW ITEM 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="items">
<c:campingListItem item="{!item}"/>
</aura:iteration>
</div>
</section>
</div>
</aura:component>
Failed to save undefined: No EVENT named markup://c:addItemEvent found : [markup://c:campinglist]: Source
Heres my code:
<aura:component controller="CampingListController">
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<aura:handler name="addItem" event="c:addItemEvent"
action="{!c.handleAddItem }"/>
<aura:attribute name="items" type="Camping_Item__c[]"/>
<ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol>
<!-- NEW ITEM FORM -->
<div class="slds-col slds-col--padded slds-p-top--large">
<c:campingListForm />
</div>
<!-- / NEW ITEM 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="items">
<c:campingListItem item="{!item}"/>
</aura:iteration>
</div>
</section>
</div>
</aura:component>
i copy your code but i an getting this error
Challenge Not yet complete... here's what's wrong:
The campingList JavaScript controller isn't calling the helper's 'createItem' function.
A few things to note:
Here is code that worked:
CampingList.cmp
campingListController.js
campingListHelper.js
campingListForm.cmp
campingListFormController.js
campingListFormHelper.js
And the event
Sorry for the indentation being wibbly-wobbly at times.
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.
CampingList.cmp:
<aura:component controller="CampingListController">
<!-- <ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol> -->
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem}"/>
<aura:attribute name="newItem" type="Camping_Item__c" required="true" default="{
'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c':0,
'Price__c':0,
'Packed__c':false }"/>
<aura:attribute name="items" type="Camping_Item__c[]"/>
<div class="slds-col slds-col--padded slds-p-top--large">
<c:campingListForm/>
</div>
<div class="slds-grid slds-m-top--large">
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newexpenseform1" class="slds-text-heading--small slds-p-vertical--medium">
Camping List
</legend>
<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>
</fieldset>
</div>
</aura:component>
Regards:
Arpit Vashishtha
Remove
<div class="slds-col slds-col--padded slds-p-top--large">
<c:campingListForm/>
</div>
and keep only
<c:campingListForm/>
Worked for me.
I am also experiencing the issue "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."
Anyone able to find a workaround?
http://faizanaz90.blogspot.com/2017/11/lightning-components-basics-connect-to.html
CampingListForm
<aura:component >
<aura:registerEvent name="addItem" type="c:addItemEvent"/>
<aura:attribute name="newItem" type="Camping_Item__c"
default="{ 'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 1,
'Price__c': 0,
'Packed__c': false }"/>
<!-- CREATE NEW ITEM FORM -->
<form class="slsd-form--stacked">
<lightning:input aura:id="campingform" label="Camping Name"
name="campingname"
value="{!v.newItem.Name}"
required="true"/>
<lightning:input type="number" aura:id="campingform" label="Quantity"
name="campingQuantity"
min="1"
step="1"
value="{!v.newItem.Quantity__c}"
messageWhenRangeUnderflow="Enter an Quantity that's at least 1."/>
<lightning:input type="number" aura:id="campingform" label="Price"
name="campingPrice"
min="0.1"
formatter="currency"
step="0.1"
value="{!v.newItem.Price__c}"
messageWhenRangeUnderflow="Enter an Price that's at least 0.1."/>
<lightning:input type="checkbox" aura:id="campingform" label="Packed ?"
name="campingPacked"
checked="{!v.newItem.Packed__c}"/>
<lightning:button label="Create Camping"
class="slds-m-top--medium"
variant="brand"
onclick="{!c.clickCreateItem}"/>
</form>
<!-- / CREATE NEW ITEM FORM -->
</aura:component>
please help me to complete.
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.
(Do all the steps 1 to 8)
1. campingList.cmp 2. campingListController.js
3. campingListForm.cmp
4. campingListFormController.js
5. campingListFormHelper.js
6. campingListController.apxc
7. campingListHelper.js
8. addItemEvent.evt
I cleared the Trailhead Challenge - Lightning Components Basics - All of them; This piece above (Connect Components with Events > Refactor Components and Communicate with Events) was the last difficult hurdle.
...I think your createItem method should be clickCreateItem
CampingApplication.app campingHeader.cmp
campingList.cmp
campingListController.js campingListForm.cmp campingListFormController.js
campingListFormHelper.js campingListItem.cmp
CampingListController.apxc
addItemEvent.evt
campingList.cmp
campingListController.js
campingListHelper.js campingListForm.cmp campingListFormController.js
campingListFormHelper.js
addItemEvent.evt
Apex class CampingListController CampingList.cmp CampingListController.js
CampingListHelper.js
CampingListForm.cmp
CampingListFormController.js
CampingListFormHelper.js addItemEvent.evt
CampingApp.app
In your handleAddItem function were are you getting the newItem variable? your code has it commented out.
campingList.cmp
CampingListController.js
CampingListHelper.js
CampingListController.apxc
campingListForm.cmp
campingListFormController.js
campingListFormHelper.js
addItemEvent.evt
campingListForm.cmp
<aura:component >
<aura:registerEvent name="addItem" type="c:addItemEvent"/>
<aura:attribute name="newItem" type="Camping_Item__c"
default="{ 'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0,
'Packed__c': false }"/>
<!-- CREATE NEW ITEM FORM -->
<form class="slds-form--stacked">
<lightning:input aura:id="itemform"
label="Name"
name="itemname"
value="{!v.newItem.Name}"
required="true"/>
<lightning:input type="number"
aura:id="itemform"
label="Quantity"
name="quantity"
value="{!v.newItem.Quantity__c}"
min="1"
required="true"/>
<lightning:input type="number"
aura:id="itemform"
label="Price"
name="price"
value="{!v.newItem.Price__c}"
formatter="currency"
step="0.01"/>
<lightning:input type="checkbox"
aura:id="itemform"
label="Packed?"
name="packed"
checked="{!v.newItem.Packed__c}"/>
<lightning:button label="Create Camping Item"
variant="brand"
onclick="{!c.clickCreateItem}"/>
</form>
<!-- / CREATE NEW ITEM FORM -->
</aura:component>
After many hours of struggle :)
campingListForm.cmp
campingListHelper.js
campingListController.apxc
campingListController.js
campingList.cmp
campingListItemController.js
addItemEvent.evt
addItemEvent campingListController.apxc campingList.cmp campingListController.js campingListForm campingListFormController campingListFormHelper Let others know if it works for you.
After many hours of struggle :)
6---CampingListFormHelper (CORRECTED)
###################################
({
addItem: function(component, newItem) {
var addItem = component.getItem("addItem");
addItem.setParams({ "item": item });
addItem.fire();
component.set("v.newItem", {'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0,
'Packed__c': false });
},
validateItemForm: function(component) {
// Simplistic error checking
var validItem = true;
// Name must not be blank
var nameField = component.find("itemname");
var itemname = nameField.get("v.value");
if ($A.util.isEmpty(itemname)){
validItem = false;
nameField.set("v.errors", [{message:"Item name can't be blank."}]);
}
else {
nameField.set("v.errors", null);
}
// Quantity must not be blank
var quantityField = component.find("quantity");
var quantity = nameField.get("v.value");
if ($A.util.isEmpty(quantity)){
validItem = false;
quantityField.set("v.errors", [{message:"Quantity can't be blank."}]);
}
else {
quantityField.set("v.errors", null);
}
// Price must not be blank
var priceField = component.find("price");
var price = priceField.get("v.value");
if ($A.util.isEmpty(price)){
validItem = false;
priceField.set("v.errors", [{message:"Price can't be blank."}]);
}
else {
quantityField.set("v.errors", null);
}
return (validItem);
}
})
Use this code in CampingList.cmp
<aura:component >
<aura:attribute name="newItem" type="Camping_Item__c"
default="{ 'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0,
'Packed__c': false }"/>
<aura:registerEvent name="addItem" type="c:addItemEvent"/>
<!-- CREATE NEW ITEM FORM -->
<form class="slds-form--stacked">
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<lightning:input type="text" aura:id="itemname" label="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">
<lightning:input type="number" 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">
<lightning:input type="currency" 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">
<lightning:input type="checkbox" aura:id="packed" label="Packed?"
class="slds-checkbox"
labelClass="slds-form-element__label"
value="{!v.newItem.Packed__c}"/>
</div>
<div class="slds-form-element">
<lightning:button label="Create Campaign" class="slds-button slds-button--brand" onclick="{!c.clickCreateItem}" />
</div>
</form>
<!-- / CREATE NEW ITEM FORM -->
</aura:component>