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>
sObjectUtils class, utility Lightning Data Service Basics