# Is there a way to toggle an outline round all dashboard widgets?

**URL:** <https://discourse.nodered.org/t/is-there-a-way-to-toggle-an-outline-round-all-dashboard-widgets/99440>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [18 October 2025 12:38 UTC](https://discourse.nodered.org/t/is-there-a-way-to-toggle-an-outline-round-all-dashboard-widgets/99440 "2025-10-18T12:38:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [18 October 2025 12:38 UTC](https://discourse.nodered.org/t/is-there-a-way-to-toggle-an-outline-round-all-dashboard-widgets/99440/1 "2025-10-18T12:38:59Z")

</div>

I would like to have a button on a dashboard which for debug purposes draws a 1px outline around all widgets of a particular type on the page.

Drawing an outline is easy enough:

```auto
<style>
.experiment .nrdb-ui-button {
    outline: 1px solid red;
}
</style>

```

But what I can't achieve, even with the expert guidance of chatgpt, is to toggle the .experiment class on the ui-page.

Any suggestions?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 October 2025 13:29 UTC](https://discourse.nodered.org/t/is-there-a-way-to-toggle-an-outline-round-all-dashboard-widgets/99440/2 "2025-10-18T13:29:08Z")

</div>

> [@jbudd](#):
>
> toggle the .experiment class on the ui-page

Use a ui scoped template and a little script.

![chrome_kzX85PWTEO](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/0/80bdbd640b3127c968bdfa5a59dcf09ecd07e308.gif)

```html
<template>
</template>

<script>
    export default {
        watch: {
            msg: function () {
                if (this.msg?.topic === 'add' || this.msg?.topic === 'remove') {
                    const fn = this[this.msg.topic] // add or remove
                    const selector = this.msg.selector || 'div.nrdb-ui-page'
                    const className = this.msg.payload
                    fn(selector, className)
                }
            }
        },
        methods: {
            add: function (selector, className) {
                const el = document.querySelector(selector)
                el.classList.add(className)
            },
            remove: function (selector, className) {
                const el = document.querySelector(selector)
                el.classList.remove(className)
            }
        }
    }
</script>

<style>
.experiment .nrdb-ui-button {
    outline: 1px solid red;
}
</style>

```

```flows
[
    {
        "id": "55c91fc564c5e385",
        "type": "ui-template",
        "z": "a83e61b1c4f28b0f",
        "group": "",
        "page": "",
        "ui": "03482f22997a66ac",
        "name": "outliner",
        "order": 1,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n <div>\n \n </div>\n</template>\n\n<script>\n export default {\n watch: {\n msg: function () {\n if (this.msg?.topic === 'add' || this.msg?.topic === 'remove') {\n const fn = this[this.msg?.topic] // add or remove\n const selector = this.msg.selector || 'div.nrdb-ui-page'\n const className = this.msg.payload\n fn(selector, className)\n }\n }\n },\n methods: {\n add: function (selector, className) {\n const el = document.querySelector(selector)\n el.classList.add(className)\n },\n remove: function (selector, className) {\n const el = document.querySelector(selector)\n el.classList.remove(className)\n }\n }\n }\n</script>\n<style>\n.experiment .nrdb-ui-button {\n outline: 1px solid red;\n}\n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "widget:ui",
        "className": "d-hide",
        "x": 670,
        "y": 260,
        "wires": [
            []
        ]
    },
    {
        "id": "93fa3861654794f8",
        "type": "inject",
        "z": "a83e61b1c4f28b0f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "add",
        "payload": "experiment",
        "payloadType": "str",
        "x": 470,
        "y": 260,
        "wires": [
            [
                "55c91fc564c5e385"
            ]
        ]
    },
    {
        "id": "85d6b814e347f95c",
        "type": "inject",
        "z": "a83e61b1c4f28b0f",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "remove",
        "payload": "experiment",
        "payloadType": "str",
        "x": 479,
        "y": 311,
        "wires": [
            [
                "55c91fc564c5e385"
            ]
        ]
    },
    {
        "id": "03482f22997a66ac",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control",
            "ui-chat"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": false
    },
    {
        "id": "331cacc43bd6528d",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.29.0"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [18 October 2025 13:42 UTC](https://discourse.nodered.org/t/is-there-a-way-to-toggle-an-outline-round-all-dashboard-widgets/99440/3 "2025-10-18T13:42:27Z")

</div>

Outstanding. Thanks!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [1 November 2025 13:42 UTC](https://discourse.nodered.org/t/is-there-a-way-to-toggle-an-outline-round-all-dashboard-widgets/99440/4 "2025-11-01T13:42:45Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.