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 lightning button to previously created campingListItem component.

First of all, Create a lightning input button with label value as Packed! and set {c.packItem} to click event handler. packItem is a method defined in javascript controller which is part of the component bundle. The button tag will be like this

<lightning:button label=”Packed!” onClick=”{c.packItem}” />

Next, define the click event handler which sets the value of the Packed__c property in the item attribute and disabled attribute of the lightning button.


Inside the event, it has the notion of a source, the thing that generated the event, which is the button itself. So, calling event.getSource() gets us a reference to the specific <lightning:button> that was clicked. The disabled attribute of the lightning button is assigned with the true value. disabled is one of the attributes of the lightning button component. Hence it would refer with value provider  v.disabled in the js controller.




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

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s