Trailhead Challenge : Mark Item as Packed

Trailhead Challenge – Mark Item as Packed


Mark Item as Packed

Add a button to the campingListItem component that when clicked, marks the item as packed.
  • Add a button labelled Packed! that calls the packItem controller function when clicked.
  • The controller function should do the following:
    • Mark the item attribute as packed using a value of true
    • Disable the button by marking the disabled attribute using a value of true


In this challenge, we need to add a button to the previously created campingListItem component. The attribute values of the button is

  • Label – packed!
  • Handler– Onclick- {c.packedItem}

The click event handler of the button should have update the item.Packed__c to true and it’s disabled attribute to true.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<!– item attribute is an instance of Camping_Item__c–>
<aura:attribute name="item" type="Camping_Item__c" description="instance of Camping_Item__c object" required="true" default="{Packed__c : false}" access="global"/>
Name: {!v.item.Name}
<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
<lightning:formattedNumber value="{!v.item.Quantity__c}"/>
<lightning:input type="toggle"
label="Packed ?"
checked="{!v.item.Packed__c}" />
<lightning:button label="Packed!"

view raw
hosted with ❤ by GitHub

packItem : function(component, event, helper) {
//set the Packed__c property of the item (instance of Camping_Item__c) attribute
//event.getSource refers the source tag from the event has invoked.
//set the disabled attribute to true

<aura:application extends="force:slds">
<c:campingListItem item="{Price__c: 100, Packed__c: false, Quantity__c: 10, Name:'Test'}" />

view raw
hosted with ❤ by GitHub



Don’t forget to share the post if you like it & bookmark the blog for future references. If you have any comments or doubts on this post, Please comment on the box.


Leave a Reply

%d bloggers like this: