ANJARGHOLI.COM

Yolande Anjargholi Online

I am a big fan of Trailhead, and recently started working through the Lightning Components Basics trail. As part of this module, the Input Data Using Forms is one of the longest and most time consuming units. It definitly takes longer than the estimated time investement of 35 min. I think the only way to work through this module in 35 min is by copy and paste and glancing over the concepts - obviously not a recommended approach. 

This is a very valuable unit that will provide great insight into the Lightning Design System, and gives you hands on experience on how to work with it. I wanted to share the code you will need to pass the challenge for the unit, since I found it a little confusing. I created and leveraged a helper method in the CamplingListcontroller, since the unit demonstrates the use of helper methods, and I think it is 'best practice', so to speak. Although my Camping form worked perfectly, I could not pass the challenge. 

I eventually landed on the code below, and had no problem to pass this unit. Good Luck. 

1. campingList.cmp

<aura:component implements="force:appHostable">
<ltng:require styles="/resource/SLDS203/assets/styles/salesforce-lightning-design-system.css" />
<!-- CAMPING ITEM DEFINITION -->
<aura:attribute name="newItem" type="Camping_Item__c"
default="{ 'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0,
'Packed__c': false }" />
<!-- Local Array to hold camping items -->
<aura:attribute name="items" type="Camping_Item__c[]" />

    <!-- FORM TO CAPTURE CAMPING ITEMS -->
<!-- box area -->
<div class="slds-col slds-col--padded slds-p-top--large">
<div aria-labelledby="newcampingitemform">
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newcampingitemform" class="slds-text-heading--small slds-p-vertical--medium">
Add Item
</legend>
<form class="slds-form--stacked">
<!-- CAMPING ITEM NAME FIELD -->
<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>
<!-- PRICE FIELD -->
<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}"
placeholder="0" />
</div>
</div>
<!-- QUANTITY FIELD -->
<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}"
placeholder="0" />
</div>
</div>
                    <!-- PACKED FIELD -->
<div class="slds-form-element">
<ui:inputCheckbox aura:id="ispacked" label="Packed"
class="slds-checkbox"
labelClass="slds-form-element__label"
value="{!v.newItem.Packed__c}" />
</div>
<!-- CREATE ITEM BUTTON -->
<div class="slds-form-element__control">
<ui:button label="Create Item"
class="slds-button slds-button--brand"
press="{!c.ClickCreateItem}" />
</div>
                </form>
</fieldset>
</div>
</div>
<!-- ITEM LIST COMPONENT TO SHOW LIST OF ITEMS -->
<div class="slds-card slds-p-top--medium">
<header class="slds-card__header">
<h3 class="slds-text-heading--small">
Camping 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>

2. campingListController.js

({
ClickCreateItem: function (component, event, helper){
var validItem=true;
var nameField = component.find("itemname");
var itemname = nameField.get("v.value");
var priceField = component.find("price");
var price = priceField.get("v.value");
var quantityField = component.find("quantity");
var quantity = quantityField.get("v.value");
       if(($A.util.isEmpty(itemname)) || ($A.util.isEmpty(price)) || ($A.util.isEmpty(quantity))){
validItem = false;
alert("Please fix errors and try again");
nameField.set("v.errors", [{message: "Item Name can't be blank."}]);
priceField.set("v.errors", [{message: "Price can't be blank"}]);
quantityField.set("v.errors", [{message: "Quantity can't be blank"}]);
} else {
nameField.set("v.errors", null);
priceField.set("v.errors", null);
quantityField.set("v.errors", null);
} if(validItem){
var mynewItem = component.get("v.newItem");
var theItems=component.get("v.items");
var newItem = JSON.parse(JSON.stringify(mynewItem));
theItems.push(newItem);
component.set("v.items", theItems);
         //Resetting new item values on the form
component.set("v.newItem",{
'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity': 0,
'Price': 0,
'Packed__c': false });
}
}
})