+ Start a Discussion
SUJAY GANGULYSUJAY GANGULY 

Lightning Trailhead challenge not completed please help

The challenge requirements is below:
Mark Item as Packed
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.

My Component:

<aura:component >
    <aura:attribute name="item"  type="Camping_Item__c"  /> <!-- required="true" type="String"  -->
    <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>

My Controller:

({
    packItem : function (component, event, helper)
    {
        var btn = event.getSource();
        var btnMessage = btn.get("v.label");
        component.set("v.item" , btnMessage);
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled" , "TRUE");
    } 
     
})field is updatedBut still getting this error. Please help what should i do?
Best Answer chosen by SUJAY GANGULY
Sampat_KhuranaSampat_Khurana
Hi,
You are trying to execute this without passing any record in the attribute you mentioned in component. Trailhead validates it by passing a valid record that is the reason the challenge got passed. In further modules, you will learn to get the record from apex controller. I would suggest you to go through that and then validate this component again by passing some valid records.

About the javascript:
({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c",true); // it got added mistakenly in my previous comment. Not required.
        var cItem = component.get("v.item",true); // Getting the component's attribute
        cItem.Packed__c = true; // Assigning the field value to True
        component.set("v.item",cItem); // Setting the attribute back to component
        var btnClicked = event.getSource(); //Getting the button 
        btnClicked.set("v.disabled","true"); // Setting the button to disabled.
 
   }
})

Thanks,
Sampat Khurana

All Answers

Sampat_KhuranaSampat_Khurana
Hi,

Use the below code in js controller to resolve this issue.
({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c",true);
        var cItem = component.get("v.item",true);
        cItem.Packed__c = true;
        component.set("v.item",cItem);
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled","true");
    }
})


Thanks,
Sampat Khurana
SUJAY GANGULYSUJAY GANGULY
when i use *Packed__c that time challenge was completed but I'm getting error in run time.why?*
SUJAY GANGULYSUJAY GANGULY
when I use Packed__c then the challenge has completed but I'm getting an error in runtime. why it's happened? and can you also explain this JS code, please?
Sampat_KhuranaSampat_Khurana
Can you paste a snapshot of the error you got.

Thanks,
Sampat Khurana
SUJAY GANGULYSUJAY GANGULY
This error is occur.
Sampat_KhuranaSampat_Khurana
Hi,
You are trying to execute this without passing any record in the attribute you mentioned in component. Trailhead validates it by passing a valid record that is the reason the challenge got passed. In further modules, you will learn to get the record from apex controller. I would suggest you to go through that and then validate this component again by passing some valid records.

About the javascript:
({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c",true); // it got added mistakenly in my previous comment. Not required.
        var cItem = component.get("v.item",true); // Getting the component's attribute
        cItem.Packed__c = true; // Assigning the field value to True
        component.set("v.item",cItem); // Setting the attribute back to component
        var btnClicked = event.getSource(); //Getting the button 
        btnClicked.set("v.disabled","true"); // Setting the button to disabled.
 
   }
})

Thanks,
Sampat Khurana
This was selected as the best answer
SUJAY GANGULYSUJAY GANGULY
Ok. I understand. Thank you, Sampat .
Sampat_KhuranaSampat_Khurana
If you want to see it actually working, update the campingListItem component by adding a default value of Camping_Item__c object like below:

<aura:attribute name="item" type="Camping_Item__c" default="{ 'sobjectType': 'Camping_Item__c',
                    'Name': 'test-item',
                    'Price__c': 10,
                    'Quantity__c': 1,
                    'Packed__c': false}"/>