Custom JS Events

​

Web Component

Explo uses the CustomEvent spec to fire our own events when certain things happen in the app that you might want to respond to in your app.

​

How do I interact with Custom JS events?

You should be able to add an event listener in your app to respond to any of the available events listed on this page.

const listener = (e) => {
  console.log(e.detail);
};

elem.addEventListener("EVENT_NAME", listener);

Just make sure you clean up the event listener when you’re done with it.

elem.removeEventListener(listener);

​

Iframe

For Iframes, Explo uses the PostMessage spec to fire the events

​

How do I interact with Custom JS events?

You should be able to add an event listener in your app to respond to any of the available events listed on this page.

const messageListener = (e) => {
  // Check origin of message before reading
  if (e.origin != "https://app.explo.co") return;
  switch (e.data.event) {
    case "sendVariableUpdatedEvent":
      console.log(e.data.detail);
      break;
  }
};

window.addEventListener("message", messageListener);

Just make sure you clean up the event listener when you’re done with it.

window.removeEventListener(messageListener);

​

Available Events

sendVariableUpdatedEvent

• Fires when a new value is selected for a variable from a dashboard Element.
• Returns { detail: { varName: string, newValue: any } }

dashboardReadyToLoad

• Fires when dashboard information has been loaded and the dashboard itself is ready to render and to start loading data

dashboardLoaded

• Fires when all initial data for a dashboard has been loaded