Author Archives: Biswajeet

About Biswajeet

Biswajeet is my Name, Success is my Aim and Challenge is my Game. Risk & Riding is my Passion and Hard Work is my Occupation. Love is my Friend, Perfection is my Habit and Smartness is my Style. Smiling is my Hobby, Politeness is my Policy and Confidence is my Power.

Simple Calculator Using Salesforce Lightning Components

Calculator Component:

<!--Calculator-->
<aura:component >
    <aura:attribute name="num1" type="Integer"/>
    <aura:attribute name="num2" type="Integer"/>
    <aura:attribute name="num3" type="Integer"/><br/>
    <ui:inputNumber label="Number 1 " value="{!v.num1}"/><br/>
    <ui:inputNumber label="Number 2 " value="{!v.num2}"/><br/>
    <aura:attribute name="isAdd" type="Boolean" default="false"/>
    <aura:attribute name="isSub" type="Boolean" default="false"/>
    <aura:attribute name="isMul" type="Boolean" default="false"/>
    <aura:attribute name="isDiv" type="Boolean" default="false"/>
    <aura:attribute name="isRefresh" type="Boolean" default="false"/>
    
    <aura:if isTrue="{!v.isAdd}">
        Addition of Two Numbers is :  {!num3}
        <ui:outputNumber value="{!v.num3}"/>
    </aura:if>
    
    <aura:if isTrue="{!v.isSub}">
        Substraction of Two Numbers is :  {!num3} 
        <ui:outputNumber value="{!v.num3}"/>
    </aura:if>
    
    <aura:if isTrue="{!v.isMul}">
        multiplication of Two Numbers is :  {!num3}
        <ui:outputNumber value="{!v.num3}"/>
    </aura:if>
    
    <aura:if isTrue="{!v.isDiv}">
        Division of Two Numbers is :  {!num3}
        <ui:outputNumber value="{!v.num3}"/>
    </aura:if>
    <br/>
    <br/>
    <ui:button press="{!c.addAction}" label="Addition" />
    <aura:if isTrue="{!v.isRefresh}">
        <ui:button press="{!c.refreshAction}" label="Refresh" />
    </aura:if>
    <ui:button press="{!c.substractionAction}" label="Substraction" />    
    <ui:button press="{!c.multiplicationAction}" label="Multiplication" />    
    <ui:button press="{!c.divisionAction}" label="Division" />
    
</aura:component>

Calculator JavaScript Controller:

({
    addAction : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1+num2;
        component.set("v.num3", num3);
        component.set("v.isAdd", true);
        component.set("v.isRefresh", true);
        component.set("v.isMul", false);
        component.set("v.isSub", false);
        component.set("v.isDiv", false);
    },
    multiplicationAction : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1*num2;
        component.set("v.num3", num3);
        component.set("v.isMul", true);
        component.set("v.isRefresh", true);
        component.set("v.isDiv", false);
        component.set("v.isSub", false);
        component.set("v.isAdd", false);
    },
    substractionAction : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1-num2;
        component.set("v.num3", num3);
        component.set("v.isSub", true);
        component.set("v.isRefresh", true);
        component.set("v.isMul", false);
        component.set("v.isDiv", false);
        component.set("v.isAdd", false);
    },
    divisionAction : function(component, event, helper) {
        var num1=component.get("v.num1");
        var num2=component.get("v.num2");
        var num3=num1/num2;
        component.set("v.num3", num3);
        component.set("v.isDiv", true);
        component.set("v.isRefresh", true);
        component.set("v.isMul", false);
        component.set("v.isSub", false);
        component.set("v.isAdd", false);
    },
    
    refreshAction : function(component, event, helper) {
        component.set("v.num1", 0);
        component.set("v.num2", 0);
        component.set("v.isDiv", false);
        component.set("v.isMul", false);
        component.set("v.isSub", false);
        component.set("v.isAdd", false);
        component.set("v.isRefresh", false);
    }
})

Lightning App:

<!--TestApp-->
<aura:application extends="force:slds">
    <c:Calculator />
</aura:application>

Output:

Lightning Tab With Next And Back Buttons In Lightning Component

Component:

<!--TabComponent-->
<aura:component>
    <aura:attribute name="selTabId" type="String" default="tab1" />
    <div aura:id="data-entry">
        <lightning:tabset variant="default" selectedTabId="{!v.selTabId}" >
            <lightning:tab label="Mobile" aura:id="tab1" tabindex="1" id="tab1" title="Mobile">
                <p>Apple</p>
                <p>Samsung</p>
                <p>Lenovo</p>
            </lightning:tab>
            
            <lightning:tab label="Laptop" aura:id="tab2" tabindex="2" id="tab2" title="Laptop">
                <p>Apple</p>
                <p>Lenovo</p>
                <p>Dell</p>
            </lightning:tab>  
            
            <lightning:tab label="Tablet" aura:id="tab3" tabindex="3" id="tab3" title="Tablet">
                <p>Apple</p>
                <p>Lenovo</p>
                <p>Dell</p>
            </lightning:tab> 
        </lightning:tabset>
    </div>
    
    <div class="slds-clearfix">
        <div class="slds-float_left">
            <!--disabled the back button on first Tab-->    
            <lightning:button disabled="{!v.selTabId == 'tab1'}" variant="neutral" label="Back" onclick="{!c.back}" />
        </div>
        <div class="slds-float_right">
            <!--disabled the back button on last Tab--> 
            <lightning:button variant="brand" disabled="{!v.selTabId == 'tab3'}" label="Next" onclick="{!c.next}" />
        </div>
    </div>
</aura:component>

Component Controller:

({
    next : function(component, event, helper) {
        //Get the current selected tab value
        var currentTab = component.get("v.selTabId");
        
        if(currentTab == 'tab1'){
            component.set("v.selTabId" , 'tab2');   
        }else if(currentTab == 'tab2'){
            component.set("v.selTabId" , 'tab3');     
        }
    },
    
    back : function(component, event, helper) {
        //Get the current selected tab value  
        var currentTab = component.get("v.selTabId");
        
        if(currentTab == 'tab2'){
            component.set("v.selTabId" , 'tab1');     
        } else if(currentTab == 'tab3'){
            component.set("v.selTabId" , 'tab2');     
        }
    }
})

Output:

Get Selected Tab of Lightning Tabset

Component:

<!--TabComponent-->
<aura:component>
    <aura:attribute name="selTabId" type="String" default="tab1" />
    <div aura:id="data-entry">
        <lightning:tabset onselect="{!c.tabSelected}" variant="default" selectedTabId="{!v.selTabId}" >
            <lightning:tab label="Mobile" aura:id="tab1" tabindex="1" id="tab1" title="Mobile">
                <p>Apple</p>
                <p>Samsung</p>
                <p>Lenovo</p>
            </lightning:tab>
            
            <lightning:tab label="Laptop" aura:id="tab2" tabindex="2" id="tab2" title="Laptop">
                <p>Apple</p>
                <p>Lenovo</p>
                <p>Dell</p>
            </lightning:tab>      
        </lightning:tabset>
    </div>
</aura:component>

Component Controller:

({
    tabSelected: function(component,event,helper) {
        alert(component.get("v.selTabId"));
    }
})

Output:

Create Lightning Tabset in Component

Component:

<!--TabComponent-->
<aura:component>
    <div aura:id="data-entry">
        <lightning:tabset variant="default" selectedTabId="tab1" >
            <lightning:tab label="Mobile" aura:id="tab1" tabindex="1" id="tab1" title="Mobile">
                <p>Apple</p>
                <p>Samsung</p>
                <p>Lenovo</p>
            </lightning:tab>
            
            <lightning:tab label="Laptop" aura:id="tab2" tabindex="2" id="tab2" title="Laptop">
                <p>Apple</p>
                <p>Lenovo</p>
                <p>Dell</p>
            </lightning:tab>      
        </lightning:tabset>
    </div>
</aura:component>

Output:

Navigate From One Lightning Component to Another Lightning Component

Component1:

<!--Component1-->
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <ui:button label="Navigate to Component2" press="{!c.navigate}"/>
    {!v.body}    
</aura:component>

Component1 Controller:

({
    navigate : function(component, event, helper) {
        $A.createComponent(
            "c:Component2",
            {
                
            },
            function(newCmp){
                if (component.isValid()) {
                    var body = component.get("v.body");
                    body.push(newCmp);
                    component.set("v.body", body);
                }
            }
        );	        
    }
})

Component2:

<!--Component2-->
<aura:component>
    Component2 Successfully Loaded!
</aura:component>