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