Dropdown Select Control

Who it’s for

Dashboard authors who need a dropdown because the device has more named states than a row of buttons can hold, asking “how do I let an operator pick one of twelve without a wall of segments?”, “how do I show what the device is actually on, not what was last clicked?”, “how do I know the write landed?” - when ThingsBoard’s built-in Update device attribute control writes the value and tells you nothing afterwards.

What it does

The dropdown puts a collapsed list on the card. The options are yours, a label and a value per row, and the panel opens over the dashboard rather than inside the widget, so a twelve-option list is the same card as a three-option one.

• A panel, not a row. Segments and button rows stop working once the labels stop fitting. The panel opens downward, or upward when there is no room below, and scrolls when there is room on neither side.
• It says what happened. A pick goes out as sending, then confirmed or failed, with a status chip on the header and a matching dot beside the list.
• It shows what the device says. The footer carries the value the device last reported and the time it arrived, and the option the device is really on is marked in the list - which is not always the one the operator picked.
• More than one, when the device takes a list. Optional, and sent as an array.

How to set up

The widget ships with four working options and writes a shared attribute, so it does something the moment it is installed. Enter your own rows in Options - a value for the device, a label for the operator. Pick Write mode - a shared attribute, where you set Attribute key and Scope, or an RPC, where you set RPC method. Point the widget at one device. State key is what the device reports its current value on. Leave it blank and the attribute key is used.

How to customize

• To change the choices - edit Options, one row per choice.
• To show a value before the device reports - set Default selection to one of your option values. With Allow more than one on, list several values separated by commas, for example heat,cool. With Show the device’s current value on, the device’s own reading replaces it as soon as the first one arrives.
• To write an RPC instead of an attribute - switch Write mode and set RPC method.
• To read the value back from a different key - set State key.
• To make it write-only - turn off Show the device’s current value. The footer and the readback go with it.
• To hide the in-flight line - turn off Show send feedback. The header chip stays.
• To let one pick carry several values - turn on Allow more than one.
• To match a brand - set Accent color. Left blank, the card takes the dashboard’s own primary colour.

Tips

• The dropdown needs somewhere to open. At 4x3 a list of about eight options opens downward, and longer lists flip upward or scroll. If the widget sits hard against the bottom of a dashboard and the list still feels cramped, give it a row of height rather than shortening the list.
• The dot and the tick mean different things. The tick is what is selected in this widget. The dot is what the device reports. They separate after a failed write, and that is the point - the card is telling you the device did not take it.
• Blank is not zero. A device that has never reported leaves the footer empty and dims the card, which is a different state from a device reporting an empty value.