LightningPoller is a generic polling component that is available on the AppExchange. Click here to view the component on AppExchange.
This repository is for illustrating how to use that component with a couple of simple examples. Pleaes contribute more examples and/or issues.
The polling component leverages Lightning Events to drive the polling behaviour.
- Install the component from AppExchange (link will be available after the component is listed).
- Add the component to the corresponding Lightning Page (Record Page, Home, App Page or Community Page). (Note : If you do not add the Lightning Poller component to your Lightning Page, the events that start and stop polling will not be available to your other components)
- Create a Lightning Event (
type="APPLICATION"). (Sample event at https://github.com/anandbn/lightning-poller-examples/tree/master/src/aura/MyComponentEvent) with no event parameters. - Create a component that will start/stop polling and implement the business logic.
In order to start polling, you fire off a e.poller:startPolling event. This event takes two parameters:
eventToFire: This is the name of the event that you would like to have the component fire as a means to call back. Note : You will have to create this event. Make sure this event is of typeAPPLICATIONand does not have any event attrbutes.pollInterval: This is the sleep time in seconds that the polling component will wait before it fires off and event as defined by theeventToFire
<!-- c:MyComponentEvent: NO ATTRIBUTES -->
<aura:event type="__APPLICATION__" description="A component level event that will be fired by the poller" />
var startPollEvent = $A.get('e.poller:startPolling');
console.log(startPollEvent);
startPollEvent.setParams({
"eventToFire":"c:MyComponentEvent",
"pollInterval":3 //this is seconds not milliseconds
});
startPollEvent.fire();
In order to stop polling, you fire the e.poller:stopPolling event with no additional paramters. Sample code to stop the polling process is below:
var stopPollEvent = $A.get('e.poller:stopPolling');
stopPollEvent.fire();
We'll create a simple component that has a button that will start the pooling and a button to stop the polling.
<aura:component >
<aura:attribute name="eventCount" type="Integer" default="0"/>
<aura:attribute name="eventMessages" type="String[]"/>
<lightning:button label="Start polling" onclick="{!c.startPolling}" />
<lightning:button label="Stop polling" onclick="{!c.stopPolling}" /><br/>
<aura:handler event="c:MyComponentEvent" action="{!c.handleComponentEvent}"/>
<aura:iteration items="{!v.eventMessages}" var="msg">
{!msg}<br/>
</aura:iteration>
</aura:component>
Key things this component does:
- Register an event handler for the “c:MyComponentEvent” that will be fired from the poller component.
- Provide a couple of buttons and controller methods to start/stop polling.
Let's look at the controller for this component:
({
"startPolling" : function(cmp, event, helper) {
var startPollEvent = $A.get('e.poller:startPolling');
console.log(startPollEvent);
startPollEvent.setParams({
"eventToFire":"c:MyComponentEvent",
"pollInterval":3
});
startPollEvent.fire();
},
"stopPolling" : function(cmp, event, helper) {
var stopPollEvent = $A.get('e.poller:stopPolling');
stopPollEvent.fire();
},
"handleComponentEvent":function(cmp, event, helper) {
//Do your custom processing here
//e.g. invoke an apex controller, refresh another component etc.
//For example we are incrementing and updating a message array
//with the current date and time stamp
var eventCount = parseInt(cmp.get('v.eventCount'));
var eventMsgs = cmp.get('v.eventMessages');
eventMsgs.push(new Date()+': Received component event from poller');
eventCount++;
cmp.set('v.eventCount',eventCount);
cmp.set('v.eventMessages',eventMsgs);
console.log('c:MyComponentEvent was fired');
}
})
Note: poller in the above code is the namespace for my AppExchange managed component.
This component simulates a progress bar from 0 to 100%. It simply increments a counter to calculate the % value.
Component markup & controller are below:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">
<aura:attribute name="eventCount" type="Integer" default="0"/>
<lightning:button label="Start progress" onclick="{!c.startPolling}" />
<lightning:button label="Reset Progress" onclick="{!c.resetProgress}" /><br/>
<aura:handler event="c:MyComponentEvent" action="{!c.handleComponentEvent}"/>
<div class="slds-progress-bar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{!(v.eventCount * 10 )}" role="progressbar">
Progress: {!v.eventCount*10} %
<span class="slds-progress-bar__value" style="{!'width: '+ (v.eventCount * 10 )+'%;'}">
<span class="slds-assistive-text">Progress: {!v.eventCount*10}%</span>
</span>
</div>
</aura:component>
({
"startPolling" : function(cmp, event, helper) {
var startPollEvent = $A.get('e.poller:startPolling');
console.log(startPollEvent);
startPollEvent.setParams({
"eventToFire":"c:MyComponentEvent",
"pollInterval":3
});
startPollEvent.fire();
},
"resetProgress" : function(cmp, event, helper) {
cmp.set('v.eventCount',0);
},
"handleComponentEvent":function(cmp, event, helper) {
//Do your custom processing here
//e.g. invoke an apex controller, refresh another component etc.
var eventCount = parseInt(cmp.get('v.eventCount'));
eventCount++;
cmp.set('v.eventCount',eventCount);
console.log('c:MyComponentEvent was fired');
if((eventCount*10) ==100){
$A.get('e.poller:stopPolling').fire();
}
}
})