Trailhead Challenge : Mark Item as Packed

Trailhead Challenge – Mark Item as Packed

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

https://trailhead.salesforce.com/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_controllers

Solution

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.

component.set(“v.item.Packed__c”,true);

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.

event.getSource().set(“v.disabled”,true);

References

TrailHead:https://trailhead.salesforce.com/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_controllers:

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.

output_challenge_Mark_Item_as_Packed

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

w

Connecting to %s