Skip to main content The Trailblazer Community will be unavailable from 2/1/2025 to 2/2/2025. Please plan your activities accordingly.
HI ,I am doing a trailhead on salesforce Lighting this is my code 

<aura:component >

    <aura:attribute name="item"  type="Camping_Item__c"  /> <!-- required="true" type="String"  -->

    <p> The Item is <ui:outputText value ="{!v.item}"></ui:outputText></p>

    <p>Name:

        <ui:outputText value="{!v.item.name}" /> 

    </p>

    <p>Quantity:

        <ui:outputNumber value="{!v.item.Quantity__c}" /> 

    </p>

    <p>Price:

        <ui:outputCurrency value="{!v.item.Price__c}" /> 

    </p>

    <p>Packed?:

        <ui:outputCheckbox value="{!v.item.Packed__c}" /> 

    </p>

    

    <p><ui:button label="Packed!" press="{!c.packItem}"></ui:button>

    </p>

</aura:component>

Now Its required of me to :

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

1.Add a button labeled "Packed!" that calls the packItem controller function when clicked.

2.The controller action marks the item attribute as packed and disables the button.

I have done with the first point

I'm struggling with the second point.

the controller code looks something like this (which currently isnt working)

({

    packItem : function(component, event, helper) {

        var btn= event.getSource();

        var BtnMessage =btn.get("v.label");  

        component.set("v.item","Packed");          

        btn.disabled=false;

    }

})

each time I have failing the trailhead because of this error message

Challenge Not yet complete... here's what's wrong: 

The campingListItem JavaScript controller isn't setting the 'Packed' value correctly.

 
63 answers
  1. Jun 8, 2016, 12:36 PM
    Hi Atticus,

    Please try updating following statement in your controller:

    ({

        packItem: function(component, event, helper) {

            var a = component.get("v.item",true);

            a.Packed__c = true;

            component.set("v.item",a);

            var btnClicked = event.getSource();

            btnClicked.set("v.disabled",true);

        }

    })

    Thanks,

    Amit
  2. Jun 12, 2018, 2:50 PM
    This worked for me

    Component:

    <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> <lightning:input type="toggle" label="Packed" name="togglevalue" checked="{!v.item.Packed__c}" />

        </p>

        <div>

            <lightning:button label="Packed!"

                onclick="{!c.packItem}"/>

     

       </div>

    </aura:component>

    Controller:

    ({

        packItem : function(component, event, helper) {

            var btnClicked = event.getSource();         

            var btnMessage = btnClicked.get("v.label");

            component.set("v.item.Packed__c", "true");     

            btnClicked.set("v.disabled",true);

        }

    })
  3. Sep 25, 2017, 2:59 AM

    If anyone is struggling with this challenge currently.  I found that when it asks you to create a "lightning" button, you actually have to use a <lightning:button /> component. 

    <lightning:button label="Packed!" onclick="{!c.packItem }"/>

  4. Jun 9, 2016, 11:45 AM
    Sorry, just making an correction to utilize the BtnMessage variable:

     

    ({

    packItem: function(component, event, helper) {

    var btn= event.getSource();

    var BtnMessage =btn.get("v.label");

    component.set("v.item",BtnMessage);

    var btnClicked = event.getSource();

    btnClicked.set("v.disabled",true);

    }

    })

     
  5. May 14, 2018, 3:25 AM

    <aura:component >

    <aura:attribute name="item" type="Camping_Item__c" required="true"/>

    <p>Name:

    <lightning:formattedText value="{!v.item.Name}"/>

    </p>

    <p>Price:

    <lightning:formattedNumber style="currency" value="{!v.item.Price__c}"/>

    </p>

    <p>Quantity:<lightning:formattedNumber value="{!v.item.Quantity__c}"/></p>

    <p>

    <lightning:input type="toggle"

    label="Packed?"

    name="Packed"

    checked="{!v.item.Packed__c}" />

    Packed

    </p>

    <p>

    <lightning:button label="Packed!"

    onclick="{!c.packItem}"/>

    </p>

    </aura:component>

    ({

    packItem: function(component, event, helper) {

    var a = component.get("v.item",true);

    a.Packed__c = true;

    component.set("v.item",a);

    var btnClicked = event.getSource();

    btnClicked.set("v.disabled",true);

    }

    })

     
  6. Apr 13, 2018, 9:10 AM
    <aura:component >

        

        <aura:attribute name="item" type="Camping_Item__c" required="true"/>

        

        <p>Name:{!v.item.Name}</p>

        <p>{!v.item.Price}</p>

        <!--<p>{!item.Quantity__c}</p>-->

        <p>{!v.item.Packed__c}</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>

            <lightning:input type="toggle"                            

                             label="Packed"                           

                             name="Packed"                         

                             checked="{!v.item.Packed__c}" />

         </p> 

        

        <p>

        <lightning:button label="Packed!" onclick="{!c.packItem }"/>

        

        </p>

        

    </aura:component>

    ===========================================================================================

    ({

        packItem : function(component, event, helper) {

            

            var a=component.get(v.item);

            a.Packed__c=True;

            component.set("v.item",a);

            

            var btn1=event.getSource();

            document.getElementById(btn1.id).disabled=true;

            

        }

    })
  7. Aug 9, 2016, 1:27 PM
    Hi All,

    with above code I have completed the challenge thanks!!...When I tried to add this componet to Application and tried to check the UI part..I got below error, Can some one please let me know what the mistake is???

    Something has gone wrong. [NoErrorObjectAvailable] Aura.loadComponent(): Failed to initialize application. An internal server error has occurred Error ID: 991118890-131685 (-1741317831) . Please try again.

    APP:

    <aura:application >

        <c:campingListItem />

    </aura:application>

    COMPONENT:

    <aura:component >

        <aura:attribute name="item" type="Camping_Item__c" required="true"/>

        <ui:outputText value="{!v.item}"/>

        <ui:outputText value="{!v.item.Name}"/>

        <ui:outputCheckbox value="{!v.item.Packed__c}"/>

        <ui:outputCurrency value="{!v.item.Price__c}"/>

        <ui:outputNumber value="{!v.item.Quantity__c}"/>

        

        <ui:button label="packed!" press="{!c.packItem}" > 

        </ui:button>

    </aura:component>

    CONTROLLER:

    ({

        packItem: function(component, event, helper) {

            var a = component.get("v.item",true);

           

            a.Packed__c = true;

            component.set("v.item",a);

            var btnClicked = event.getSource();

            btnClicked.set("v.disabled",true);

        }

    })

    Thanks
  8. Jul 6, 2021, 1:47 PM
    The cleanest and sintactically correct solution:

    ----------------------------COMPONENT---------------------------

     

    <aura:component >

        <aura:attribute name="item" type="Camping_Item__c" required="true" default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:true}"/>

        <p>{!v.item.Name}</p>

        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency" currencyCode="USD"/>

        <lightning:formattedNumber value="{!v.item.Quantity__c}" maximumFractionDigits="0"/>

        <lightning:input type="toggle" label="Packed?" name="packed" checked="{!v.item.Packed__c}"/>

        <lightning:button label="Packed!" onclick="{!c.packItem}"/>

    </aura:component>

    ----------------------------CONTROLLER---------------------------

     

    ({

        packItem : function(component, event, helper) {

            component.set("v.item.Packed__c", true);

            event.getSource().set('v.disabled',true);

        }

    })
  9. Feb 17, 2020, 8:30 AM
    Controller code should be as below:

    ({

        packItem : function(component, event, helper) {

        

            component.set("v.item.Packed__c",true);

            component.set("v.disabled",true);

        }

    })
  10. Mar 20, 2018, 5:41 PM
    Hi All, Please try the following code:

    <aura:component>

        <aura:attribute name="item" type="Camping_Item__c"/>

        <lightning:button label="Packed!" onclick="{!c.packItem}"/>

    </aura:component>

    ({

        packItem : function(component, event, helper) 

        {

            var a=component.get(v.item);

            a.Packed__c=True;

            component.set("v.item",a);

            

            var btn1= event.getsource();

            document.getElementById(btn1.id).disabled = true;

        }

    })
0/9000