Another Salesforce blog!!!

Salesforce, Apex

Lightning Components Basics


LINK HERE: Lightning Components Basics

Let’s create component named “Camping”

<aura:component controller="CampingListController">
    <!-- https://trailhead.salesforce.com/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_events -->   
    
    <!-- the Apex server side controller -->
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    
    <c:campingHeader />
    <c:campingList items="{!v.items}"/>
    
</aura:component>

Let’s create component named “campingList”

<aura:component controller="CampingListController">   
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:handler name="addItem" event="c:addItemEvent"
                  action="{!c.handleAddItem}"/>
    <!-- use same type of event -->
    <aura:handler name="updateItem" event="c:addItemEvent"
                  action="{!c.handleUpdateItem}"/>
    
    
    <!-- FORM AREA -->
    <div aria-labelledby="newitemform">
        <fieldset class="slds-box slds-theme--default slds-container--small">
            <c:campingListForm />
        </fieldset>
    </div>
    <!-- / FORM AREA -->   
    
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    
    <!-- / LIST AREA -->  
    <div class ="slds-card slds-p-top--medium">
        <header class ="slds-card__header">
            <h3 class = "slds-text-heading--small">Existing Camping List 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>
    
</aura:component>

–campingListController:

({           
    // Load camping items from Salesforce
    doInit: function(component, event, helper) {
        
        console.log("call c.getItems: ");
        // Create the action
        var action = component.get("c.getItems");
        console.log("back from 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);
    }, //doInit
    
    handleAddItem: function(component, event, helper) {
        var newItem = event.getParam("item");
        helper.addItem(component, newItem);
        /*             
        var action = component.get("c.saveItem");
        action.setParams({
            "item": newItem
        });
       
        action.setCallback(this, function(response){
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {       
                var items = component.get("v.items");
                items.push(item);
                component.set("v.items",items);
            }
        });
        $A.enqueueAction(action);
        */
    },
    
    handleUpdateItem: function(component, event, helper) {
        var updatedItem = event.getParam("item");
        helper.updateItem(component, updatedItem);
    }
    
})

–campingListHelper:

({
              
   addItem: function(component, campItem) {
       
        /* old version
        var action = component.get("c.addItem");
        action.setParams({ "campItem": item });
        action.setCallback(this, 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);
            }
        });
        $A.enqueueAction(action);
        */
      
       this.saveItem(component, campItem, function(response){
       var state = response.getState();
           if (component.isValid() && state === "SUCCESS") {
               var expenses = component.get("v.items");
               expenses.push(response.getReturnValue());
               component.set("v.items", items);
           }
       });
 
      
       
    },//addItem
   
    //server side action defined in CampingListController
    updateItem: function(component, item) {
        this.saveItem(component, item);
    },
 
    saveItem: function(component, expense, callback) {
        var action = component.get("c.saveItem");
        action.setParams({
            "item": item
        });
        if (callback) {
            action.setCallback(this, callback);
        }
        $A.enqueueAction(action);
    },//saveItem
 
   
 
    validateCampingItem: function(component, item) {
       
         // Simplistic error checking
        var validItem = true;
        console.log("validate item");
 
 
          // Name must not be blank
        var nameField = component.find("campItemName");
        var itemname = nameField.get("v.value");
        console.log("itemname="+itemname);
        if ($A.util.isEmpty(itemname)){
            validItem = false;
            nameField.set("v.errors", [{message:"Item name can't be blank."}]);
        }
        else {
            console.log("good name "+itemname);
            nameField.set("v.errors", null);
        }
 
 
                              // Price must not be blank
        var priceField = component.find("price");
        var itemprice = priceField.get("v.value");
        console.log("itemprice="+itemprice);
       
        if (isNaN(itemprice)){
            validItem = false;
            priceField.set("v.errors", [{message:"Item price can't be null."}]);
        }
        else {
            priceField.set("v.errors", null);
        }
        if ($A.util.isEmpty(itemprice)){
            validItem = false;
            priceField.set("v.errors", [{message:"Item price can't be null."}]);
        }
        else {
            priceField.set("v.errors", null);
        }
       
        if (itemprice<0.01){
            validItem = false;
            priceField.set("v.errors", [{message:"Item price can't be zero."}]);
        }
        else {
            priceField.set("v.errors", null);
        }
 
 
        // Quantity must not be blank
        var qtyField = component.find("quantity");
        var itemqty = qtyField.get("v.value");
        console.log("itemqty ="+itemqty);
       
        console.log("now check empty"+qtyField);
        if (isNaN(itemqty)){
            console.log("bad qty ="+itemqty);
            validItem = false;
            qtyField.set("v.errors", [{message:"Item quantity can't be null."}]);
        }
        else {
            console.log("good");
            qtyField.set("v.errors", null);
        }
        if ($A.util.isEmpty(itemqty)){
            console.log("bad qty ="+itemqty);
            validItem = false;
            qtyField.set("v.errors", [{message:"Item quantity can't be null."}]);
        }
        else {
            console.log("good");
            qtyField.set("v.errors", null);
        }
        if (itemqty<1){
            console.log("bad qty <1 ="+itemqty);
            validItem = false;
            qtyField.set("v.errors", [{message:"Enter an Item quantity."}]);
        }
        else {
            console.log("good");
            qtyField.set("v.errors", null);
        }
       
     
        return(validItem);
       
    } //validateCampingItem
})

Let’s create component named “campingListForm”

<aura:component >
    
    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{'sobjectType' : 'Camping_Item__c',
                             'Name':'',
                             'Quantity__c' : '',
                             'Price__c' : ''}"/>
    
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    
    <!-- CREATE NEW CAMPING ITEM FORM -->
    <fieldset class="slds-box slds-theme--default slds-container--small">
        <legend id="newitemform" class="slds-text-heading--small
                                        slds-p-vertical--medium">
            Add a Camping Item
        </legend>
        
        
        <form class="slds-form--stacked">
            
            <div class="slds-form-element slds-is-required">
                <div class="slds-form-element__control">
                    <lightning:input aura:id="campItemName" label="Camping Item Name"
                                     class="slds-input"
                                     
                                     value="{!v.newItem.Name}"
                                     required="true"/>
                </div>
            </div>
            
            <div class="slds-form-element slds-is-required">
                <div class="slds-form-element__control">
                    <lightning:input aura:id="quantity" label="Quantity"
                                     class="slds-input" type="number" min="1"
                                     
                                     value="{!v.newItem.Quantity__c}"
                                     required="true"/>
                    
                </div>
            </div>
            
            <div class="slds-form-element">
                <div class="slds-form-element__control">
                    <lightning:input aura:id="price" label="Price"
                                     class="slds-input" type="number" formatter="currency"
                                     step="0.01"
                                     
                                     value="{!v.newItem.Price__c}"/>
                </div>
            </div>
            
            <div class="slds-form-element">
                
                <lightning:input type="checkbox" aura:id="campingform" label="Packed ?"  
                                 name="campingPacked"
                                 checked="{!v.newItem.Packed__c}"/>
                
                
                
            </div>
            
            <div class="slds-form-element">
                <lightning:button label="Create Camping Item" onclick="{!c.clickcreateitem}"/>
            </div>
            
        </form>
    </fieldset>
    <!-- / CREATE NEW CAMPING ITEM FORM -->
    
</aura:component>

–campingListformController:

({
    handleAddItem: function(component, event, helper) {
        var newItem = event.getParam("item");
        helper.addItem(component, newItem);
    },
 
    clickcreateitem: function(component, event, helper) {
        console.log('submit if valid');
        var nameField = component.find("campItemName");
        console.log('nameField='+nameField+'<<<');
        var itemname = nameField.get("v.value");
        console.log('itemname='+itemname+'<<<');
        console.log('submit if valid...');
       
        if(helper.validateCampingListForm(component)){
            console.log('valid so add');
            // Add the new item
            //var newItem = component.get("v.newItem"); //created in helper
            //helper.addItem(component, newItem);
            helper.createItem(component);
        }
    },
 
})

–campingListFormHelper:

({
    validateCampingListForm: function(component) {
        var validItem = true;
        // Name must not be blank (aura id)
        var nameField = component.find("campItemName");
        console.log('nameField='+nameField+'<<<');
        var itemname = nameField.get("v.value");
        console.log('itemname='+itemname+'<<<');
        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 be set, must be a positive number
        var amtField = component.find("quantity");
        console.log('qtyField='+amtField+'<<<');
        var amt = amtField.get("v.value");
        console.log('quantity='+amt+'<<<');
        if ($A.util.isEmpty(amt) || isNaN(amt) || (amt <= 0.0)){
            validItem = false;
            amtField.set("v.errors", [{message:"Enter an item quantity."}]);
        }
        else {
            // If the quantity looks good, unset any errors...
            amtField.set("v.errors", null);
        }
       
        //also do price
        //Price must be set, must be a positive number
        amtField = component.find("price");
        console.log('priceField='+amtField+'<<<');
        amt = amtField.get("v.value");
        console.log('price='+amt+'<<<');
        if ($A.util.isEmpty(amt) || isNaN(amt) || (amt <= 0.0)){
            validItem = false;
            amtField.set("v.errors", [{message:"Enter an item price."}]);
        }
        else {
            // If the price looks good, unset any errors...
            amtField.set("v.errors", null);
        }
        console.log('validItem='+validItem+'<<<');
        return(validItem);
       
    },//validateCampingListForm
   
    createItem: function(component, newItem) {
          
        console.log('in addItem');
        var newItem = component.get("v.newItem");
        var addEvent = component.getEvent("addItem");
        addEvent.setParams({"item" : newItem});
        addEvent.fire();
 
       
        //component.set("v.newItem", default);
        component.set("v.newItem",{'sobjectType':'Camping_Item__c',
                'Name': '',
                'Quantity__c': 0,
                'Price__c': 0,
                'Packed__c': false});
    },//addItem
})

Let’s create component named “campingHeader”

<aura:component >          
    <!-- PAGE HEADER -->
    <div class="slds-page-header" role="banner">
      <div class="slds-grid">
        <div class="slds-col">
          <p class="slds-text-heading--label">Camping Items</p>
          <h1 class="slds-text-heading--medium">My Camping Items</h1>
        </div>
      </div>
    </div>
    <!-- / PAGE HEADER -->
 
</aura:component>

–campingHeader class:

.THIS {
}

h1.THIS {
    font-size: 18px;
}

Let’s create component named “campingListItem”

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c"/>
    
    <!-- use same event type or package format 'structure' to add or update -->
    <aura:registerEvent name="updateItem" type="c:addItemEvent"/>
    <!-- this component can send/fire events -->
    <!-- campingList receives and handles it -->
    
    <!-- SLDS markup to give style -->
    <div class="slds-card">
        
        <!-- Color the item green if the expense is reimbursed -->
        <div class="{!v.item.Packed__c == true ?
                    'slds-theme--success' : 'slds-theme--warning'}">
            
            <header class="slds-card__header slds-grid grid--flex-spread">
                <a aura:id="item" href="{!'/' + v.item.Id}">
                    <h3>{!v.item.Name}</h3>
                </a>
            </header>
            
            <section class="slds-card__body">
                <div class="slds-tile slds-hint-parent"> 
                    
                    <!--<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}"/>-->
                        <ui:inputCheckbox value="{!v.item.Packed__c}"
                                          click="{!c.clickPacked}"/>
                    </p>
                    
                    <!-- SLDS markup to give style -->                  
                </div>
            </section>
        </div>
    </div> 
</aura:component>

–campingListItem Controller:

({  
    clickPacked: function(component, event, helper) {
        var campingItem = component.get("v.item");
        var updateEvent = component.getEvent("updateItem");
        updateEvent.setParams({ "item": campingItem });
        updateEvent.fire();
    } 
})

Let’s create component named “addItemEvent”

<aura:event type="COMPONENT">
    <aura:attribute name="item" type="Camping_Item__c"/>
</aura:event>

Let’s create application named ‘Application”

<aura:application extends="force:slds" implements="force:hasRecordID">
<c:camping />
</aura:application>

Leave a Reply

Your email address will not be published. Required fields are marked *

*