Auto Refresh Interactive Graphs (Relationship Graph Definition) with the Actionable Relationship Center (ARC) in Salesforce Public Sector Solutions

Recently, something came to my attention that left me scratching my head for a while regarding the ARC (Actionable Relationship Center) in Public Sector Solutions. The ARC was not synchronizing with backend changes so, end user’s need to manually refresh it, and this was causing quite a bit of frustration. Although some developers tried several proofs of concepts (POCs) to solve it, nothing seemed to work. So, I have to look at this from a different perspective.

Here’s what I found, and how I came up with a solution to fix the issue.

The Problem Statement:

The Actionable Relationship Center (ARC) is an incredibly useful tool for visualizing relationships among customers, businesses, and other entities through an interactive graph. It allows users to see relationships between people, build graphs from standard and custom objects, and then interact with those graphs. So, what is the problem?

You know how it goes when you try to click on something in ARC, and you expect it to reflect the latest data right away? Well, that’s exactly where the problem lies. Even though ARC would trigger the action, it didn’t fetch the latest changes because of some backend asynchronous tasks. Sounds like a timing issue, right? That’s exactly what it was. In fact, it would take about 10 seconds for the background tasks to complete, but ARC would already have rendered in the page. Refreshing to see updates after interacting with the graph is frustrating for users because they don't know when all those background tasks will finish, leaving behind stale data.

A New Perspective:

When this issue was first brought to my attention, I could see why the previous attempts to fix it didn’t work. Developers were trying to tackle it from the same angle, attempting solutions that seemed reasonable but missed the mark. Instead of continuing to approach the issue from the same direction, I decided to take a step back and look at the problem with a new perspective.

The Solution:

After diving deeper into the issue, I came up with a solution that addresses the root cause. Instead of trying to refresh the page immediately after an action, I realized that doesn't help as it takes the user back to the default landing page, so the user has to go back to the relevant ARC graph which is in another tab. Even if end users managed to navigate there before the backend tasks finish, they still see the view with stale data.

My first instinct was to try and interact with the Document Object Model (DOM) to force a refresh on the ARC graph. Initially, I tried using JavaScript methods like getElementById and getElementsByClassName to find the refresh button within the DOM and trigger a click but in this case, they didn’t quite do the trick because the Id of the button changes every time the page is refreshed, and the classes are nested deep within other components. I went ahead and explored a few other JavaScript methods that could help with interacting with the button, such as querySelector and querySelectorAll. These methods are great for finding elements, but still, I wasn’t getting the results I needed. At that point, I was starting to feel a bit stuck. The button was there, but it was hard to interact with it dynamically and consistently, especially given the complex structure of ARC in Public Sector Solutions.

Just when I thought I had hit a wall, something clicked. Instead of sticking with the traditional JavaScript methods I had been using, I decided to look at the problem from a more advanced angle by using XPath. For those of you unfamiliar, XPath is a powerful query language used to select nodes from an XML document, and it turned out to be the perfect tool for this job.

XPath Syntax:

An XPath contains the path of the element situated on the web page.

The standard syntax for XPath is: XPath=//tagname[@Attribute=’Value’]

• //: Select current node.
• Tagname: Tagname of the particular node.
• @: Select attribute.
• Attribute: Attribute name of the node.
• Value: Value of the attribute.

I realized that ARC’s DOM structure could be more easily navigated using XPath, especially since it allowed for more precise, flexible targeting of elements like buttons. So, I wrote an XPath query to locate the refresh button within the DOM based on its attributes and structure. Once I had the XPath set up, I could select the button more consistently. I also set an interval to trigger the refresh action that allows the required data to be fetched and synchronized in real time and I'll add another logic at a later stage based on the requirements to control the endless time loop. This ensures that the graph is automatically updated with the latest and most accurate data, providing users with a seamless experience instead of asking them to keep refreshing the graph until the background tasks are done.

Here is how I did it:

Aura:

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

</aura:component>

({

doInit : function(component, event, helper) {

window.setInterval(function() {

helper.refreshARC (component);

}, 10000); //Setting an interval to refresh every 10sec

}

})

//Function to click the refresh button

({

refreshARC: function(component) {

const conXpath = "//div[contains(@class, 'fix_button-group-flexbox')]//slot//lightning-button-icon//button[@title='Refresh Graph']";

const conRefreshBtn = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

if (conRefreshBtn) {

conRefreshBtn.click();

}

})

LWC:

import { LightningElement } from 'lwc';

export default class AutoRefreshTabLWC extends LightningElement {

intervalId;

connectedCallback() {

//Setting an interval to refresh every 10sec

this.intervalId = window.setInterval(() => {

this.refreshARC();

}, 10000);

}

disconnectedCallback() {

clearInterval(this.intervalId);

}

//Function to click the refresh button

refreshARC() {

const conXpath = "//div[contains(@class, 'fix_button-group-flexbox')]//slot//lightning-button-icon//button[@title='Refresh Graph']";

const conRefreshBtn = document.evaluate(conXpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

if (conRefreshBtn) {

conRefreshBtn.click();

}

}

}

************Refresh Graph is the name/title of the button in ARC graph************

Why XPath Worked When Other Methods Did Not:

What made XPath such a great choice here was its precision. While methods like querySelector and querySelectorAll are useful for simple queries, they sometimes struggle when the DOM is complex, as is the case with ARC. XPath, however, allowed me to precisely target elements based on their structure and attributes, even if they were nested deep within other components. Additionally, XPath's ability to handle dynamic content like the Refresh Button in the shadow DOM, allows me to reliably locate and click the button without worrying about rendering elements asynchronously. I leveraged XPath’s ability to interact with the DOM in a more precise and reliable way. The solution was simple yet effective.

Conclusion:

It wasn’t easy, but after taking a step back and rethinking the whole situation, I was able to come up with a solution that works. ARC can now auto refresh without missing a beat, and I’m sure this will save a lot of headaches down the road. Sometimes, when something doesn’t work, it’s all about looking at it from a new perspective. By understanding the root cause and giving the system the time it needs to do its job, we can build a more reliable and efficient solution. The lesson here is that sometimes, when you run into roadblocks, it helps to think outside the box. I spent some time experimenting with different options, and eventually, I realized XPath was the key. I’m hoping this solution helps others who might be facing similar challenges. If you’re working with ARC or any component that involves asynchronous tasks, maybe give this approach a try and see how it works for you!

Extra (25-Apr-2025): I was recently testing some AI tools and used ChatGPT to analyze one of my blog posts, guess what, here’s the outcome I received from it.