ui-control colon in group name

docs/nodes/widgets/ui-control.md

@@ -123,6 +123,7 @@ msg.payload = {
 ```
 
 _Note:_ `pages` can be subbed with `tabs` as per Dashboard 1.0 and `groups` can also be subbed with `group` as per Dashboard 1.0.
+_Note:_ when the `group` name contains a colon `:`, then that should be escaped using a backslash `\`.
 
 ### Enable/Disable
 
@@ -187,4 +188,4 @@ msg = {
     tab: '<Page Index>',
     name: '<Page Name>'
 }
-```
+```

nodes/widgets/locales/en-US/ui_control.html

@@ -33,7 +33,7 @@ <h4>Show/Hide Pages & Groups</h4>
     }
 }</pre>
     <h4>Enable/Disable Pages & Groups</h4>
-    <p>Dashboard pages & groups can be disabled & re-enabled by sending a <code>msg.payload</code> object with the format
+    <p>Dashboard pages & groups can be disabled & re-enabled by sending a <code>msg.payload</code> object with the format</p>
     <pre>msg.payload = {
     pages: {
         enable: ['&lt;Page Name&gt;', '&lt;Page Name&gt;'],
@@ -44,6 +44,7 @@ <h4>Enable/Disable Pages & Groups</h4>
         disable: ['&lt;Group Name&gt;']
     }
 }</pre>
+    <p>When the group name contains a colon <code>:</code>, that needs to be escaped using a backslash <code>\</code>. </p>
     <h4>External URL</h4>
     <p>It is possible to trigger navigation to an external site, away from your Dashboard by passing in a URL string.</p>
     <pre>msg.payload = {
@@ -64,4 +65,4 @@ <h3>Events List</h3>
     <li><code>name</code> - the name of the tab. (only for 'change' event).
     </ul>
     <p>Optional - report only connect events - useful to use to trigger a resend of data to a new client without needing to filter out other events.</p>
-</script>
+</script>

nodes/widgets/ui_control.js

@@ -26,6 +26,12 @@ module.exports = function (RED) {
             ui.emit('ui-control:' + node.id, msg, node)
         }
 
+        function splitUnEscapedColon (str) {
+            // Split only on colons (:) that ar not escaped, i.e. not  preceded by a backslash (\\).
+            // And for each part replace the escaped colons again by normal colons.
+            return str.split(/(?<!\\):/).map(part => part.replace(/\\:/g, ':'))
+        }
+
         const evts = {
             onInput: function (msg, send, done) {
                 const wNode = RED.nodes.getNode(node.id)
@@ -111,28 +117,28 @@ module.exports = function (RED) {
                     })
                     if ('show' in groups) {
                         const gs = groups.show.map((g) => {
-                            const levels = g.split(':')
+                            const levels = splitUnEscapedColon(g)
                             return levels.length > 1 ? levels[1] : g
                         })
                         updateStore(allGroups, gs, msg, 'visible', true)
                     }
                     if ('hide' in groups) {
                         const gh = groups.hide.map((g) => {
-                            const levels = g.split(':')
+                            const levels = splitUnEscapedColon(g)
                             return levels.length > 1 ? levels[1] : g
                         })
                         updateStore(allGroups, gh, msg, 'visible', false)
                     }
                     if ('enable' in groups) {
                         const ge = groups.enable.map((g) => {
-                            const levels = g.split(':')
+                            const levels = splitUnEscapedColon(g)
                             return levels.length > 1 ? levels[1] : g
                         })
                         updateStore(allGroups, ge, msg, 'disabled', false)
                     }
                     if ('disable' in groups) {
                         const gd = groups.disable.map((g) => {
-                            const levels = g.split(':')
+                            const levels = splitUnEscapedColon(g)
                             return levels.length > 1 ? levels[1] : g
                         })
                         updateStore(allGroups, gd, msg, 'disabled', true)

ui/src/widgets/ui-control/UIControl.vue

@@ -44,8 +44,14 @@ export default {
                 })
             }
 
+            function splitUnEscapedColon (str) {
+                // Split only on colons (:) that ar not escaped, i.e. not  preceded by a backslash (\\).
+                // And for each part replace the escaped colons again by normal colons.
+                return str.split(/(?<!\\):/).map(part => part.replace(/\\:/g, ':'))
+            }
+
             function setGroup (name, prop, value) {
-                const [pageName, groupName] = name.split(':')
+                const [pageName, groupName] = splitUnEscapedColon(name)
                 const groups = vue.findBy('group', 'name', groupName)
                 if (groups.length === 1) {
                     set('group', groupName, prop, value)
@@ -175,7 +181,7 @@ export default {
             if ('groups' in payload) {
                 if ('show' in payload.groups) {
                     payload.groups.show.forEach((name) => {
-                        const groupName = name.split(':')[1]
+                        const groupName = splitUnEscapedColon(name)[1]
                         const exactGroup = vue.groups ? Object.values(vue.groups).find(group => group.name === groupName) : null
 
                         if (exactGroup?.groupType === 'dialog') {
@@ -189,7 +195,7 @@ export default {
                 }
                 if ('hide' in payload.groups) {
                     payload.groups.hide.forEach((name) => {
-                        const groupName = name.split(':')[1]
+                        const groupName = splitUnEscapedColon(name)[1]
                         const exactGroup = vue.groups ? Object.values(vue.groups).find(group => group.name === groupName) : null
 
                         if (exactGroup?.groupType === 'dialog') {