Widget Inputs

Inputs let dashboards pass values into widgets, making a single widget reusable in different contexts. For example, a widget that shows production data could accept a "Production Line" input, so the same widget works for any line.

Defining inputs

In the widget editor, open the Inputs tab:

1. Click Add Input.
2. Set the Key — a programmatic name you'll use in code (e.g., production_line).
3. Set the Type:

Type	Description
text	Free-form text input
integer	Whole number
number	Decimal number
boolean	True/false toggle
date	Date picker
datetime	Date and time picker

4. (Optional) Enable List mode to allow multiple values.

Reading inputs in widget code

Use getValue() to read the current value of an input:

const line = getValue("production_line");
const data = await getData("Production Orders");
const filtered = data.filter((row) => row.line === line);

Reacting to input changes

When a user changes an input value on a dashboard, your widget receives an inputchange event:

window.addEventListener("inputchange", async () => {
  const line = getValue("production_line");
  const data = await getData("Production Orders");
  const filtered = data.filter((row) => row.line === line);
  renderTable(filtered);
});

How inputs flow

1. You define inputs on the widget (key + type).
2. A dashboard that includes this widget exposes those inputs as controls.
3. The dashboard admin can set default values and dropdown options.
4. When a user changes an input on the dashboard, the new value is pushed to all widgets that define that key.

Inter-widget communication

Widgets on the same dashboard can communicate by using setValue():

// In Widget A — when user clicks a row
setValue("selected_order", orderId);

// In Widget B — reacts to the change
window.addEventListener("inputchange", () => {
  const orderId = getValue("selected_order");
  // Show details for the selected order
});

This lets you build interactive dashboards where clicking on one widget updates others.