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
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> |
| ({ | |
| 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> |
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.
