Toggle Side Panel
Close search

Activity › Forums › Salesforce® Discussions › Stuck on Trailhead Challenge : Salesforce Lightning Client Side Controllers -"mark item as packed"

Tagged: , , , , , , , , ,

  • Salesforce® Discussions

    Stuck on Trailhead Challenge : Salesforce Lightning Client Side Controllers -"mark item as packed"

    Posted by Kumar on December 20, 2016 at 7:19 AM

    Hi everyone,

    The question is this to mark item as packed, details below:

    Add a button to the campingListItem component that when clicked, marks the item as packed.

    • Add a button labeled Packed! that calls the packItem controller function when clicked.
    • The controller action marks the item attribute as packed, updates the item value provider and disables the button.

    campingListItem code :

    <aura:component>
    <aura:attribute name=’item’ type=’Camping_Item__c’ required=’true’>
        <ui:outputText value=”{!v.item.Name}”/>
        <ui:outputNumber value=”{!v.item.Quantity__c}”/>
        <ui:outputCurrency value=”{!v.item.Price__c}”/>
        <ui:outputCheckbox value=”{!v.item.Packed__c}”/>
        <ui:button label=”Packed!” press=”{!c.packItem}”/>
    </aura:attribute>
</aura:component>

    where Camping_Item__c is a custom object.

    My code is this:

    <!–campingListController.js–>
({
    packItem : function(component, event, helper) {
        var btn = event.getSource();
        btn.set(“v.disabled”,true);
        component.set(“v.item.Packed__c”, “true”);
    }
})

    I tested this code and it works, checks the Packed and get the button disabled, but the challenge gives me the error:

    Challenge Not yet complete... here's what's wrong:
    The campingListItem JavaScript controller isn't setting the 'Packed' value correctly.

    Also, refer - "Refactor components and communicate with events".

    What am I doing wrong? Any help?

    Eswar Kumar replied 7 years, 4 months ago 8 Members · 8 Replies
  • 8 Replies

  • sushant

    Member
    January 20, 2017 at 1:56 PM

    Hi,
    To create a packing list item component, try this in controller.js:

    ({
    packItem : function(component, event, helper) {
        var checkbox = component.get(“v.item”,true);
        checkbox.Packed__c = true;
        component.set(“v.item”,checkbox);
        event.getSource().set(‘v.disabled’, true);
    }
})

    Thanks

  • parag

    Member
    September 24, 2017 at 4:34 AM

    This code is 100% working Trailhead just updated this module

    <aura:component >
    <aura:attribute name=”item” type=”Camping_Item__c” required=”true”/>
    <p>Name:
        <ui:outputText value=”{!v.item.Name}”/>
    </p>
    <p>Price:
        <lightning:formattedNumber value=”{!v.item.Price__c}” style=”currency”/>
    </p>
    <p>Quantity:
        <lightning:formattedNumber value=”{!v.item.Quantity__c}”/>
    </p>
    <p>Packed:
        <lightning:input type=”toggle” label=”Packed?” checked=”{!v.item.Packed__c}”/>
    </p>
    <div>
        <lightning:button label=”Packed!” onClick=”{!c.packItem}”/>
    </div>
</aura:component>

    Please like this answer if you find this answer true.

  • Tim

    Member
    October 18, 2017 at 4:30 PM

    Sushant,

    Thanks for posting this Salesforce Lightning Controller. I'm wondering why in the following line you put the second parameter of "true"? Is it necessary when you're using get? I thought the second parameter was only used in the set statement:

    var checkbox = component.get(“v.item”,true);

    Thanks for your response.

  • Tim

    Member
    October 18, 2017 at 4:51 PM

    Can anyone tell me why component.set is used for v.item, but event.getSource().set is used for v.disabled ? I'm not finding a good answer in any of the documentation.

    Thanks for your help.

  • Anas Labriti

    Member
    October 22, 2017 at 8:25 PM

    Hello Tim,
    Item is an attribute of campingListItem Component (That's why we used component.set for v.item)
    And disabled is an attribute of the component Button (thats why wu used event.getSource().set"which also means button.set" for v.disabled ).
    I hope it was clear 😉

  • Obivan

    Member
    October 26, 2017 at 12:12 PM

    Agree

  • Manish

    Member
    July 10, 2018 at 8:54 PM

    I completed this with this code , just read the arcticle well and that should be good enough . This is good for starting lightning .

    <aura:component>
    <aura:attribute name=”item” type=”Camping_Item__c” required=”true”/>
    <p>
        Name: {!v.Item.Name}
    </p>
    <p>Quantity:
        <lightning:formattedNumber value=”{!v.Item.Quantity__c}” />
    </p>
    <p>Price:
        <lightning:formattedNumber value=”{!v.Item.Price__c}” style=”currency”/>
    </p>
    <p>
        Packed Status: {!v.item.Packed__c}
    </p>
    <p>
        <lightning:input type=”toggle” label=”Packed?” name=”Packed” checked=”{!v.Item.Packed__c}” />
    </p>
</aura:component>

  • Eswar Kumar

    Member
    November 29, 2018 at 4:37 PM

    Try this , It will be easy for you all to complete the challange.

    Step1:

    In the "campingListItem.cmp" paste this code  (ignore '' :P)

    <aura:component >
    <aura:attribute name=”item” type=”Camping_Item__c” required=”true”/>
    <p>Name:
        <ui:outputText value = “{!v.item.Name}”/>
    </p>
    <p>Price:
        <lightning:formattedNumber value=”{!v.item.Price__c}” style=”currency”/>
    </p>
    <p>Quantity:
        <lightning:formattedNumber value=”{!v.item.Quantity__c}” style=”number”/>
    </p>
    <p>Packed:
        <lightning:input type=”toggle” label=”Packed?” checked=”{!v.item.Packed__c}”/>
    </p>
    <div>
        <lightning:button label=”Packed!” onClick=”{!c.packItem}”/>
    </div>
</aura:component>

    Step2:

    create a controller to write the javascript code. ie campingListItemController.js and campingListController.js

    Step3:

    In campingListController.js, paste this code

    ({
    packItem : function(component, event, helper) {
        var btn = event.getSource();
        btn.set("v.disabled",true);
        component.set("v.item.Packed__c", "true");
    }
})

    Step4: In "campingListItemController.js" Paste This Code

    ({
    packItem : function(component, event, helper)
    {
        var checkbox = component.get("v.item",true);
        checkbox.Packed__c= true;
        component.set("v.item",checkbox);
        event.getSource().set('v.disabled',true);
    }
})

    Now you can save them and check Challange. It will pass 100%.

    Thanks you,
    Eshu

Log In to reply.

Popular Salesforce Blogs