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

Struck in a trial head
I am trying to solve one of the lightning trail heads of creating Camping list.
Here is my component.
<aura:component>
<!-- PAGE HEADER -->
<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[]"/>
<!-- PAGE HEADER -->
<lightning:layout class="slds-page-header slds-page-header--object-home">
<lightning:layoutItem>
<lightning:icon iconName="standard:scan_card" alternativeText="Camping List"/>
</lightning:layoutItem>
<lightning:layoutItem padding="horizontal-small">
<div class="page-section page-header">
<h1 class="slds-text-heading--label">Camping List</h1>
<h2 class="slds-text-heading--medium">List</h2>
</div>
</lightning:layoutItem>
</lightning:layout>
<!-- / PAGE HEADER -->
<!-- NEW CAMPINGLIST FORM -->
<lightning:layout>
<lightning:layoutItem padding="around-small" size="6">
<!-- [[ CampingList form goes here ]] -->
</lightning:layoutItem>
</lightning:layout>
<!-- / NEW CAMPINGLIST FORM -->
<!-- CREATE NEW LIST -->
<div aria-labelledby="newexpenseform">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newexpenseform" class="slds-text-heading--small
slds-p-vertical--medium">
Add List
</legend>
<!-- CREATE NEW ITEM FORM -->
<form class="slds-form--stacked">
<lightning:input aura:id="itemform" label="Name"
name="itemName"
value="{!v.newItem.Name}"
required="true"/>
<lightning:input type="number" aura:id="itemform" label="Quantity"
name="itemQuantity"
value="{!v.newItem.Quantity__c}"
required="true"/>
<lightning:input type="number" aura:id="itemform" label="Price"
name="itemPrice"
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 type="checkbox" aura:id="itemform" label="Packed"
name="itemPacked"
checked="{!v.newItem.Packed__c}"/>
<lightning:button label="Create Camping Item"
class="slds-m-top--medium"
variant="brand"
onclick="{!c.clickCreate}"/>
</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>
</fieldset>
</div>
</aura:component>
Component Controller:
({
clickCreate: function(component, event, helper) {
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);
}
})
But the button "Click Create" has become static and is not working.Please help me so that it works!!!!
Please help.
Thanks in advance.
Here is my component.
<aura:component>
<!-- PAGE HEADER -->
<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[]"/>
<!-- PAGE HEADER -->
<lightning:layout class="slds-page-header slds-page-header--object-home">
<lightning:layoutItem>
<lightning:icon iconName="standard:scan_card" alternativeText="Camping List"/>
</lightning:layoutItem>
<lightning:layoutItem padding="horizontal-small">
<div class="page-section page-header">
<h1 class="slds-text-heading--label">Camping List</h1>
<h2 class="slds-text-heading--medium">List</h2>
</div>
</lightning:layoutItem>
</lightning:layout>
<!-- / PAGE HEADER -->
<!-- NEW CAMPINGLIST FORM -->
<lightning:layout>
<lightning:layoutItem padding="around-small" size="6">
<!-- [[ CampingList form goes here ]] -->
</lightning:layoutItem>
</lightning:layout>
<!-- / NEW CAMPINGLIST FORM -->
<!-- CREATE NEW LIST -->
<div aria-labelledby="newexpenseform">
<!-- BOXED AREA -->
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newexpenseform" class="slds-text-heading--small
slds-p-vertical--medium">
Add List
</legend>
<!-- CREATE NEW ITEM FORM -->
<form class="slds-form--stacked">
<lightning:input aura:id="itemform" label="Name"
name="itemName"
value="{!v.newItem.Name}"
required="true"/>
<lightning:input type="number" aura:id="itemform" label="Quantity"
name="itemQuantity"
value="{!v.newItem.Quantity__c}"
required="true"/>
<lightning:input type="number" aura:id="itemform" label="Price"
name="itemPrice"
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 type="checkbox" aura:id="itemform" label="Packed"
name="itemPacked"
checked="{!v.newItem.Packed__c}"/>
<lightning:button label="Create Camping Item"
class="slds-m-top--medium"
variant="brand"
onclick="{!c.clickCreate}"/>
</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>
</fieldset>
</div>
</aura:component>
Component Controller:
({
clickCreate: function(component, event, helper) {
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);
}
})
But the button "Click Create" has become static and is not working.Please help me so that it works!!!!
Please help.
Thanks in advance.
"Create a Simple Camping List Lightning Component" i think your trailhead question is this. So,
Try this:-
1)Setup->Developer Console->File->New->Lightning Component->Save as
campingList
Code:
<aura:component >
<ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol>
</aura:component>
2)Take new Lightning Component name it as campingHeader
Code:
<aura:component >
<H1>Camping List </H1>
</aura:component>
Choose Style from Right Side Menu, it automatically generates default code
replace it with
h1.THIS {
font-size: 18px;
}
Take new Lightning Component name it as camping
Code:
<aura:component >
<c:campingHeader />
<c:campingList />
</aura:component>
If u want to see a preview of that create a Lightning app name it as campingApp
Code:
<aura:application >
<c:camping />
</aura:application>
See Preview from the right side menu Like this.-
Step by step instruction watch this video:-
https://www.youtube.com/watch?v=UBeAStgdkzg
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks and Regards,
Deepali Kulshrestha