While doing this Challenge it was hard for me to complete so I’m sharing the code which might help others for the Reference.
Trailhead:
https://trailhead.salesforce.com/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_forms
CODE:
CAMPING APPLICATION TO PREVIEW :
<aura:application extends="force:slds" > <c:campingList /> </aura:application>
CAMPING HEADER COMPONENT:
<aura:component > <lightning:layout class="slds-page-header slds-page-header--object-home"> <lightning:layoutItem > <lightning:icon iconName="action:goal" alternativeText="My Camping"/> </lightning:layoutItem> <lightning:layoutItem padding="horizontal-small"> <div class="page-section page-header"> <h1 class="slds-text-heading--label">Camping</h1> <h2 class="slds-text-heading--medium">My Camping</h2> </div> </lightning:layoutItem> </lightning:layout> </aura:component>
CAMPING LIST COMPONENT:
<aura:component >
<aura:attribute name="items" type="Camping_Item__c[]"/>
<aura:attribute name="newItem" type="Camping_Item__c" default="{'Name':'',
'Quantity__c':0,
'Price__c':0,
'Packed__c':false,
'sobjectType':'Camping_Item__c'}"/>
<!-- NEW Campaing FORM -->
<div class="slds-col slds-col--padded slds-p-top--large">
<c:campingHeader/>
<div aria-labelledby="newCampaingForm">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newCampaingForm" class="slds-text-heading--small
slds-p-vertical--medium">
Add Expense
</legend>
<!-- CREATE NEW Campaing FORM -->
<form class="slds-form--stacked">
<!-- For Name Field -->
<lightning:input aura:id="expenseform" label="Camping Name"
name="expensename"
value="{!v.newItem.Name}"
required="true"/>
<!-- For Quantity Field -->
<lightning:input type="number" aura:id="campingform" label="Quantity"
name="expenseamount"
min="1"
value="{!v.newItem.Quantity__c}"
messageWhenRangeUnderflow="Enter minimum 1 Quantity"/>
<!-- For Price Field -->
<lightning:input aura:id="campingform" label="Price"
formatter="currency"
name="expenseclient"
value="{!v.newItem.Price__c}"
/>
<!-- For Check Box -->
<lightning:input type="checkbox" aura:id="campingform" label="Packed"
name="expreimbursed"
checked="{!v.newItem.Packed__c}"/>
<lightning:button label="Create Camping"
class="slds-m-top--medium"
variant="brand"
onclick="{!c.clickCreateItem}"/>
</form>
<!-- / CREATE NEW EXPENSE FORM --></fieldset>
<!-- / BOXED AREA -->
</div>
<!-- / CREATE NEW EXPENSE -->
</div>
<!-- ITERATIING ITEM LISTS -->
<div class="slds-card slds-p-top--medium">
<c:campingHeader/>
<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>
<!-- / ITERATIING ITEM LISTS -->
</aura:component>
CAMPING CONTROLLER :
({
clickCreateItem : function(component, event, helper) {
var validCamping = component.find('campingform').reduce(function (validSoFar, inputCmp) {
// Displays error messages for invalid fields
inputCmp.showHelpMessageIfInvalid();
return validSoFar && inputCmp.get('v.validity').valid;
}, true);
if(validCamping){
var newCampingItem = component.get("v.newItem");
//helper.createCamping(component,newCampingItem);
var campings = component.get("v.items");
var item = JSON.parse(JSON.stringify(newCampingItem));
campings.push(item);
component.set("v.items",campings);
component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c','Name': '','Quantity__c': 0,
'Price__c': 0,'Packed__c': false });
}
}
})
CAMPING LIST ITEM COMPONENT:
<aura:component >
<aura:attribute name="item" type="Camping_Item__c"/>
Name:
<ui:outputText value="{!v.item.Name}"/>
Price:
<ui:outputCurrency value="{!v.item.Price__c}"/>
Quantity:
<ui:outputNumber value="{!v.item.Quantity__c}"/>
Packed:
<ui:outputCheckbox value="{!v.item.Packed__c}"/>
</aura:component>
OUTPUT:
Advertisements
