Custom dash widget for adjusting time + duration

Having an issue with my widget for adjusting time and duration on a dashboard, it seems to work in the dashboard editing section but not on the experience page where it’s hosted. Maybe I’m not passing the context variable correctly on the experience page?

Here’s my button listener to filter time, duration, and device tag:

 // apply device filter and date range
document.getElementById('reload').addEventListener('click', () => {
  // get time values
  const from = new Date(`${fromDate.value} ${fromTime.value}`).getTime()
  const time = new Date(`${toDate.value} ${toTime.value}`).getTime()
  const duration = time - from

  window.top.location.replace(`?time=${time}&duration=${duration}&ctx[deviceFilter][key]=${keySelect.value}&ctx[deviceFilter][value]=${valueSelect.value}`)
})

If someone with access could take a look at one of my projects that would be great, the 2 most recent ones have this filtering widget

If you want to PM me steps to reproduce this (an experience URL where I can reproduce this as well as user credentials if necessary), I can take a look. But off the top of my head …

  • What happens currently when you click the button? Does it redirect but to a bad page? Does nothing happen? Does it show the dashboard in its original state?
  • Any errors in your browser console?
  • Is your experience dashboard page configured correctly to pull the time, duration, and ctx variables off the URL and use those values in the dashboard renderer?

The page loads in it’s original state. It looks like after I press the button to refresh for some reason DashboardBlock.input.dashboard.duration is undefined even though it’s in the query string. I have to use the DashboardBlock variable - I don’t think I can access the outer window’s URL from the iframe. I’ll PM you the experience page

The problem is that you are not actually passing through those query parameter values for use in your dashboard page - though you are correctly passing the context variable values through. This screenshot comes from the configuration for your experience page. The Dashboard Time input has not value set, and the Duration input has an explicit value set; those instead need to reference values from your request like the context variables do.