Dynamic State Tabs

Who it’s for

Dashboard authors grouping several related views under one screen ask “how do I show Overview, Details, and History for one device as tabs, without wiring up separate navigation for each?” They want one tab bar that switches between existing dashboard states in place, instead of duplicating layouts or building custom navigation links per screen.

What it does

Three tabs — Overview, Details, and History — each point at a dashboard state (overview, details, history). Selecting History switches the panel in place and fires a tabChanged action carrying that tab’s label and state, without navigating away from the rest of the dashboard.

• Static or scripted tab lists — type in a fixed set of tabs, or write a function that builds the array from the entity, its attributes, or telemetry.
• Per-tab icon, color, and show/hide condition, so tabs can appear, disappear, or change color independently of each other.
• Fires a tabChanged widget action on every switch, carrying the tab’s index, label, state, icon, and color, so another widget or a rule chain can react.
• Three tab styles and three alignments — Default, Inverted, or Pill, aligned to the start, center, or end of the bar.
• A tab with a missing or blank target state shows a short setup message inside that tab instead of breaking the layout.
• Only switches between existing dashboard states; it doesn’t create states, and it doesn’t display telemetry or attribute values on its own.

How to set up

Data keys

This widget doesn’t display any data key values directly. Adding a datasource is optional; if you add one, its data and entity (entityId/entityName) become available inside the Dynamic Tabs Function and inside each tab’s Show/Hide Condition script, so tabs can react to the current entity, its attributes, or its telemetry. With no datasource at all, tabs simply show all the time, unless a condition script says otherwise.

Tabs

Setting	Default	Effect
Tab Configuration Mode	Static	Static (edit the list below) or Dynamic (JavaScript function)
Tabs (Static mode)	Two example tabs	Each entry sets its own Tab Label, Target State, Icon, Tab Color, and Show/Hide Condition
Dynamic Tabs Function (Dynamic mode)	Returns two example tabs	A function f(widgetContext, data, entityId, entityName) returning an array of {label, state, icon, color, condition} objects

Target State must exactly match a state id that already exists on this dashboard. Leave it blank, or point it at a state that doesn’t exist, and that tab shows a short “not configured” message instead of breaking the layout.

Each tab’s Show/Hide Condition is a script, f(widgetContext, data), returning true or false. If it throws an error, the tab stays visible — a broken condition never hides content by accident. The Dynamic Tabs Function works the other way around: if it’s left empty, or it throws an error, no tabs are shown at all.

How to customize

• To change the shape of the tab bar — set Tab Style to Default, Inverted, or Pill.
• To align the tabs — set Tab Alignment to Start, Center, or End.
• To turn off the tab-switch animation — turn off Enable Tab Animation.
• To recolor tabs that aren’t selected — set Inactive Tab Color.
• To change the font of unselected tabs — set Inactive Tab Font (family, size, style, and weight).
• To change the font of the selected tab — set Active Tab Font. Leave a field there blank and it copies the matching value from Inactive Tab Font.

Reacting to tab changes

Add a widget action under this widget’s own Actions settings, using the On tab change action source, to run something whenever a tab is selected — a custom function, opening another dashboard state, or any other built-in action type. Each firing carries tabIndex, tabLabel, tabState, tabIcon, and tabColor as extra parameters, plus the entity from this widget’s own datasource, if one is set.

If the selected tab disappears — because its condition now hides it, or the tab list changed — selection jumps back to the first visible tab.

Tips

• Create the dashboard state first, then point Target State at it. A typo or a blank value shows a small “not configured” message right inside that tab, so you’ll notice it immediately.
• In Dynamic mode, write each tab’s condition field the same way you’d write a Static tab’s Show/Hide Condition — both are compiled as a function body the same way.
• Bind an action to On tab change to keep another widget or a rule chain in sync with whichever tab is selected, instead of duplicating the same logic in more than one place.