You need to sign in to do that
Don't have an account?
Lightning Components Basics: "Input Data using Forms challenge"-How to reset an aura attribute?
I am stuck at this point:
![User-added image](/forums/servlet/rtaImage?eid=906F0000000kDMW&feoid=Body&refid=0EMF0000000kEZa)
I just want to know what is going to be the syntax for resetting the newItem value provider with a Camping_Item__c sObject??
My Code is as follows:
(1) campingList Component:
(2) Controller code:
I just want to know what is going to be the syntax for resetting the newItem value provider with a Camping_Item__c sObject??
My Code is as follows:
(1) campingList Component:
<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:attribute name="items" type="Camping_Item__c[]"/> <ol> <li>Bug Spray</li> <li>Bear Repellant</li> <li>Goat Food</li> </ol> <!-- 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 --> <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) Controller code:
({ clickCreateItem: function(component, event, helper) { // 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); } 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); } if(validItem){ var newItem = component.get("v.newItem"); console.log("Create item: " + JSON.stringify(newItem)); //helper.createItem(component, newItem); // 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)); console.log("Items before 'create': " + JSON.stringify(theItems)); theExpenses.push(newItem); component.set("v.expenses", theItems); console.log("Items after 'create': " + JSON.stringify(theItems)); theItems.push(newItem); component.set("v.items", theItems); } } })
All Answers
As per the code you posted from where are you getting the values for 'item' & 'theItems' & 'theExpenses' and also if you could help me in running the code as per the requirement. I am getting the following error:
I am not sure whether or not your question is still open or not.
Actually we are using a campingItem component from which we are getting the values of 'item'.I am attaching the code for the campingItem component here,you add that code to make your App work;
Whats happening here is that campingListItem component is taking help from campingItem component.
Hoping that this answer satisfies you.
I am also making use of CampingListItem component. Please navigate to the below link where I have pasted my code:
https://developer.salesforce.com/forums/ForumsMain?id=906F0000000kDmFIAU
Using this code am still not able to run the app as its desired.
Thanks.
I am enclosing here the entire code that helped me pass that challenge,hope it works for you as well.Do let me know
(1) campingList Component
(2) campingList Controller
(3) campingListItem Component
Happy:) to Help,
Shobhit Saxena.
https://developer.salesforce.com/forums/ForumsMain?id=906F0000000kDD0IAM
Following the above coment link was able to complete the challenge and also understood how variables are getting values :)
Further question continues here (maintaining one thread):
https://developer.salesforce.com/forums/ForumsMain?id=906F0000000kDmFIAU
Thanks for help!!!
CampingHeader.cmp: CampingList.cmp: campingListController.js: CampingListItem.cmp: These codes are working for me and i have completed the course. Please give a thumbsup if the code works for you..:P
campList Lightning component Note: Please take a minor effort and write the item displaying part component named campingListItem by yourself.
Instead of writing seprate helper function everythin has been defined in controller itself to focus on easy understanding.
campListController I hope this helps.
campingListController.js ::
({
clickCreateItem: function(component, event, helper) {
// Simplistic error checking
var validItem = true;
var nameField = component.find("itemname").reduce(function (validSoFar, inputCmp){
inputCmp.showHelpMessageIfInvalid();
return validSoFar && inputCmp.get('v.validity').valid;
}, true);
// Quantity must not be blank
var quantityField = component.find("quantity").reduce(function (validSoFar, inputCmp){
inputCmp.showHelpMessageIfInvalid();
return validSoFar && inputCmp.get('v.validity').valid;
}, true);
//var quantity = nameField.get("v.value");
var priceField = component.find("price").reduce(function (validSoFar, inputCmp){
inputCmp.showHelpMessageIfInvalid();
return validSoFar && inputCmp.get('v.validity').valid;
}, true);
if(validItem){
var newItem = component.get("v.newItem");
console.log("Create item: " + JSON.stringify(newItem));
var newItem = JSON.parse(JSON.stringify(item));
console.log("Items before 'create': " + JSON.stringify(theItems));
theExpenses.push(newItem);
component.set("v.expenses", theItems);
console.log("Items after 'create': " + JSON.stringify(theItems));
theItems.push(newItem);
component.set("v.items", theItems);
component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0,
'Packed__c': false });
}
}
})
Thanks & Regards,
Saket.
I followed-up your code and still get this error. May someone help please? Thanks