{"id":5715,"date":"2016-11-10T04:50:04","date_gmt":"2016-11-10T04:50:04","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5715"},"modified":"2016-11-10T04:54:50","modified_gmt":"2016-11-10T04:54:50","slug":"calling-apex-method-at-regular-interval-from-lightning-component","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/calling-apex-method-at-regular-interval-from-lightning-component\/","title":{"rendered":"Calling Apex method at regular interval from Lightning Component"},"content":{"rendered":"

Recently, I was in need of Lightning Component, which can poll Apex class at regular interval and display status of some process running in background. Initially, I thought its very easy and straight forward. Just like we do in Visualforce, use window.setInterval\u00a0<\/strong>method of Javascript and I came up with below code.<\/p>\n

RefreshContactCounter.cls<\/span><\/p>\n

\r\n\/**\r\n * @Author\t\t:\t\tJitendra Zaa\r\n * @Date\t\t:\t\tNov-09-2016\r\n * @Desc\t\t:\t\tThis class is used by LEX component - PollApexClass\r\n * \t\t\t:\t\tIt returns total number of contacts in system\r\n * *\/\r\n\r\npublic class RefreshContactCounter {\r\n    \r\n    @AuraEnabled\r\n    public static Integer getContactCount(){\r\n         AggregateResult[] groupedResults = [SELECT count(Id) totalCount FROM Contact];\r\n\t\tObject totalCount = groupedResults[0].get('totalCount');\r\n        return (Integer) totalCount ;\r\n    }\r\n\r\n}\r\n<\/pre>\n
PollApexClass.cmp<\/span><\/p>\n
 \r\n <aura:component controller="RefreshContactCounter">    \r\n    <aura:attribute type="Decimal" name="contactCount" \/>\r\n     <aura:handler name="init" value="{!this}" action="{!c.doInit}" \/> \r\n<div class="slds"> \r\n<article class="slds-card slds-card--narrow">\r\n<div class="slds-card__header slds-grid">\r\n<header class="slds-media slds-media--center slds-has-flexi-truncate">\r\n<div class="slds-media__figure">\r\n                        <c:svg xlinkHref="\/resource\/SLDS_2_0_3\/assets\/icons\/standard-sprite\/svg\/symbols.svg#contact" class="slds-icon slds-icon-standard-contact slds-icon--small" \/> \r\n                    <\/div>\r\n<div class="slds-media__body slds-truncate">\r\n\r\n<h2>\r\n                            <span class="slds-text-heading--small"> Total Contacts in system<\/span>\r\n                        <\/h2>\r\n                    <\/div>\r\n                <\/header> \r\n            <\/div>\r\n<div class="slds-card__body slds-align--absolute-center slds-text-heading--large"> {!v.contactCount }<\/div>\r\n<div class="slds-card__footer"> Refresh rate - every 5 seconds <\/div>\r\n        <\/article>        \r\n    <\/div>    \r\n<\/aura:component>\r\n<\/pre>\n
PollApexClassController.js<\/span><\/p>\n
\r\n({\r\n\tdoInit : function(component, event, helper) {\r\n\t\thelper.pollApex(component, event, helper);\r\n\t}\r\n})\r\n<\/pre>\n
PollApexClassHelper.js<\/span><\/p>\n
\r\n({\r\n    pollApex : function(component, event, helper) { \r\n        helper.callApexMethod(component,helper);\r\n        \r\n        \/\/execute callApexMethod() again after 5 sec each\r\n        window.setInterval(helper.callApexMethod(component,helper), \r\n\t\t5000,);      \r\n    },\r\n    handleResponse : function (response, component){\r\n        var retVal = response.getReturnValue() ;\r\n        component.set("v.contactCount",retVal); \r\n    },\r\n    callApexMethod : function (component,helper){    \r\n        var action = component.get("c.getContactCount");        \r\n        action.setCallback(this, function(response) {\r\n            this.handleResponse(response, component);\r\n        });\r\n        $A.enqueueAction(action); \r\n    } \r\n})\r\n<\/pre>\n
In above helper javascript file, we are using\u00a0window.setInterval()\u00a0<\/em>method of Javascript, to call Apex class at interval of 5sec.<\/p>\n
DemoApp.app<\/span><\/p>\n
\r\n<aura:application >\r\n    <ltng:require styles="\/resource\/SLDS_2_0_3\/assets\/styles\/salesforce-lightning-design-system.css" \/>\r\n \t<c:PollApexClass \/> \r\n<\/aura:application>\r\n<\/pre>\n
If we try to run above application, it doesn’t work as expected and returns below error<\/p>\n
\"Windows<\/a>
Windows.setInterval() error in Lightning Component<\/figcaption><\/figure>\n
After going through documentation, I came across this page, which hints how we can modify Lightning component’s content<\/a> outside its lifecycle.<\/p>\n
In PollApexClassHelper.js<\/span> file, we just need to change method pollApex by below code :<\/p>\n
\r\npollApex : function(component, event, helper) { \r\n        helper.callApexMethod(component,helper);\r\n        \r\n        \/\/execute callApexMethod() again after 5 sec each\r\n        window.setInterval(\r\n            $A.getCallback(function() { \r\n                helper.callApexMethod(component,helper);\r\n            }), 5000\r\n        );      \r\n    }\r\n<\/pre>\n
Demo :<\/strong><\/span><\/p>\n
\"poll<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Importance of $A.getCallback and Modifying Components Outside the Framework Lifecycle<\/p>\n","protected":false},"author":1,"featured_media":5810,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[9],"tags":[311],"class_list":["post-5715","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce","tag-lightning-component"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/11\/Calling-Apex-method-at-regular-interval-in-Lightning-Component.jpg?fit=1170%2C443&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4788,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-radar-chart-lightning-component\/","url_meta":{"origin":5715,"position":0},"title":"Salesforce Lightning Component – Radar Chart","author":"Jitendra","date":"August 29, 2015","format":false,"excerpt":"How to create Radar chart using Lightning Component in Salesforce with the help of Chart.js library","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Lightning Component for Radar Chart","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/08\/GIF-Radar-Chart.gif?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4461,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-basics-of-lightning-component\/","url_meta":{"origin":5715,"position":1},"title":"Getting started with basics of Lightning Component","author":"Jitendra","date":"May 19, 2015","format":false,"excerpt":"As you might already know\u00a0that next big change in Salesforce is introduction to lightning components. As technology is changing rapidly and to take advantage of cutting edge innovations in web technology, Salesforce doesn't want to stay behind. If we see trend, all major platform has introduced component based design like\u2026","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Getting started with Lightning component Output","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Getting-started-with-Lightning-component-Output.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":7101,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/implement-infinite-scrolling-for-lightning-data-table\/","url_meta":{"origin":5715,"position":2},"title":"Implement Infinite Scrolling for lightning-datatable","author":"Jitendra","date":"June 10, 2020","format":false,"excerpt":"When to use wire vs Imperative approach to call Apex in Lightning Web Component","rel":"","context":"In "Lightning Web Components"","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"Salesforce Lightning Datatable Infinite Scrolling","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/06\/Salesforce-Lightning-Datatable-Infinite-Scrolling-e1624579111169.png?fit=700%2C385&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4287,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/learning-lightning-component-trailhead-way\/","url_meta":{"origin":5715,"position":3},"title":"Learning Lightning Component – Trailhead way","author":"Jitendra","date":"March 19, 2015","format":false,"excerpt":"In Previous article, I\u00a0have introduced what is Trailhead and why employer should start using it to train Salesforce developers and Admins. At the time of writing this article, there are already 16 modules to be learned from it. Recently Salesforce has added some more awesome tutorial\u00a0and \u00a0In this article, I\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Learn Lightning Component Trailhead way","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/03\/Learn-Lightning-Trailhead-way-1024x576.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":7058,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/gravatar-reusable-lightning-web-component\/","url_meta":{"origin":5715,"position":4},"title":"Gravatar – Reusable Lightning Web Component","author":"Jitendra","date":"May 2, 2020","format":false,"excerpt":"Avoid asking your users to upload pictures - Use Globally Recognized Avatar , Reusable Lightning Web Component","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Gravatar - Reusable Lightning Web Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":5796,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-data-services-standard-controller-for-lightning-components\/","url_meta":{"origin":5715,"position":5},"title":"Lightning Data Service – Standard Controller for Lightning Components","author":"Jitendra","date":"July 22, 2017","format":false,"excerpt":"Best Practices for Salesforce Lightning Component. How Lightning Data Service can improve Lightning Component performance and solve inconsistent data problem without writing single line of Apex code. Demo source code, image and slides included.","rel":"","context":"In "Apex"","block_context":{"text":"Apex","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/apex\/"},"img":{"alt_text":"Salesforce Lightning Data Services","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Data-Services.png?fit=1045%2C395&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=5715"}],"version-history":[{"count":9,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5715\/revisions"}],"predecessor-version":[{"id":5822,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5715\/revisions\/5822"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/5810"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5715"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}