function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
MythiliMythili 

Lightning Components Basics module -Handle actions with controllers module - issue

Hi,
i am getting Challenge Not yet complete... here's what's wrong: 
The campingListItem Lightning Component doesn't contain a button or its attributes are not set correctly when clicked. error.
The description of  the challnege is :
Add a button to the campingListItem component that when clicked, marks the item as packed.
Add a button labeled "Packed!" that calls the packItem controller function when clicked.
The controller action marks the item attribute as packed, updates the item value provider and disables the button.

Though I get proper output, I am not able to solve this challenge. Not sure what they are expecting.
Any help is appreciated!!
 
Best Answer chosen by Mythili
sfdcMonkey.comsfdcMonkey.com
hi Mythili 
change your component with this code 

campingListItem.cmp
<aura:component >
     <aura:attribute name="item" type="Camping_Item__c"/>
    <p> The Item is <ui:outputText value ="{!v.item}"></ui:outputText></p>
    <p>Name:
        <ui:outputText value="{!v.item.name}" /> 
    </p>

    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}" /> 
    </p>

    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}" /> 
    </p>

    <p>Packed?:
        <ui:outputCheckbox value="{!v.item.Packed__c}" /> 
    </p>
    
    <p><ui:button label="Packed!" press="{!c.packItem}"></ui:button>
    </p>
</aura:component>


campingListItemController.js
({
    packItem : function(component, event, helper) {
     var a = component.get("v.item",true);
        a.Packed__c = true;
        component.set("v.item",a);
        
        var btnClick = event.getSource();
        btnClick.set("v.disabled",true);
        
    }
})


and try again.
Thanks 
let me inform if it work.and mark it best answer if its helps you :)
 
 

All Answers

MythiliMythili
Sure.

.cmp file:
<aura:component >
    <aura:attribute name="item" type="boolean"/>
    <ui:outputCheckBox value="{!v.item}"/>
   <ui:button press="{!c.packItem}" label="Packed!" disabled="false" aura:id="btn"/>
    
</aura:component> 

.js file:
({
    packItem : function(component, event, helper) {
        component.set("v.item",true);
        event.getSource().set("v.disabled",true);//Disable the button
    }
})
sfdcMonkey.comsfdcMonkey.com
hi Mythili 
change your component with this code 

campingListItem.cmp
<aura:component >
     <aura:attribute name="item" type="Camping_Item__c"/>
    <p> The Item is <ui:outputText value ="{!v.item}"></ui:outputText></p>
    <p>Name:
        <ui:outputText value="{!v.item.name}" /> 
    </p>

    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}" /> 
    </p>

    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}" /> 
    </p>

    <p>Packed?:
        <ui:outputCheckbox value="{!v.item.Packed__c}" /> 
    </p>
    
    <p><ui:button label="Packed!" press="{!c.packItem}"></ui:button>
    </p>
</aura:component>


campingListItemController.js
({
    packItem : function(component, event, helper) {
     var a = component.get("v.item",true);
        a.Packed__c = true;
        component.set("v.item",a);
        
        var btnClick = event.getSource();
        btnClick.set("v.disabled",true);
        
    }
})


and try again.
Thanks 
let me inform if it work.and mark it best answer if its helps you :)
 
 
This was selected as the best answer
MythiliMythili
Thanks a lot Soni. I am able to clear the unit using the above code.
But I get some error when I click on the button. Is this expected behaviour?

Thanks,
Mythili
MythiliMythili
Hi, 
I think object is passed as null in apex:attribute.
User-added image
MythiliMythili
This is the error:
Something has gone wrong. Action failed: LightningMyth$campingListItem$controller$packItem [TypeError: Cannot set property 'Packed__c' of null] Failing descriptor: {LightningMyth$campingListItem$controller$packItem}. Please try again.
sfdcMonkey.comsfdcMonkey.com
hi Mythili 
you got this error because by default Packed__c value is null not false to solve this issue update <aura:attribute>  line in your component  


 <aura:attribute name="item" type="Camping_Item__c" default="{
                                                                       'sobjectType':'Camping_Item__c',
                                                                           'Packed__c':false
                                                                           }"/>

Thanks :)
MythiliMythili
It works great now Soni. Thanks :)