How to Refresh a Dashboard Programmatically Using Web Components

Last updated: July 23, 2025

When using Explo Web Components, there are two ways to refresh a dashboard programmatically:

Method 1: Using refresh-minutes Attribute

Add the refresh-minutes attribute to your web component to automatically refresh the dashboard at a specified interval:

<explo-dashboard 
  dashboard-id="your-dashboard-id" 
  refresh-minutes="5"
></explo-dashboard>

Method 2: Using Custom Events

To trigger a refresh manually through code, you can emit the updateExploDashboardVariable event:

  1. First, add an event listener to your web component:

  2. const dashboard = document.querySelector('explo-dashboard'); dashboard.addEventListener('message', (event) => { // Handle events here });

  3. Then, emit the update event when you want to refresh the dashboard:

  4. dashboard.contentWindow.postMessage({ type: 'updateExploDashboardVariable', variable: 'your-variable-name' }, '*');

The event-based method will only refresh queries tied to the specified variable, making it more efficient than a full dashboard reload.

For more details about available component attributes and events, see our Web Component documentation.