Skip to Content

TheBlogReaders.com

Salesforce.com, PHP, MySQL, Javascript, Ajax, Htacces

Simple Addition, Subtraction Calculation Using Salesforce Lightning Components

Be First!
by March 28, 2018 Lightning, SALESFORCE

Simple Addition, Subtraction Calculation Using Salesforce Lightning Components

To simple calculation using Lightning Components.

 

Calculate two number values using lighting components.

Components:

  1. Create 3 attribute with the type as integer (2 for input values, 1 for to store the total values)
  2. Create Lightning:input field to collect the user input
  3. Create the buttons

Create Component – myCalc.cmp

<aura:component implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction” access=”global”>
<aura:attribute name=”num1″ type=”integer” />
<aura:attribute name=”num2″ type=”integer” />
<aura:attribute name=”total” type=”integer” />

<aura:attribute name=”isAdd” type=”boolean” default=”false” />
<aura:attribute name=”isSub” type=”boolean” default=”false” />
<aura:attribute name=”isMul” type=”boolean” default=”false” />

<lightning:input name=”input1″ label=”Enter First Number” value=”{!v.num1}” />
<lightning:input name=”input2″ label=”Enter Second Number” value=”{!v.num2}” />
<br/>
<lightning:buttonGroup>
<lightning:button label=”Addition” onclick=”{!c.Add}” />
<lightning:button label=”Subtract” onclick=”{!c.Sub}” />
<lightning:button label=”Multiple” onclick=”{!c.Mul}” />
<lightning:button label=”Clear” onclick=”{!c.Clear}” />
</lightning:buttonGroup>

<br/>

<aura:if isTrue=”{!v.isAdd}”>
Addition of Two Numbers = {!v.total}
</aura:if>
<aura:if isTrue=”{!v.isSub}”>
Subtraction of Two Numbers = {!v.total}
</aura:if>
<aura:if isTrue=”{!v.isMul}”>
Multiplication of Two Numbers = {!v.total}
</aura:if>
</aura:component>

Controller:

  1. using component.get to fetch the value form component to controller
  2. using component.set to assign the calculated values

Create Controller – myCalcController.js

({
Add : function(component, event, helper) {
var a = component.get(“v.num1”);
var b = component.get(“v.num2”);
var total = parseInt(a) + parseInt(b);
component.set(“v.total”,total);
component.set(“v.isAdd”,true);
component.set(“v.isSub”,false);
component.set(“v.isMul”,false);
},
Sub : function(component, event, helper) {
var a = component.get(“v.num1”);
var b = component.get(“v.num2”);
var total = parseInt(a) – parseInt(b);
component.set(“v.total”,total);
component.set(“v.isAdd”,false);
component.set(“v.isSub”,true);
component.set(“v.isMul”,false);
},
Mul : function(component, event, helper) {
var a = component.get(“v.num1”);
var b = component.get(“v.num2”);
var total = parseInt(a) * parseInt(b);
component.set(“v.total”,total);
component.set(“v.isAdd”,false);
component.set(“v.isSub”,false);
component.set(“v.isMul”,true);
},
Clear : function(component, event, helper) {
component.set(“v.total”,0);
component.set(“v.num1”,0);
component.set(“v.num2”,0);
component.set(“v.isAdd”,false);
component.set(“v.isSub”,false);
component.set(“v.isMul”,false);
}
})

 

Create Lightning Application – myCalc.app

<aura:application extends=”force:slds” >
<c:myCalc/>
</aura:application>

 

Output:

(3)

Previous
Next

Leave a Reply