dashboard:ready embed event - Omni Docs

Omni emits this event each time a dashboard loads:

When the embedded page loads on a dashboard
When the user moves to a different dashboard
When a navigate event from the parent frame arrives at a dashboard. This includes the dashboard that is already shown.

Omni doesn’t emit this event when only the filters change. As a result, you can send filters in response to this event and not cause a loop. When a dashboard loads, Omni emits dashboard:filters with the initial filters before it emits dashboard:ready.

Payload

{
  "dashboardId": "string"
}

Properties

string

The identifier of the dashboard, as shown in the dashboard URL.

Example

{
  "dashboardId": "123abc"
}

Apply filters when a dashboard loads

This example sends a filter to Omni each time a dashboard loads:

const omniOrigin = "https://example.embed-omniapp.co"

// Replace with the filters you want to apply to each dashboard
const filtersByDashboard = {
  "123abc": 'f--users.state={"values":["California"]}',
}

const listener = (event) => {
  // Only accept messages from a known origin
  if (event.origin !== omniOrigin) return
  if (event.data.name !== "dashboard:ready") return

  const filterUrlParameter = filtersByDashboard[event.data.payload.dashboardId]
  if (!filterUrlParameter) return

  document.querySelector("iframe").contentWindow.postMessage(
    {
      name: "dashboard:filter-change-by-url-parameter",
      payload: { filterUrlParameter },
    },
    omniOrigin
  )
}

// Add the listener before the iframe starts to load
window.addEventListener("message", listener)

Next steps

To learn when the embedded page can receive events, see the page:ready event
To learn how to format filters, see the dashboard:filter-change-by-url-parameter event