function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Orchay NaehOrchay Naeh 

having troubles with Connect Components with Events

first of all hello : )
i working my way through the trailhead training and encountered a problem submitting this challenge.
the code itself works yet i get an error of :

Challenge Not yet complete... here's what's wrong: 
The campingList component doesn't appear to have a Quantity input field in the form using a Lightning Base component.

i guess its a default message for somthing else, any suggestion will be appreciated, i am posting my classes below,

CampingList.cmp 
<aura:component controller="CampingListController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem}"/>
 
        <aura:attribute name="items" type="Camping_Item__c[]"/>
       
    <div class="slds-col slds-col--padded slds-p-top--small">
        <c:campingListForm />
    </div>
   
    <br/>
    <section class="slds-card__body">
    <div id="list" class="row">
        <aura:iteration items="{!v.items}" var="PerItem">
        <c:campingListItem item="{!PerItem}"/>
    </aura:iteration>
    </div>
    </section>
   
</aura:component>


CampingList(Controller).js (helper - is empty)  
({
    doInit  : function(component, event, helper) 
    {
               var action = component.get("c.getItems"); // c of apex controller
        action.setCallback(this, function(response)
        {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") 
            {
                component.set("v.items", response.getReturnValue());
            }
            else 
            {
            console.log("Failed with state: " + state);
               }
        });
        $A.enqueueAction(action);
        },
 
    handleAddItem : function (component,event,helper)
    {
               var action = component.get("c.saveItem");
        var item = event.getParam("item");
        var lstItems = component.get("v.items");
 
        action.setParams({"item":item});
        action.setCallback(this,function(response)
        {
               var state = response.getState();
               if (component.isValid() && state === "SUCCESS") 
               {
               lstItems.push(item);
               component.set("v.items",lstItems);
               console.log("After:"+lstItems);                
               }
        });
        $A.enqueueAction(action);   
    },
})



CampingListForm.cmp 
<aura:component >
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    <aura:attribute name="er" type="boolean" default="false"/>
    <aura:attribute name="newItem" type="Camping_Item__c"    default="{ 'sobjectType': 'Camping_Item__c',
                         'Name': '',
                         'Price__c': 0,
                         'Quantity__c': 0,                         
                         'Packed__c': false}"/>
 
        <form class="slds-form--stacked">          
         
                <lightning:input aura:id="Name" label="Camping Name"
                             name="name"
                             value="{!v.newItem.Name}"
                             required="true"/>
                     
                <lightning:input type="toggle" aura:id="Packed" label="Packed?"  
                             name="Packed"
                             checked="{!v.newItem.Packed__c}"/>
         
                <lightning:input type="number" aura:id="Price" label="Price"
                             name="Price"
                             min="0.1"
                             formatter="currency"
                             step="0.01"
                             value="{!v.newItem.Price__c}"
                             messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>
 
                <lightning:input type="number" aura:id="Quantity" label="Quantity"
                             name="Quantity"
                             value="{!v.newItem.Quantity__c}"
                             placeholder="ABC Co."/>
 
                <lightning:button label="Create Camping" 
                              class="slds-m-top--medium"
                              variant="brand"
                              onclick="{!c.clickCreateItem}"/>
        </form>
  
</aura:component>



CampingListForm(Controller).js 
({
    clickCreateItem: function(component, event, helper) {  
        var a = component.get("v.newItem");
              
        helper.validateFields (component,component.find("Name"));
        helper.validateFields (component,component.find("Price"));
        helper.validateFields (component,component.find("Quantity"));
 
        var er = component.get("v.er");
        console.log(er);
 
        if(!er)
        {
            var newItem = component.get("v.newItem");            
            helper.CreateItem(component, newItem);
        }
      
        component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
                        'Name': '',
                        'Quantity__c': 0,
                        'Price__c': 0,
                        'Packed__c': false });
    },
})


CampingListForm(Helper).js 
({
    CreateItem : function(component, newItem) 
    {
        // creating event setting its parameters and fires it
        var createEvent = component.getEvent("addItem");
        // cleaning from fields
        component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
                        'Name': '',
                        'Quantity__c': 0,
                        'Price__c': 0,
                        'Packed__c': false });
 
        createEvent.setParams({ "item": newItem });
        createEvent.fire();
    },
       
        validateFields : function (component,field) {
        var nameField = field;
        console.log('yes:'+nameField);
        var fieldname = nameField.get("v.value"); 
 
        if ($A.util.isEmpty(fieldname))
        {
           console.log('found empty nameField' + fieldname);
           component.set("v.er",true);
           nameField.set("v.errors", [{message:"this field can't be blank."}]);
        }
        else 
        {
            console.log('found nameField' + fieldname);
            nameField.set("v.errors", null);
        }
    },
 
})


CampingListItem.cmp 
<aura:component >
       
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    <aura:attribute type="Camping_Item__c" name="item" required="true"/>
   
    Name:
        <lightning:formattedText value="{!v.item.Name}" /><br/>
    Price:
    <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/><br/>
    Quantity:
    <lightning:formattedNumber value="{!v.item.Quantity__c}" /><br/>
    Packed:
    <lightning:input type="toggle" 
            label="Packed?"
            name="Packed"
            class="slds-p-around--small"
            checked="{!v.item.Packed__c}"
            messageToggleActive="Yes"
            messageToggleInactive="No"
            onchange="{!c.packItem}"/>
   
</aura:component>
CampingListController.apxc 
public with sharing class CampingListController {
 
    @AuraEnabled
    public static List<Camping_Item__c> getItems() {
        return [SELECT Id, Name, price__c, Quantity__c, Packed__c 
                FROM Camping_Item__c];
    }
   
    @AuraEnabled
    public static Camping_Item__c saveItem(Camping_Item__c item) {
        system.debug('^^^the new item '+item);
        upsert item;
        return item;
    }
}



and camping class that includes campingHeader and campingList 
and i start it from harness.app

thank you
Naeh Orchay





 
Best Answer chosen by Orchay Naeh
Orchay NaehOrchay Naeh
well found the problem in a nother chat, about this challange in the form component was lacking parameters in the quantity and the field and the packed field should be a checkbox and not a toggle so the new form component will look like 

CampingListForm.cmp 
<aura:component >
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    <aura:attribute name="er" type="boolean" default="false"/>
    <aura:attribute name="newItem" type="Camping_Item__c"    default="{ 'sobjectType': 'Camping_Item__c',
                         'Name': '',
                         'Price__c': 0,
                         'Quantity__c': 0,                         
                         'Packed__c': false}"/>

        <form class="slds-form--stacked">          
          
                <lightning:input aura:id="Name" label="Camping Name"
                             name="name"
                             value="{!v.newItem.Name}"
                             required="true"/>
            	               
           			 <!-- Packed -->
                <div class="slds-form-element" >                  
                    <lightning:input type="checkbox"
                       aura:id="Packed"
                       label="Packed?"
                       name="packed"
                       checked="{!v.newItem.Packed__c}"/> 
                </div>          
            
          
                <lightning:input type="number" aura:id="Price" label="Price"
                             name="Price"
                             min="0.1"
                             formatter="currency"
                             step="0.01"
                             value="{!v.newItem.Price__c}"
                             messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>

                <!-- Quantity -->
                <div class="slds-form-element__label" >
                    <div class="slds-form-element__control" >  
                       <lightning:input type="number"
                       aura:id="Quantity"
                       label="Quantity"
                       name="quantity"
                       value="{!v.newItem.Quantity__c}"
                       min="1"
                       required="true"/>
                    </div>                
                </div>


                <lightning:button label="Create Camping" 
                              class="slds-m-top--medium"
                              variant="brand"
                              onclick="{!c.clickCreateItem}"/>
        </form>
   
</aura:component>