Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SARANG DESHPANDESARANG DESHPANDE 

Error in trailhead challenge: The campingList component isn't handing the added item correctly.

  Hi, Iam stuck in trailhead challenge in "Connect components with Events". I am getting above error(The campingList component isn't handing the added item correctly.), though my functionality is perfecly working fine. Please help me in this...I have tried solutions for the same error in this forum before, but they are not working as well.

CampingList.cmp:
  
<aura:component controller="CampingListController">
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    <aura:handler name="addItem" action="{!c.handleAddItem}" event="c:addItemEvent"/>
    
    <aura:attribute name="items" type="Camping_Item__c[]" />
    
    <c:campingHeader />
    
    <c:campingListForm />
    
    <aura:iteration items="{!v.items}" var="item">
        <c:campingListItem item="{!item}" />
    </aura:iteration>
    
</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("Error in 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 itemArray=component.get("v.items");
                                   itemArray.push(response.getReturnValue());
                                   component.set("v.items", itemArray);
                               }
                               else
                               {
                                   console.log('Error in state: '+ state);
                               }
                           });
        
        $A.enqueueAction(action);
    },
})

 
Nayana KNayana K
Refer this thread : https://developer.salesforce.com/forums/ForumsMain?id=906F0000000kGH0IAM
Derek Bennett 5Derek 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>
    
       <!-- 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>
Deepak PalDeepak Pal
Challenge Not yet complete... here's what's wrong: 
The campingList component isn't handing the added item correctly.

I am able to save data, refresh on the page and clear the fields too.

campingList.cmp 
<aura:component controller="CampingListController">
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
    <aura:attribute name="items" type="Camping_Item__c[]" />
    <aura:handler name="addEvent" event="c:addItemEvent" action="{!c.handleAddItem}" />
    <!-- Page Header starts-->
    <div class="slds-page-header" role="banner">
        <div class="slds-grid">
            <div class="slds-col">
                <p class="slds-text-heading--label">Camping</p>
                <h1 class="slds-text-heading--medium">Items List</h1>
            </div>
        </div>
    </div>
    
    <div class="slds-col slds-col--padded slds-p-top--large">
        <div aria-labelledby="newCampingForm">
            <!--  Boxed area  -->
            <fieldset class="slds-box slds-theme--default slds-container--small">
                <legend id="newCampingItem" class="slds-text-heading--small slds-p-vertical--medium">
                    Add camping item
                </legend>
                <c:campingListForm />
            </fieldset>
        </div>
    </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="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("Load failed with state : "+state);
            }
        });
        $A.enqueueAction(action);
	},
    clickCreateCampingItem : function(component, event, helper){
        var validExpense = true;
        
        var itemName = component.find("name");
        var itemNameValue = itemName.get("v.value");
        if($A.util.isEmpty(itemNameValue)){
            itemName.set("v.errors",[{message:"Name cannot be empty"}]);
            validExpense = false;
        }
        
        var itemQuantity = component.find("quantity");
        var itemQuantityValue = itemQuantity.get("v.value");
        if($A.util.isEmpty(itemQuantityValue)){
            itemQuantity.set("v.errors",[{message:"Quantity cannot be empty or 0"}]);
            validExpense = false;
        }
        
        var itemPrice = component.find("price");
        var itemPriceValue = itemPrice.get("v.value");
        if($A.util.isEmpty(itemPriceValue)){
            itemPrice.set("v.errors",[{message:"Price cannot be empty or 0"}]);
            validExpense = false;
        }
        if(validExpense){
            var item = component.get("v.newItem");
            //helper.createItem(component, newItem);
            var action = component.get("c.saveItem");
        
            action.setParams({"campingItem" : 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.item",null)
                }
            });
            $A.enqueueAction(action);
        }
        /*var newItem = component.get("v.newItem");
        helper.createItem(component, newItem);
        component.set("v.newItem",null);*/
    },
    
    handleAddItem : function(component, event, helper){
        var item = event.getParam("item");
        //helper.createItem(component,item);
        var action = component.get("c.saveItem");
        
        action.setParams({"campingItem" : 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.item",null)
            }
        });
        $A.enqueueAction(action);
    },
})

campingListHelper.js 
({
	createItem : function(component, item) {
        var action = component.get("c.saveItem");
        
        action.setParams({"campingItem" : 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.item",null)
            }
        });
        $A.enqueueAction(action);
	},
    
    validateItem : function(component){
        var validExpense = true;
        
        var itemName = component.find("name");
        var itemNameValue = itemName.get("v.value");
        if($A.util.isEmpty(itemNameValue)){
            itemName.set("v.errors",[{message:"Name cannot be empty"}]);
            validExpense = false;
        }
        
        var itemQuantity = component.find("quantity");
        var itemQuantityValue = itemQuantity.get("v.value");
        if($A.util.isEmpty(itemQuantityValue)){
            itemQuantity.set("v.errors",[{message:"Quantity cannot be empty or 0"}]);
            validExpense = false;
        }
        
        var itemPrice = component.find("price");
        var itemPriceValue = itemPrice.get("v.value");
        if($A.util.isEmpty(itemPriceValue)){
            itemPrice.set("v.errors",[{message:"Price cannot be empty or 0"}]);
            validExpense = false;
        }
        return validExpense;
    }
})

campingListForm.cmp 
<aura:component >
    <aura:attribute name="newItem"  type="Camping_Item__c" 
                    default="{ 'sobjectType': 'Camping_Item__c',
               					'Price__c': '',
                             	'Quantity__c': '',
                             	'Packed__c': '',
               					'Name': '' }"/>
    <aura:registerEvent name="addEvent" type="c:addItemEvent" />
    
	<form class="slds-form--stacked">
        <div class="slds-form-element slds-is-required">
            <div class="slds-form-element__control">
                <p>
                    <ui:inputText aura:id="name" label="Name" 
                                  class="slds-input" labelClass="slds-form-element__label"
                                  value="{!v.newItem.Name}" required="true"/>
                </p>
            </div>
        </div>
        <div class="slds-form-element slds-is-required">
            <div class="slds-form-element__control">
                <p>
                    <ui:inputCurrency aura:id="price" label="Price" 
                                      class="slds-input" labelClass="slds-form-element__label"
                                      value="{!v.newItem.Price__c}" required="true"/>
                </p>
            </div>
        </div>
        <div class="slds-form-element slds-is-required">
            <div class="slds-form-element__control">
                <p>
                    <ui:inputNumber aura:id="quantity" label="Item Quantity" 
                                    class="slds-input" labelClass="slds-form-element__label"
                                    value="{!v.newItem.Quantity__c}" required="true"/>
                </p>
                
            </div>
        </div>
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <p>
                    <ui:inputCheckbox aura:id="packed" label="Packed" 
                                      class="slds-checkbox" labelClass="slds-form-element__label"
                                      value="{!v.newItem.Packed__c}"/>
                </p>
            </div>
        </div>
        <ui:button label="Create Camping Item"
                   class="slds-button slds-button--brand"
                   press="{!c.submitForm}" />
    </form>
</aura:component>

campingListFormController.js 
({
	submitForm : function(component, event, helper) {
        if(helper.validateForm(component)){
            var item = component.get("v.newItem");
            helper.createItem(component,item);
        }
	}
})

campingListFormHelper.js 
({
    validateForm : function(component) {
        var validItem = true;
        var name = component.find("name");
        var price = component.find("price");
        var quantity = component.find("quantity");
        
        var nameVal = name.get("v.value");
        var priceVal = price.get("v.value");
        var quantityVal = quantity.get("v.value");
        
        if($A.util.isEmpty(nameVal)){
            validItem = false;
            name.set("v.errors",[{message:"Name cannot be blank"}]);
        }else{
            name.set("v.errors",null)
        }
        
        if($A.util.isEmpty(priceVal)){
            validItem = false;
            price.set("v.errors",[{message:"Price cannot be blank"}]);
        }else{
            price.set("v.errors",null)
        }
        
        if($A.util.isEmpty(quantityVal)){
            validItem = false;
            quantity.set("v.errors",[{message:"Quantity cannot be blank"}]);
        }else{
            quantity.set("v.errors",null)
        }
        
        return validItem;
    },
    
    createItem : function(component,item){
        var createEvent = component.getEvent("addEvent");
           createEvent.setParams({ "item": item });
        console.log(createEvent.getParams());
        createEvent.fire();
        component.set("v.newItem",{'sobjectType': 'Camping_Item__c',
                                   'Price__c': '',
                                 'Quantity__c': '',
                                 'Packed__c': '',
                                   'Name': ''});
    }
})

addItemEvent.evt 
<aura:event type="COMPONENT" >
    <aura:attribute name="item" type="Camping_Item__c" />
</aura:event>

Can some help me out in figuring what is it that I am missing?
Help appreciated
shashi kumar 58shashi kumar 58
Superbadge
Lightning Component Framework Specialist

Challenge No #4 

you will get help to clear this challenge.

https://developer.salesforce.com/forums/?id=9060G000000MUgLQAW


Regards,
Shashi Kumar
 
Ankita VashisthAnkita Vashisth
The solved answer for the query is..

<aura:component controller="campingListController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
       <aura:attribute name="newItem" type="Camping_Item__c"    default="{ 'sobjectType': 'Camping_Item__c',
                         'Name': '',
                         'Price__c': 0,
                         'Quantity__c': 0,                         
                         'Packed__c': false
                       }"/>
    <c:campingListForm />
 <aura:handler name="AddItem" event="c:addItemEvent"
        action="{!c.handleAddItem}"/>
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    <lightning:layout >
        <lightning:layoutItem padding="around-small" size="6">
<div aria-labelledby="newItemForm">

    <!-- BOXED AREA -->
    <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>

    <!-- CREATE NEW CAMPING ITEM FORM -->
    <form class="slds-form--stacked">
                    <lightning:input type="text" aura:id="newItemForm" label="Name"
                                     name="Name"
                                     value="{!v.newItem.Name}"
                                     required="true"/> 
                    <lightning:input type="number" aura:id="newItemForm" label="Price"
                                     name="Price"
                                     min="0.1"
                                     formatter="currency"
                                     step="0.01"
                                     value="{!v.newItem.Price__c}"
                                     messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>       
                    <lightning:input aura:id="newItemForm" label="Packed"  
                                     name="Packed" type="checkbox" 
                                     checked="{!v.newItem.Packed__C}" value="{!v.newItem.Packed__C}"
                                     />
                    <lightning:input type="number" aura:id="newItemForm" label="Quantity"
                                     name="Quantity"
                                     min="1"
                                     step="1"
                                     value="{!v.newItem.Quantity__c}"
                                     placeholder="0"/>
                </form>
  </fieldset>
  <!-- / BOXED AREA -->

</div>
             <aura:iteration items="{!v.items}" var="item">
        <c:campingListItem item="{!item}" />
    </aura:iteration>
        </lightning:layoutItem>
        
    </lightning:layout>
</aura:component>