You need to sign in to do that
Don't have an account?
Nishant Sharma
Unable to clear - Connect Components with Events module in trail head
Not sure, what is wrong with following code. While validating, it give me following error:
The campingList component isn't handing the added item correctly.
Here is the code:
1. camping.cmp
3. campingListController.js
4. componentListHelper.js
7. campingListFormHelper.js
8. addItemEvent.evt
It works well, when I test this app. any thought? Can anyone share the working code for this module?
The campingList component isn't handing the added item correctly.
Here is the code:
1. camping.cmp
<aura:component > <c:campingHeader /> <c:campingList /> </aura:component>2. CampingList.cmp
<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" action="{!c.handleAddItem}" event="c:addItemEvent"/> <c:campingListForm /> <div class="slds-card slds-p-top--medium"> <header class="slds-card__header"> <h3 class="slds-text-heading--small">Expenses</h3> </header> <section class="slds-card__body"> <div id="list" class="row"> <aura:iteration items="{!v.items}" var="item"> <c:campingListItem item="{!item}"/> <br/> </aura:iteration> </div> </section> </div> </aura:component>
3. campingListController.js
({ // Load expenses 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 action = component.get("c.saveItem"); action.setParams({ "item": JSON.parse(JSON.stringify(event.getParam("item"))) }); action.setCallback(this, 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); } }); $A.enqueueAction(action); } })
4. componentListHelper.js
({ createCamping: function(component,item) { var action = component.get("c.saveItem"); action.setParams({ "item": JSON.parse(JSON.stringify(item)) }); action.setCallback(this, 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); } }); $A.enqueueAction(action); } })5. campingListForm.cmp
<aura:component > <aura:attribute name="newItem" type="Camping_Item__c" default="{ 'sobjectType': 'Camping_Item__c', 'Name': '', 'Packed__c': false, 'Price__c': '0', 'Quantity__c': '0' }"/> <aura:registerEvent name="addItem" type="c:addItemEvent"/> <div aria-labelledby="newitemform"> <fieldset class="slds-box slds-theme--default slds-container--small"> <legend id="newitemform" class="slds-text-heading--small slds-p-vertical--medium"> Add Camping Item </legend> <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="Camping Item Name" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Name}" required="true"/> </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"> <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:inputNumber aura:id="quantity" label="Quantity" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Quantity__c}"/> </div> </div> <div class="slds-form-element"> <ui:button label="Create Camping Item" class="slds-button slds-button--brand" press="{!c.submitForm}"/> </div> </form> </fieldset> </div> </aura:component>6. campingListFormController
({ submitForm : function(component, event, helper) { var validCamping = true; // Name must not be blank var nameField = component.find("name"); var expname = nameField.get("v.value"); if ($A.util.isEmpty(expname)){ validCamping = false; nameField.set("v.errors", [{message:"Camping Item name can't be blank."}]); } else { nameField.set("v.errors", null); } var priceField = component.find("price"); var price = priceField.get("v.value"); if ($A.util.isEmpty(price) || isNaN(price) || (price <= 0.0)){ validCamping = false; priceField.set("v.errors", [{message:"Camping Item price can't be blank."}]); } else { priceField.set("v.errors", null); } var quantityField = component.find("quantity"); var quantity = quantityField.get("v.value"); if ($A.util.isEmpty(quantity) || isNaN(quantity) || (quantity <= 0)){ validCamping = false; quantityField.set("v.errors", [{message:"Camping Item quantity can't be blank."}]); } else { quantityField.set("v.errors", null); } if(validCamping){ helper.createItem(component); } }, })
7. campingListFormHelper.js
({ createItem : function(component) { var newItem = component.get("v.newItem"); var addEvent = component.getEvent("addItem"); addEvent.setParams({"item" : newItem}); addEvent.fire(); component.set("v.newItem", { 'sobjectType': 'Camping_Item__c', 'Name': '', 'Packed__c': false, 'Price__c': 0, 'Quantity__c': 0}); } })
8. addItemEvent.evt
<aura:event type="COMPONENT" description="Event template"> <aura:attribute name="item" type="Camping_Item__c"/> </aura:event>
It works well, when I test this app. any thought? Can anyone share the working code for this module?
Just for reference I will post whole code :
campingList.cmp
campingListController.js
campingListHelper.js campingListForm.cmp
campingListFormController.js
campingListFormHelper.js
All Answers
Just for reference I will post whole code :
campingList.cmp
campingListController.js
campingListHelper.js campingListForm.cmp
campingListFormController.js
campingListFormHelper.js
I just copied your code and passed the test. Haha
I couldn't follow this challenge... I just want the points - lol
<aura:handler name="addItem" action="{!c.handleAddItem}" event="c:addItemEvent" />
Yo should:
<aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem}" />
Obviously in campingList.cmp.
Regards
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>
In the latest version, Trailhead requires to use Lightning Base Components in the campingListForm.
just replace the following code in Nayana K's campingListForm.cmp