Sir,

I am experiencing great difficulty with the following Trailhead module:

Lightning Components Basics, Connect to Salesforce with Server-Side Controllers

located at:  https://trailhead.salesforce.com/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_server

*****************************************************************************************************************************

Here is my code:

(campingList.cmp)

<aura:component >
   
 <aura:attribute name="items" type="Camping_Item__c[]"/>
    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{'sobjectType' : 'Camping_Item__c',
                               'Quantity__c' : 0,
                               'Price__c' : 0}"/>
  <!-- BOXED AREA -->
  <fieldset class="slds-box slds-theme--default slds-container--small">
    <legend id="newCampItemForm" class="slds-text-heading--small
      slds-p-vertical--medium">
      Add Camping Item
    </legend>
    <!-- CREATE NEW CAMPING ITEM FORM -->
    <form class="slds-form--stacked">
      <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="campItemName" label="Camping Item Name"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newItem.Name}"
                  required="true"/>
          </div>
     </div>
     <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputNumber aura:id="quantity" label="Quantity"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newItem.Quantity__c}"
                  required="true"/>
          </div>
      </div>
      <div class="slds-form-element">
          <div class="slds-form-element__control">
              <ui:inputCurrency aura:id="price" label="Price"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newItem.Price__c}"/>
          </div>
      </div>
      <div class="slds-form-element">
          <ui:inputCheckbox aura:id="packed" label="Packed?"
              class="slds-checkbox"
              labelClass="slds-form-element__label"
              value="{!v.newItem.Packed__c}"/>
      </div>
      <div class="slds-form-element">
          <ui:button label="Create Camping Item"
              class="slds-button slds-button--brand"
              press="{!c.clickCreateItem}"/>
      </div>
    </form>
    <!-- / CREATE NEW CAMPING ITEM FORM -->
  </fieldset>
        <div class ="slds-card slds-p-top--meduim">
        <header class ="slds-card__header">
            <h3 class = "slds-text-heading--small">Items</h3>
        </header>
        <section class ="slds-card__body">
         <div id="list" class = "row">
             <aura:iteration items="{!v.items}" var="item">
                    <c:campingListItem item="{!item}"/>
                </aura:iteration>
            </div>
        </section>
    </div>
    <!-- i do not think this html is needed any longer
 <ol> 
        <li>Bug Spray</li>
        <li>Bear Repellant</li>
        <li>Goat Food</li>
    </ol>-->
</aura:component>


(campingListController.js)

({
 
    doInit  : function(component, event, helper) {
  var action = component.get("c.getItems");
        action.setCallback(this, function(response){
            var state = response.getState();
          
            if (component.isValid() && state === "SUCCESS") {
          
              
                component.set("v.items", response.getReturnValue());
                
            }
        });
       
        $A.enqueueAction(action);
 },
   
    CreateCamping : function(component, event, helper){
       
        helper.validateFields (component,component.find("name"));
        helper.validateFields (component,component.find("Price"));
        helper.validateFields (component,component.find("Quantity"));
        if(component.get("v.er") === false)
        {    
&nbsp;           //Here I removed the lines and shifted the code to the helperJs      
            console.log('Before:'+Items);           
            helper.CreateCampaign(component,Item);            
             console.log('After:'+Items);                   
        }
 }   
})


(campingListHelper.js)

({
 
    validateFields : function (component,field) {
       
        var nameField = field;
        console.log('yes:'+nameField);
        var expname = nameField.get("v.value");
        if ($A.util.isEmpty(expname)){
           component.set("v.er",true);
           nameField.set("v.errors", [{message:"this field can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }
    },
   
    CreateCampaign : function (component,Item){
     
        var action = component.get("c.saveItem");
        action.setParams({"CampingItem":Item});
        action.setCallback(this,function(response){
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                console.log('save');
            }
        });
        $A.enqueueAction(action); 
//Below lines are shifted from controller Js to helperJs
        var Items = component.get("v.items");
&nbsp;       var Item = component.get("v.newItem");
&nbsp;       Items.push(Item);   
        component.set("v.items",Items);
        component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
                'Name': '',
                'Quantity__c': 0,
                'Price__c': 0,
                'Packed__c': false });
    }
})

*****************************************************************************************************************************

When I do the Check Challenge, I receive the following error:

Challenge Not yet complete... here's what's wrong:
The Apex controller 'CampingListController' does not exist.

The only thing that I can find in the Forum help documentation is that my code has a campingListController.js and a campingListHelper.js, others have a .js file named camperList.js

Please advise.

Ryan
 

Hi, I have problem in the challenge which is as follows : 
Create a Lightning Component to display a single item for your packing list.

• Create a component called campingListItem that displays the name (ui:outputText) and the three custom fields using the appropriate output components.
• Add an attribute named item for type Camping_Item__c that is required.

for this I made component campingListItem.cmp which has following code :

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

but data is not displaying from object simple HTML text is displaying as follows:

Name:
Quantity:
Price:
Packed?:  False

please give me some suggestion.

 

The campingList JavaScript controller isn't setting the 'item' as a parameter or saving the record correctly.

My code is as follows:

1---Camping List Component

<aura:component controller="CampingListController">
	
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    <aura:handler name="addItem" event="c:addItemEvent"
   	action="{!c.handleAddItem }"/>
    
    <aura:attribute name="newItem" type="Camping_Item__c"
     default="{ 'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Quantity__c': 0,
                    'Price__c': 0,
                    'Packed__c': false }"/>
    
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    
    <ol>
    <li>Bug Spray</li>
    <li>Bear Repellant</li>
    <li>Goat Food</li>
    </ol>
    
       <!-- NEW EXPENSE FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">

        <c:campingListForm/>

    </div>
    <!-- / NEW EXPENSE FORM -->    
   

    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Items</h3>
        </header>
        
        <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.items}" var="items">
                    <c:campingListItem item="{!item}"/>
                </aura:iteration>
            </div>
        </section>
    </div>

</aura:component>

2---Camping List Controller
 

({
    // Load items from Salesforce
	doInit: function(component, event, helper) {

    // Create the action
    var action = component.get("c.getItems");

    // Add callback behavior for when response is received
    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);
        }
    });

    // Send action off to be executed
    $A.enqueueAction(action);
},

    
    handleAddItem: function(component, event, helper) {
    var newItem = event.getParam("item");
    //helper.createItem(component, newItem);
        this.saveItem(component, item, function(response){
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            var items = component.get("v.items");
            items.push(response.getReturnValue());
            component.set("v.items", items);
        }
    }
          
}
                      
})

3---Camping List Helper

Empty

4---Camping List Form
 

<aura:component >
	
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
        <!-- CREATE NEW ITEM FORM -->
    <form class="slds-form--stacked">

      <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputText aura:id="itemname" label="Name"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newItem.Name}"
                  required="true"/>

          </div>
     </div>

     <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <ui:inputNumber aura:id="quantity" label="Quantity"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newItem.Quantity__c}"
                  required="true"/>

          </div>
      </div>

      <div class="slds-form-element">
          <div class="slds-form-element__control">
              <ui:inputCurrency aura:id="price" label="Price"
                  class="slds-input"
                  labelClass="slds-form-element__label"
                  value="{!v.newItem.Price__c}"
                  />
          </div>
      </div>

      <div class="slds-form-element">
          <ui:inputCheckbox aura:id="packed" label="Packed?"
              class="slds-checkbox"
              labelClass="slds-form-element__label"
              value="{!v.newItem.Packed__c}"/>
      </div>

      <div class="slds-form-element">
          <ui:button label="Create Camping Item"
              class="slds-button slds-button--brand"
              press="{!c.clickCreateItem}"/>
      </div>

    </form>
    <!-- / CREATE NEW ITEM FORM -->
</aura:component>

5---CampingListFormController
 

({
    
    clickCreateItem: function(component, event, helper) {    
    if(helper.validateItemForm(component)){
        // Create the new item
        var newItem = component.get("v.newItem");
        helper.createItem(component, newItem);
    }
        
        }

})

6---CampingListFormHelper
 

({
 createItem: function(component, newItem) {
    var createItem = component.getItem("createItem");
    createItem.setParams({ "item": item });
    createItem.fire();
             component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Quantity__c': 0,
                    'Price__c': 0,
                    'Packed__c': false }/>);
},
    

		validateItemForm: function(component) {
		
              // Simplistic error checking
        var validItem = true;

        // Name must not be blank
        var nameField = component.find("itemname");
        var itemname = nameField.get("v.value");
        if ($A.util.isEmpty(itemname)){
            validItem = false;
            nameField.set("v.errors", [{message:"Item name can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }
        
        // Quantity must not be blank
        var quantityField = component.find("quantity");
        var quantity = nameField.get("v.value");
        if ($A.util.isEmpty(quantity)){
            validItem = false;
            quantityField.set("v.errors", [{message:"Quantity can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }
		// Price must not be blank
        var priceField = component.find("price");
        var price = priceField.get("v.value");
        if ($A.util.isEmpty(price)){
            validItem = false;
            priceField.set("v.errors", [{message:"Price can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }
            return validItem;

	}
})

I am still getting this error:



Any help would be appreciated.
 

Challenge - Create a form to enter new items and display the list of items entered. To make our camping list look more appealing, change the campingHeader component to use the SLDS. Similar to the unit, style the Camping List H1 inside the slds-page-header. Modify the campingList component to contain an input form and an iteration of campingListItem components for displaying the items entered.
The component requires an attribute named items with the type of an array of camping item custom objects.
The component requires an attribute named newItem of type Camping_Item__c with default quantity and price values of 0.
The component displays the Name, Quantity, Price, and Packed form fields with the appropriate input component types and values from the newItem attribute.
The JavaScript controller checks to ensure that the Name, Quantity and Price values submitted are not null.
If the form is valid, the JavaScript controller pushes the newItem onto the array of existing items, triggers the notification that the items value provider has changed, and resets the newItem value provider with a blank sObjectType of Camping_Item__c.


My answer - 
<aura:component >
<aura:attribute name="items" type="Camping_Item__c[]"/>
<aura:attribute name="newitem" type="Camping_Item__c[]"  default="{ 'sobjectType': 'Camping_Item__c',
                   'Quantity__c'=0, 'Price__c'=0}"/>
 <p>Name:
        <ui:inputText value="{!v.newitem.name}"/>
    </p>    
  <p>Packed:
        <ui:inputCheckbox value="{!v.newitem.Packed__c}"/>
     
    </p>    
  <p>Price:
        <ui:inputCurrency value="{!v.newitem.Price__c}"/>
    </p>
    <p>Quantity:
        <ui:inputNumber value="{!v.newitem.Quantity__c}"/>
    </p>
</aura:component>


Error -

Challenge Not yet complete... here's what's wrong: 
The campingList component isn't iterating the array of 'items' and creating 'campingListItem' components.

Please share the correct solution.

HI ,I am doing a trailhead on salesforce Lighting this is my code 

<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>


Now Its required of me to :
Add a button to the campingListItem component that when clicked, marks the item as packed.
1.Add a button labeled "Packed!" that calls the packItem controller function when clicked.
2.The controller action marks the item attribute as packed and disables the button.

I have done with the first point
I'm struggling with the second point.

the controller code looks something like this (which currently isnt working)

({
    packItem : function(component, event, helper) {
        var btn= event.getSource();
        var BtnMessage =btn.get("v.label");  
        component.set("v.item","Packed");          
        btn.disabled=false;
    }
})


each time I have failing the trailhead because of this error message
Challenge Not yet complete... here's what's wrong: 
The campingListItem JavaScript controller isn't setting the 'Packed' value correctly.