Problems Due to Lack of Auto-Refresh in List View

Introduction

Salesforce Lightning components allow developers to enhance the user experience by adding utility items to the Salesforce Utility Bar. Currently, many Salesforce users are facing issues with the auto-refresh functionality of pages, particularly when working with list views. The absence of an automatic refresh forces users to manually refresh the page to view updated data, which can be time-consuming and inefficient. To overcome this problem, we have developed a simple and effective solution using an Aura component.

Common Problems Due to Lack of Auto-Refresh

1. Delayed Data Updates – Users must manually refresh list views to see the latest records, causing inefficiencies.
2. Inconsistent Data Visibility – Users working in teams might not see real-time updates made by colleagues, leading to outdated decision-making.
3. Increased Manual Effort – Repeatedly clicking the refresh button reduces productivity and increases user frustration.
4. Missed Changes – Users may overlook critical updates unless they remember to refresh the page manually.

Step 1: Creating the Aura Component

Navigate to Developer Console and create a new Lightning Component. Ensure the component implements lightning:utilityItem.

Component Code (AutoRefresh.cmp):

<aura:component implements="lightning:utilityItem"> 
  <aura:attribute name="refreshInterval" type="Integer" default="60" /> 
  <aura:attribute name="refreshing" type="Boolean" default="false" access="private" /> 
  <aura:attribute name="intervalId" type="String" access="private" /> 
  
  <!-- Needed to refresh the list --> 
  <lightning:navigationItemAPI aura:id="navigationItemAPI"/> 
  <lightning:button label="{!if(v.refreshing, 'Stop', 'Start')}" onclick="{!c.toggleAutoRefresh}"> 
  </lightning:button> 
</aura:component>

This component defines three attributes:

• refreshInterval: Sets the interval (default is 60 seconds) between refreshes.
• refreshing: Tracks if auto-refresh is enabled.
• intervalId: Stores the reference for the interval function.

The button toggles between “Start” and “Stop” based on the current state.

Step 2: Implementing the Controller

Create the AutoRefreshController.js file:

({ 
   toggleAutoRefresh: function(component, event, helper) { 
      let refreshing = component.get('v.refreshing'); 
      
      if (!refreshing) { 
         const refreshInterval = component.get('v.refreshInterval'); 
         const intervalId = window.setInterval(() => { 
            helper.refreshListView(component); 
         }, refreshInterval * 1000); 
         component.set('v.intervalId', intervalId); 
         component.set('v.refreshing', true); 
      } else { 
         const intervalId = component.get('v.intervalId'); 
         window.clearInterval(intervalId); 
         component.set('v.intervalId', null); 
         component.set('v.refreshing', false); 
      } 
   } 
})

This controller toggles auto-refresh functionality. When activated, it starts a timer that calls the helper function at the specified interval.

Step 3: Implementing the Helper

Create the AutoRefreshHelper.js file:

({ 
   refreshListView : function(component) { 
      let navigationItemAPI = component.find("navigationItemAPI"); 
      navigationItemAPI.getSelectedNavigationItem() 
         .then((response) => { 
            const objPage = 'standard__objectPage'; 
            if (response.pageReference && response.pageReference.type === objPage) { 
                navigationItemAPI.refreshNavigationItem() 
                    .catch(function(error) { 
                        console.log('Error in auto-refresh', error); 
                    }); 
            } 
        }); 
    } 
})

This function checks if the current page is an object page before triggering a refresh.

Step 4: Adding the Component to the Utility Bar

1. Navigate to Setup > App Manager.
2. Select the Lightning app where you want to add the component.
3. Click Edit and scroll to the Utility Bar section.
4. Click Add Utility Item, then search for your Aura component (AutoRefresh).
5. Set the properties such as Panel Width and Height.
6. Click Save, then refresh Salesforce.

Step 5: Testing the Component

1. Open the app where you added the utility component.
2. Click the Utility Bar icon.
3. Click Start to enable auto-refresh.
4. Navigate to a list view and observe automatic refresh behavior.
5. Click Stop to disable auto-refresh.

Conclusion

By following these steps, you successfully created and integrated an Aura utility component that automatically refreshes a list view. This component improves user efficiency by ensuring that data remains up to date without manual intervention.

Try modifying the refreshInterval value to adjust refresh timing, and explore additional enhancements to extend its functionality!