TrailHead Help

TrailHead Exercise -  Lightning Component Basics - Input Data Using Forms

Below code will help in completing the Input Data Using Forms exercise


Camping List Component

<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}" />
     
    <br/><br/>
    <p>Name:
    <ui:inputText aura:id="name" value="{!v.newItem.Name}" Label="Name" />
    </p><br/>
    <p>Quantity:
    <ui:inputNumber aura:id="quantity" value="{!v.newItem.Quantity__c}" Label="Quantity" />
    </p><br/>
    <p>Price:
    <ui:inputCurrency aura:id="price" value="{!v.newItem.Price__c}" Label="Price" />
    </p><br/>
    <p>Packed?:
    <ui:inputCheckBox value="{!v.newItem.Packed__c}" Label="Packed" />
    </p><br />
 
    <ui:button label="Submit" press="{!c.PushItems}" />
 
    <aura:iteration items="{!v.items}" var="item">
 
    <c:campingListItem item="{!item}" />
     
    </aura:iteration>
     

</aura:component>


Camping List Controller

({
PushItems : function(component, event, helper) {
     
        var validItem = true;

        var ilist = component.get("v.items");
        var nitem = component.get("v.newItem");
     
        var iName = component.find("name");
        var iQuantity = component.find("quantity");
        var iPrice = component.find("price");
     
        if($A.util.isEmpty(iName.get("v.value"))){
        console.log('Checking Name is null');  
            validItem = false;
            iName.set("v.errors",[{message:"Item Name cannot be blank"}]);
         
         
        }else if($A.util.isEmpty(iQuantity.get("v.value"))){
         
            validItem = false;
            iQuantity.set("v.errors",[{message:"Item Quantity cannot be blank"}]);
         
        }else if($A.util.isEmpty(iPrice.get("v.value"))){          
         
            validItem = false;
            iPrice.set("v.errors",[{message:"Item Price cannot be blank"}]);
         
        }
     
        if(validItem){
         
            var pitem = JSON.parse(JSON.stringify(nitem));
         
            ilist.push(pitem);
         
            component.set("v.items",ilist);
         
            console.log('pushed list : ' + pitem);
         
            component.set("v.newItem",{'sObjectType':'Camping_Item__c','Name':' ','Quantity__c':0,'Price__c':0});
         
        }
     
     
}

})


CampingListItem Component

<aura:component >
 
    <aura:attribute name="item" type="Camping_Item__c" />
 
    <p> <ui:outputText value="{!v.item.Name}" /> </p>
 
    <p> <ui:outputNumber value="{!v.item.Quantity__c}" /> </p>
 
    <p> <ui:outputCurrency value="{!v.item.Price__c}" />  </p>
 
    <p> <ui:outputCheckbox value="{!v.item.Packed__c}" /> </p>


</aura:component>

TrailHead Exercise -  Lightning Component Basics - Connect to Salesforce with Server-Side Controllers

Below code will help in completing the Connect to Salesforce with Server-Side Controllers exercise

CampingList Component

<aura:component controller="CampingListController" >

    <aura:attribute name="items" type="Camping_Item__c[]" />
   
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
   
    <aura:attribute name="newItem" type="Camping_Item__c" default="{'sObjectType':'Camping_Item__c','Quantity__c':0,'Price__c':0}" />
     
    <br/><br/>
    <p>Name:
    <ui:inputText aura:id="name" value="{!v.newItem.Name}" Label="Name" />
    </p><br/>
    <p>Quantity:
    <ui:inputNumber aura:id="quantity" value="{!v.newItem.Quantity__c}" Label="Quantity" />
    </p><br/>
    <p>Price:
    <ui:inputCurrency aura:id="price" value="{!v.newItem.Price__c}" Label="Price" />
    </p><br/>
    <p>Packed?:
    <ui:inputCheckBox value="{!v.newItem.Packed__c}" Label="Packed" />
    </p><br />
   
    <ui:button label="Submit" press="{!c.PushItems}" />
   
    <aura:iteration items="{!v.items}" var="item">
   
    <p> <ui:outputText value="{!item.Name}" /> </p>
   
    <p> <ui:outputNumber value="{!item.Quantity__c}" /> </p>
   
    <p> <ui:outputCurrency value="{!item.Price__c}" />  </p>
   
    <p> <ui:outputCheckbox value="{!item.Packed__c}" /> </p>  
       
    </aura:iteration>
     

</aura:component>


CampingList Controller


({

    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"){
               
                console.log('From action variable : '+JSON.parse(JSON.stringify(response.getReturnValue())));
               
               
                component.set("v.items",JSON.parse(JSON.stringify(response.getReturnValue())));
               
            }
            else{
               
                console.log("Failed with State : " + state);
            }
           
        });
       
       
        $A.enqueueAction(action);
       
    },
   
   
   
    PushItems : function(component, event, helper) {
       
        var validItem = true;

       
        var nitem = component.get("v.newItem");
       
        var iName = component.find("name");
        var iQuantity = component.find("quantity");
        var iPrice = component.find("price");
       
        if($A.util.isEmpty(iName.get("v.value"))){
        console.log('Checking Name is null');  
            validItem = false;
            iName.set("v.errors",[{message:"Item Name cannot be blank"}]);
           
           
        }else if($A.util.isEmpty(iQuantity.get("v.value"))){
           
            validItem = false;
            iQuantity.set("v.errors",[{message:"Item Quantity cannot be blank"}]);
           
        }else if($A.util.isEmpty(iPrice.get("v.value"))){          
           
            validItem = false;
            iPrice.set("v.errors",[{message:"Item Price cannot be blank"}]);
           
        }
       
        if(validItem){
           
            var pitem = JSON.parse(JSON.stringify(nitem));
           
helper.createItem(component,pitem);
           
           
        }
       
       
}

})



CampingList Helper

({
createItem : function(component,strcamp) {

       
        var action = component.get("c.saveItem");
       
        action.setParams({
           
            "strcamp" : strcamp
           
        });
       
        action.setCallback(this,function(response){
           
            var state = response.getState();
           
            console.log('Status of the response is : ' + state);
           
            if(state === "SUCCESS"){
           
                var ilist = component.get("v.items");
               
                ilist.push(strcamp);
               
                component.set("v.items",ilist);
                                     
                component.set("v.newItem",{'sObjectType':'Camping_Item__c','Name':' ','Quantity__c':0,'Price__c':0});
                   
            }
            else{
               
                console.log('Errored Out');
               
            }
           
        });
       
        $A.enqueueAction(action);
       
       
}

})



CampingListController APEX Class


public class CampingListController{

@AuraEnabled
public static list<Camping_Item__c> getItems(){

    System.debug('Method is invoked');

    return ([select Name,Packed__c,Price__c,Quantity__c from Camping_Item__c]);

}


@AuraEnabled
public static void saveItem(Camping_Item__c strcamp){

    //Camping_Item__c ci     = (Camping_Item__c)JSON.deserialize(strcamp,Camping_Item__c.class);
   
    //System.debug('Inserted Camping Item  : ' + ci);
   
    insert strcamp;

}



}