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 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"/>
<p>
Name: {!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="Packed"
checked="{!v.item.Packed__c}" />
</p>
<lightning:button label="Packed!"
onclick="{!c.packItem}"/>
</aura:component>

view raw
campingListItem.cmp
hosted with ❤ by GitHub

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

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

view raw
TestApp.app
hosted with ❤ by GitHub

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 )

Connecting to %s