Skip to main content
Topics#TrailheadFrage von Shruthi GM
Shruthi GM fragte in #Trailhead
31. Okt. 2018, 06:15

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.
1 Antwort
  1. Deepali kulshrestha (CA)
    24. Apr. 2019, 10:33
    Hi Shruthi,

    "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.-

    Hi Shruthi,

    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
Antwort schreiben...
0/9000