How to show a custom spinning image in Lightning Component Salesforce

The below example explain about the way of loading custom spinning or processing image in Lightning Component. 

Step 1:
Create a Apex Class with the below code snippet,

1. public class OpportunityController {
2.     @AuraEnabled
3.     public static List<Opportunity> getOpportunities() {
4.         List<Opportunity> opportunities =
5.                 [SELECT Id, Name, CloseDate FROM Opportunity LIMIT 1000];
6.         return opportunities;
7.     }
8. }

Step 2:

Create a lightning component with the below code snippet. Controller attribute in the aura:component refers the apex class.

1. <aura:component controller="OpportunityController">
2.     <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
3.     <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
4.     <aura:attribute name="opportunities" type="Opportunity[]"/>
5.     <aura:attribute name="showSpinnerImage" type="Boolean"/>
6.    
7.     <center>
8.         <ui:button label="Get Opportunities" press="{!c.getOpps}"/> <br/> <br/>
9.        
10.         <aura:renderIf isTrue="{!v.showSpinnerImage}">
11.             <img src="https://media.giphy.com/media/npCmk0VCFHyUM/giphy.gif"/>
12.             <aura:set attribute="else">
13.                 <aura:iteration var="opportunity" items="{!v.opportunities}">
14.                     <p>{!opportunity.Name} : {!opportunity.CloseDate}</p> <br/>
15.                 </aura:iteration>
16.             </aura:set>
17.         </aura:renderIf>
18.     </center>
19. </aura:component>

Custom spinning image dynamically rendered using aura:renderIf tag.

Step 3:

Double click on CONTROLLER from the side bar in lightning component editor and paste the below java script snippet.

1. ({
2.     showSpinner : function (component, event, helper) {
3.         component.set("v.showSpinnerImage", true);
4.     },
5.     hideSpinner : function (component, event, helper) {
6.         component.set("v.showSpinnerImage", false);    
7.     },
8.     getOpps: function(cmp){
9.         var action = cmp.get("c.getOpportunities");
10.         action.setCallback(this, function(response){
11.             var state = response.getState();
12.             if (state == "SUCCESS") {
13.                 cmp.set("v.opportunities", response.getReturnValue());
14.             }
15.         });
16.         $A.enqueueAction(action);
17.     }
18. })

Output:

Toogle the spinner or processing symbol in Lightning Component Salesforce

The below example explain about the way of Loading spinner or processing symbol in Lightning Component.

This can be done by using ui:spinner tag. Here is the sample code,

Step 1:
Create a Apex Class with the below code snippet,

1. public class OpportunityController {
2.     @AuraEnabled
3.     public static List<Opportunity> getOpportunities() {
4.         List<Opportunity> opportunities =
5.                 [SELECT Id, Name, CloseDate FROM Opportunity LIMIT 1000];
6.         return opportunities;
7.     }
8. }

Step 2:

Create a lightning component with the below code snippet. Controller attribute in the aura:component refers the apex class.

1. <aura:component controller="OpportunityController">
2.     <aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
3.     <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
4.    
5.     <aura:attribute name="opportunities" type="Opportunity[]"/>
6.     <center>
7.         <ui:button label="Get Opportunities" press="{!c.getOpps}"/> <br/> <br/>
8.         <ui:spinner aura:id="spinner" />
9.        
10.         <aura:If isTrue="{!v.opportunities.length > 0}">
11.             <SPAN>
12.                 <aura:iteration var="opportunity" items="{!v.opportunities}">
13.                     <p>{!opportunity.Name} : {!opportunity.CloseDate}</p> <br/>
14.                 </aura:iteration>
15.             </SPAN>
16.         </aura:If>
17.     </center>
18. </aura:component>

1. Used aura handler with event aura:waiting and aura:doneWaiting to handle spinning process.

2. ui:spinner tag indicates the processing or spinner symbol.

Step 3:

Double click on CONTROLLER from the side bar in lightning component editor and paste the below java script snippet.

1. ({
2.    
3.     showSpinner : function (component, event, helper) {
4.         var spinner = component.find('spinner');
5.         var evt = spinner.get("e.toggle");
6.         evt.setParams({ isVisible : true });
7.         evt.fire();    
8.     },
9.     hideSpinner : function (component, event, helper) {
10.         var spinner = component.find('spinner');
11.         var evt = spinner.get("e.toggle");
12.         evt.setParams({ isVisible : false });
13.         evt.fire();    
14.     },
15.     getOpps: function(cmp){
16.         var action = cmp.get("c.getOpportunities");
17.         action.setCallback(this, function(response){
18.             var state = response.getState();
19.             if (state == "SUCCESS") {
20.                 cmp.set("v.opportunities", response.getReturnValue());
21.             }
22.         });
23.         $A.enqueueAction(action);
24.     }
25. })

Note:

1. To toggle the spinner, use get("e.toggle"), set the isVisible parameter to true or false, and then fire the event.

2. The above example shows a spinner when a component is expecting a server response.

Output:

Reference:

ui:spinner

Lightning Component Client and Server Interaction Example in Salesforce

This article will explain about the Client(Javascript) and Server(Apex) side communication. The below example will retrieve opportunity records from the server and displayed the values on Lightning app using aura:iteration tag.

Apex Code:

1. public class OpportunityController {
2.     @AuraEnabled
3.     public static List<Opportunity> getOpportunities() {
4.         List<Opportunity> opportunities =
5.                 [SELECT Id, Name, CloseDate FROM Opportunity];
6.         return opportunities;
7.     }
8. }

Note: 

• @AuraEnabled annotation used to access the variable/method names in Lightning Component.
• Methods must be static and marked public or global. Non-static methods are not supported.
• If a method returns an object, instance methods that retrieve the value of the object’s instance field must be public.

Lightning Component Code:

1. Create a lightning component with the below code snippet. Controller attribute in the aura:component refers the apex class.

1. <aura:component controller="OpportunityController">
2.     <ui:button label="Get Opportunities" press="{!c.getOpps}"/> <br/>
3.     <aura:iteration var="opportunity" items="{!v.opportunities}">
4.         <p>{!opportunity.Name} : {!opportunity.CloseDate}</p> <br/>
5.     </aura:iteration>
6. </aura:component>

Note:

a. This component contain Button labeled as "Get Opportunities". Once if you click this button, it will call a "getOpps" javascript controller.

b. aura:iteration used to iterate the returned array list.

2. Double click on CONTROLLER from the side bar in lightning component editor and paste the below java script snippet.

1. ({
2.     getOpps: function(cmp){
3.         var action = cmp.get("c.getOpportunities");
4.         action.setCallback(this, function(response){
5.             var state = response.getState();
6.             if (state == "SUCCESS") {
7.                 cmp.set("v.opportunities", response.getReturnValue());
8.             }
9.         });
10.         $A.enqueueAction(action);
11.     }
12. })

Note:

a. This  javascript calls "getOpportunities" method from "OpportunityController" and returned a list of opportunity records.

b. Returned values assigned to the "v.opportunities" variable. This list iterated using aura:iteration tag.

Add or Embed a Lightning Component in a Visualforce Page Salesforce

In this post, I am going to explain, how to refer a Lightning Component in Visualforce. 

Let consider, You have created a Lightning component using aura:component tag and want to add/embed this in visualforce page. The below example will help you to achieve this scenario.

Step 1:
I am using the below sample Lighting Component for demo purpose.

http://salesforcekings.blogspot.in/2015/11/lightning-component-styles-and-usage.html

Step 2:

Create a Lighting application named as "SampleLightningApp" with the below code snippet,

1. <aura:application extends="ltng:outApp">
2.     <aura:dependency resource="c:*" type="COMPONENT"/>
3. </aura:application>

IMPORTANT:
1. You need to extend a app with "ltng:outApp" in order to access in visualforce page.
2. aura:dependency should be included on the app with resource attribute. This will give an access to a components. 
3. In the above app, aura:dependency tag declared with resource attribute and "c" is default namespace and "*" matches everything in the namespace.
4. You can also declare "TYPE" attribute with the value of (COMPONENT, APPLICATION and EVENT) in dependency tag. Default value is COMPONENT.

Step 3:
Create a visualforce page with the below code snippet,

1. <apex:page showHeader="false" sidebar="false">
2.  <!-- This loads the JavaScript file needed to use Lightning Components for Visualforce-->
3.     <apex:includeLightning />
4. 
   
5.     <!-- div tag act as locator while calling Lightning.createComponent -->
6.     <div id="lightning" />
7.  
8.     <script>
9.  
10.         $Lightning.use("c:SampleLightningApp", function() {
11.           $Lightning.createComponent("c:StyleComponentWithImage",
12.           "",
13.           "lightning",
14.           function(cmp) {
15.             // do some stuff
16.           });
17.         });
18.  
19.     </script>
20. </apex:page>

IMPORTANT:
1. Added <apex:includeLightning /> at the beginning of your page. This loads the JavaScript file needed to use Lightning Components for Visualforce.

2. To use Lightning Components for Visualforce, you need to reference a Lightning app. It can be reference with $Lightning.use.

3. In the above code, "c:SampleLightningApp" is the lightning app name. "C" denotes the default namespace.

4. To refer or create a new lighting component from visualforce page, Use $Lightning.createComponent. Here is the Syntax ,

$Lightning.createComponent(String type, Object attributes, String locator, function callback).

5. "c:StyleComponentWithImage" refers the existing Lightning component page. 

6. Lightning component contents are now embedded with Visualforce page. Save and run the vf page as usual.

References:

Add Lightning Components to Visualforce Pages

aura:dependency