Button group - show node status

nodes/widgets/ui_button_group.js

@@ -9,9 +9,31 @@ module.exports = function (RED) {
         // which group are we rendering this widget
         const group = RED.nodes.getNode(config.group)
 
+        // Keep the code of this function in sync with the client-side function
+        function findOptionByValue (val) {
+            const opt = config.options?.find(option => {
+                if (typeof (val) === 'object') {
+                    return (JSON.stringify(val) === JSON.stringify(option.value))
+                } else {
+                    return option.value === val
+                }
+            })
+            if (opt) {
+                return opt
+            }
+            return null
+        }
+
         const evts = {
             onChange: true,
             beforeSend: function (msg) {
+                if (typeof msg.payload !== 'undefined') {
+                    const option = findOptionByValue(msg.payload)
+                    if (option) {
+                        node.status({ fill: 'blue', shape: 'dot', text: option.label || option.value })
+                    }
+                }
+
                 if (msg.ui_update) {
                     const update = msg.ui_update
                     if (typeof update.options !== 'undefined') {

ui/src/widgets/ui-button-group/UIButtonGroup.vue

@@ -118,6 +118,7 @@ export default {
                 this.$socket.emit('widget-change', this.id, value)
             }
         },
+        // Keep the code of this function in sync with the server-side function
         findOptionByValue: function (val) {
             const opt = this.options?.find(option => {
                 if (typeof (val) === 'object') {