You need to sign in to do that
Don't have an account?

Stuck in trailhead - Lightning Components Basics-Connect Components with Events
I am stuc on this challenge and its very frustrating.
For some reason I cannot save the component code, i get an error message when trying to save:
Failed to save undefined: No EVENT named markup://c:addItemEvent found : [markup://c:campinglist]: Source
Here is the code im trying to save. anyone know why it wont allow me to save it?
<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>
For some reason I cannot save the component code, i get an error message when trying to save:
Failed to save undefined: No EVENT named markup://c:addItemEvent found : [markup://c:campinglist]: Source
Here is the code im trying to save. anyone know why it wont allow me to save it?
<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>
you got this error because maybe you can't create addItemEvent lightning event (see 7 number part in below code)
and
use below code
1. campingList Component 2. campingListController
3. campingList Helper 4. campingListForm component
5. campingListForm Controller 6. campingListForm Helper 7. addItemEvent.evt let me inform if it helps you and if you have any issue with it you can ask here :) thanks
All Answers
Please find the solution in below link
https://developer.salesforce.com/forums/?id=906F0000000kDmtIAE
Regards
Jay
you got this error because maybe you can't create addItemEvent lightning event (see 7 number part in below code)
and
use below code
1. campingList Component 2. campingListController
3. campingList Helper 4. campingListForm component
5. campingListForm Controller 6. campingListForm Helper 7. addItemEvent.evt let me inform if it helps you and if you have any issue with it you can ask here :) thanks
The issue was because I was not adding "addItemEvent lightning event"
appreciate the help
createItem : function(component,newItem) {
var addEvent = component.getEvent("addItem");
addEvent.setParams({"item" : newItem});
addEvent.fire();
},
I am getting below mentioned error.i used the code which you have posted.
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.
coudl you please help me.
Getting below error to complete the challenge...
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.
Replace your campingListForm component with below code and it will work--
and on campingListForm controller replace submitForm to clickCreateItem.
Let me know if anything else came up.
Regards,
Rishabh
Please find below code and it is wrking perfectly:
1) Campaingnlistctroller.js:
({
doInit: function(component, event, helper){
var action=component.get("c.getItems");
action.setCallback(this,function(response){
var state=response.getState();
if(state==="SUCCESS"){
component.set("v.items",response.getReturnValue());
}
else{
console.log("Failed with state: " + state);
}
});
$A.enqueueAction(action);
},
handleAddItem: function(component, event, helper){
var itemToSave=event.getParam("item");
var action=component.get("c.saveItem");
action.setParams({"item":itemToSave});
action.setCallback(this,function(response){
var state=response.getState();
if(state==='SUCCESS'){
var items=component.get("v.items");
items.push(response.getReturnValue());
component.set("v.items",items);
}
});
$A.enqueueAction(action);
}
})
2)campaignlistcmp:
<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" event="c:addItemEvent" action="{!c.handleAddItem}"/>
<lightning:layout >
<lightning:layoutItem padding="around-small" size="6">
<c:campingListForm/>
</lightning:layoutItem>
</lightning:layout>
<lightning:card title="Camping Items">
<p class="slds-p-horizontal--small">
<aura:iteration items="{!v.items}" var="item">
<c:campingListItem item="{!item}" />
</aura:iteration>
</p>
</lightning:card>
</aura:component>
campaignlisthelper:
({
createItem : function(component,event,item) {
console.log('step6');
var action=component.get("c.saveItem");
action.setParams({
"item": item
});
action.setCallback(this,function(response){
var state=response.getState();
if(state=="SUCCESS"){
console.log('step7');
var items=component.get("v.items");
items.push(response.getReturnValue());
component.set("v.items",items);
}
else{
console.log('State Returned '+state);
}
});
$A.enqueueAction(action);
}
})
3)Campaignlistformcmp:
<aura:component >
<aura:attribute name="newItem" type="Camping_Item__c" default= "{'sobjectType':'Camping_Item__c',
'Name':'',
'Packed__c':false,
'Quantity__c':0,
'Price__c':0
}"/>
<aura:registerEvent name="addItem" type="c:addItemEvent"/>
<form>
<lightning:input aura:id="itemform" label="Camping Name" value="{!v.newItem.Name}" messageWhenValueMissing="Camping Name cannot be blank" required="true"/>
<lightning:input aura:id="itemform" type="number" label="Quantity" min="1" value="{!v.newItem.Quantity__c}" messageWhenRangeUnderflow="Enter minimum 1 Quantity" required="true" />
<lightning:input aura:id="itemform" type="itemform" label="Price" formatter="currency" value="{!v.newItem.Price__c}" min="0.1" step="0.01" messageWhenRangeUnderflow="Enter an amount that's at least $0.10." required="true"/>
<lightning:input aura:id="itemform" type="checkbox" label="Packed?" checked="{!v.newItem.Packed__c}" />
<lightning:input type="date" label="Date"/>
<lightning:button label="Create Camping" class="slds-m-top--medium"
variant="brand"
onclick="{!c.clickCreateItem}"/>
</form>
</aura:component>
4)Campaingnlistfomrcontroller:js
({
clickCreateItem: function(component, event, helper) {
console.log('step1');
var validItem = component.find('itemform').reduce(function (validSoFar, inputCmp) {
// Displays error messages for invalid fields
inputCmp.showHelpMessageIfInvalid();
return validSoFar && inputCmp.get('v.validity').valid;
}, true);
if(validItem){
console.log('step2');
var item = component.get("v.newItem");
var newItem = JSON.parse(JSON.stringify(item));
console.log('step3');
//var items=component.get("v.items");
console.log('step4');
//items.push(newItem);
//component.set("v.items", items);
helper.createItem(component,event,newItem);
}
}
})
5)Campaignlistformhelper:
({
createItem : function(component,event,item) {
var saveEvent=component.getEvent("addItem");
saveEvent.setParams({"item":item});
saveEvent.fire();
component.set("v.newItem",{'sobjectType':'Camping_Item__c',
'Name':'',
'Packed__c':false,
'Quantity__c':0,
'Price__c':0
} );
}
})
6)CampingListController:
public with sharing class CampingListController {
@AuraEnabled
public static List<Camping_Item__c> getItems() {
return [SELECT Id, Name, Price__c, Quantity__c, Packed__c FROM Camping_Item__c];
}
@AuraEnabled
public static Camping_Item__c saveItem(Camping_Item__c item) {
upsert item;
return item;
}
}
7)addItemEvent:
<aura:event type="COMPONENT">
<aura:attribute name="item" type="Camping_Item__c"/>
</aura:event>
8)CampaignListitemcmp:
<aura:component >
<aura:attribute name="item" type="Camping_Item__c" required="true" />
<p>Name:
<ui:outputText value="{!v.item.Name}"/>
</p>
<p>Price:
<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
</p>
<p>Quantity:
<lightning:formattedNumber value="{!v.item.Quantity__c}"/>
</p>
<p>
<lightning:input type="toggle" label="Packed" checked="{!v.item.Packed__c}" />
</p>
<lightning:button label="Packed!" onclick="{!c.packItem}"/>
</aura:component>
9)CampaignListitemcontroller.js:
({
packItem : function(component, event, helper) {
component.set("v.item.packed__c",true);
var btn=event.getSource();
btn.set("v.disabled",true);
}
})
This worked for me, Thanks Murugesh :)