Don't have an account?

Browse by Topic

+ Start a Discussion

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

<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?

July 5, 2016
·
Like
2
·
Follow
6

Best Answer chosen by Nishant Sharma

Nayana K
Seems handleAddItem method body of campingListController.js should be :

handleAddItem: function(component, event, helper) { var item = event.getParam("item"); var action = component.get("c.saveItem"); //json stringify is not needed I think. action.setParams({ "item": item }); action.setCallback(this, function(response){ var state = response.getState(); if (component.isValid() && state === "SUCCESS") { var items = component.get("v.items"); items.push(item); component.set("v.items",items); } }); $A.enqueueAction(action); }

Just for reference I will post whole code :

campingList.cmp
<aura:component controller="CampingListController"> <aura:handler name="init" action="{!c.doInit}" value="{!this}"/> <aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem}"/> <div class="slds-page-header" role="banner"> <div class="slds-grid"> <div class="slds-col"> <p class="slds-text-heading--label">Camping Items</p> <h1 class="slds-text-heading--medium">My Camping Items</h1> </div> </div> </div> <div aria-labelledby="newitemform"> <fieldset class="slds-box slds-theme--default slds-container--small"> <c:campingListForm /> </fieldset> </div> <aura:attribute name="items" type="Camping_Item__c[]"/> <div class="slds-card slds-p-top--medium"> <header class="slds-card__header"> <h3 class="slds-text-heading--small">Camping List 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.js
({ doInit: function(component, event, helper) { var action = component.get("c.getItems"); 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); } }); $A.enqueueAction(action); }, handleAddItem: function(component, event, helper) { var item = event.getParam("item"); var action = component.get("c.saveItem"); action.setParams({ "item": item }); action.setCallback(this, function(response){ var state = response.getState(); if (component.isValid() && state === "SUCCESS") { var items = component.get("v.items"); items.push(item); component.set("v.items",items); } }); $A.enqueueAction(action); } })

campingListHelper.js
({ createItem : function(component, item) { var action = component.get("c.saveItem"); action.setParams({ "item": 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); component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c', 'Name': '', 'Quantity__c': 0, 'Price__c': 0, 'Packed__c': false }); } }); $A.enqueueAction(action); /*var theItems = component.get("v.items"); // Copy the expense to a new object // THIS IS A DISGUSTING, TEMPORARY HACK var newItem = JSON.parse(JSON.stringify(item)); theItems.push(newItem); component.set("v.items", theItems); console.log('theItems helper==',theItems);*/ }, validateItemForm: function(component) { // Simplistic error checking var validExpense = true; // Name must not be blank var fld = component.find("ciName"); var fldVal = fld.get("v.value"); if ($A.util.isEmpty(fldVal)){ validExpense = false; fld.set("v.errors", [{message:"Name can't be blank."}]); } else { fld.set("v.errors", null); } // Amount must be set, must be a positive number var quantFld = component.find("ciQuantity"); var quantFldVal = quantFld.get("v.value"); if ($A.util.isEmpty(quantFldVal) || isNaN(quantFldVal) || (quantFldVal <= 0.0)){ validExpense = false; quantFld.set("v.errors", [{message:"Enter qunatity."}]); } else { // If the amount looks good, unset any errors... quantFld.set("v.errors", null); } // Amount must be set, must be a positive number var priceFld = component.find("ciPrice"); var priceFldVal = priceFld.get("v.value"); if ($A.util.isEmpty(priceFldVal) || isNaN(priceFldVal) || (priceFldVal <= 0.0)){ validExpense = false; priceFld.set("v.errors", [{message:"Enter price."}]); } else { // If the amount looks good, unset any errors... priceFld.set("v.errors", null); } return(validExpense); } })
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>

campingListFormController.js
({ 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); } }, })

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}); } })

July 11, 2016
·
Like
5
·
Dislike
0

This was selected as the best answer

Nishant Sharma
You saved my day @Nayana.

I just copied your code and passed the test. Haha

July 16, 2016
·
Like
0
·
Dislike
0

Nishant Sharma
But I am still unable to track, what was causing issue. #CrazySFDC

July 16, 2016
·
Like
0
·
Dislike
0

JayNic
Thank you @Nayana K

I couldn't follow this challenge... I just want the points - lol

October 11, 2016
·
Like
0
·
Dislike
0

Rodrigo Mercader
There is an error in the code that checks the challenge. Instead of doing:
<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

October 13, 2016
·
Like
1
·
Dislike
0

Derek Bennett 5
camping list component wont save the code, it reads this error:

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>


<div class="slds-col slds-col--padded slds-p-top--large">

<c:campingListForm />

</div>


<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>

December 9, 2016
·
Like
0
·
Dislike
0

Sebastian Wilke
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

<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"/> <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"> <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> </fieldset> </aura:component>

October 11, 2017
·
Like
1
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Unable to clear - Connect Components with Events module in trail head

All Answers

You need to sign in to do that.