Plugin Hook for UI Configuration Modifications

docs/en/contributing/plugins/index.md

@@ -114,6 +114,19 @@ module.exports = function(RED) {
                     }
                 }
             },
+            /**
+             * onEmitConfig - called when the UI configuration is about to be sent to a client
+             * @param {object} socket - SocketIO connection object to the client
+             * @param {object} config - The UI configuration object that will be sent
+             * @param {object} msg - A msg object, populated with connection credentials by `addConnectionCredentials`
+             * @returns {object} - The (potentially modified) UI configuration object
+             */
+            onEmitConfig: (socket, config, msg) => {
+                // modify config in any way you like
+                // e.g. config.myCustomProperty = "Hello World"
+                // You can also use data from msg, e.g. msg._client.socketIp
+                return config
+            },
             /**
              * onInput - called when a node receives a message
              * @param {object} msg - Node-RED msg object

nodes/config/ui_base.js

@@ -503,16 +503,33 @@ module.exports = function (RED) {
             if (!handshakeEditKey || !meta?.wysiwyg?.editKey || handshakeEditKey !== meta.wysiwyg.editKey) {
                 delete meta.wysiwyg
             }
-            // pass the connected UI the UI config
-            socket.emit('ui-config', node.id, {
+
+            // Prepare the UI configuration
+            const uiConfig = {
                 meta,
                 dashboards: Object.fromEntries(node.ui.dashboards),
                 heads: Object.fromEntries(node.ui.heads),
                 pages: Object.fromEntries(node.ui.pages),
                 themes: Object.fromEntries(node.ui.themes),
                 groups: Object.fromEntries(node.ui.groups),
                 widgets: Object.fromEntries(node.ui.widgets)
+            }
+
+            // Apply plugin modifications with connection credentials
+            let finalConfig = uiConfig
+            let msg = {}
+            msg = addConnectionCredentials(RED, msg, socket, node)
+            RED.plugins.getByType('node-red-dashboard-2').forEach(plugin => {
+                if (plugin.hooks?.onEmitConfig) {
+                    const modifiedConfig = plugin.hooks.onEmitConfig(socket, finalConfig, msg)
+                    if (modifiedConfig) {
+                        finalConfig = modifiedConfig
+                    }
+                }
             })
+
+            // Pass the connected UI the UI config
+            socket.emit('ui-config', node.id, finalConfig)
         }
 
         // remove event handler socket listeners for a given socket connection