Dynamic State Tabs

Dynamic State Tabs

This widget turns dashboard states into a tab bar. Instead of building separate navigation links or duplicating layouts, you define a list of tabs, point each one at a dashboard state, and the widget switches between them in place. It works well for grouping related views under one screen, for example Overview, Details and History for a device, or separate tabs per site, zone or asset.

How it works

Tabs can be defined two ways:

• Static list: add each tab by hand through the settings form, with its own label, icon and color.
• Dynamic list: write a JavaScript function that returns the tab array at runtime, useful when the set of tabs should depend on the entity, its attributes or telemetry.

Each tab supports its own icon, an accent color used while it’s selected, and an optional show/hide condition script, so tabs can appear or disappear based on your own logic.

Selecting a tab fires a tabChanged widget action, which you can bind to from the dashboard’s action settings. It passes along the tab’s index, label, state, icon and color, so other widgets or rule chains can react to the change.

Data keys

The widget itself does not read telemetry or attribute values for display. If you attach a datasource, its data and entity information are passed into your dynamic tab function and into each tab’s condition script, so you can build entity aware or data driven tab logic.

Configuration

Tabs

• Tab Configuration Mode: choose Static or Dynamic.
• Tabs (static mode): each entry has a label, target state, icon, color and condition script.
• Dynamic Tabs Function (dynamic mode): a JavaScript function returning an array of tab objects with the same fields.

Appearance

• Tab Style: Default, Inverted or Pill.
• Tab Alignment: Start, Center or End.
• Enable Tab Animation: toggles the tab switch animation.
• Inactive Tab Color: color used for tabs that are not selected.
• Tab Font Size: applies to both active and inactive tabs.
• Inactive and Active Tab Font Weight: set separately, so the selected tab can stand out.

Notes

• A tab’s target state has to match a state id that already exists on the dashboard. If it’s left blank or points to a state that isn’t there, that tab shows a short message asking you to finish setting it up, instead of breaking the layout.
• The widget adjusts its own layout as it’s resized, so it stays usable both as a full width panel and as a small card.