How to Show & Hide Lightning Spinner in Salesforce

How to Show & Hide Lightning Spinner in Salesforce

salesforcepoint → Wednesday, 18 April 2018

Spinner is component loading indicator that should be shown when retrieving data or performing slow computations or server operations. Spinner needs to be stop displaying after operations.


 we can get spinners in two ways.

1. with standard events like aura:waiting & aura:doneWaiting : We can use this when spinner needs to be shown when all server operations means calling apex classes and receiving response.

 2. With custom events: We use this type when we need to show spinner when event occurs only like 'I need to show Spinner when user clicks on Save button'. For this we need to to define on Boolean attribute to rendering spinner.

Show & Hide Lightning Spinner Example:

Spinner.cmp

<aura:component >
    <aura:attribute name="showSpinner" type="Boolean"/>
    <lightning:button variant="brand" label="cancel" onclick="{!c.cancel }" />
    <lightning:button variant="brand" label="Show Spinner" onclick="{!c.Show}" />
    <aura:if isTrue="{!v.showSpinner}">
        <div class="demo-only" >
            <div role="status" class="slds-spinner slds-spinner_large slds-spinner_brand">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>
    </aura:if>
</aura:component>

SpinnerController.js

({
Show : function(component, event, helper) {
  component.set("v.showSpinner",true);
  },
cancel : function(component, event, helper) {
   component.set("v.showSpinner", false);
   }
}) 

OutPut:

How to pass parameters from Lightning component to Controller.js(client side controller) with example

How to pass parameters from Lightning component to Controller.js(client side controller) with example

salesforcepoint → Monday, 19 February 2018

Lightning Tutorials Basics: Passing parameters from Lightning component to Controller.js(client side controller) and controller to Lightning component:


In this tutorial we are going to learn how to pass parameters from Lightning component to controller vice versa.

By using component.get(v.attrinuteName) or  component.find("aura:id").get("v.value") we can pass value from component to controller.
By using component.set("v.attrinuteName",value);  we can pass value from controller to lightning component.

In below code  empName attribute used to store the data which is entered by user in ui:inputText.
when user click on button "callme" function gets called and the value entered in inputText box will be passed to the attribute "empName" and the result will be printed.

<aura:component >
    <aura:attribute name="empName" type="String"/>
    <aura:attribute name="emp" type="String"/>
    <ui:inputText label="Enter Name"  aura:id="name" />
    <ui:button label="submit" press="{!c.callme}" /> <br />
    Employee Name Entered:  <ui:outputText value="{!v.empName}" />
</aura:component>

FirstComponent.js

({
    callme : function(component, event, helper) {
    var Name = component.find("name").get("v.value");
    component.set("v.empName",Name )
    }
})

Check Output
FitstComponentApp.app

<aura:application >
    <c:FirstComponent />
</aura:application>

when user entered something in input box and click on submit button "callme" function gets called and the value entered in inputText box will be passed to the attribute "empName" and the result will be printed as output below...