Change dashboard page title dynamically

Dashboard
1

Is it possible to change dashboard page title dynamically?

image
image1246Ă—243 29.9 KB

2

If I see correctly, you are using dashboard, not dashboard 2 (I have button replace title demo for 2).
Try run it on the frontend in javascript:
document.title = "test1";

you need to send actions to the frontend and build a method that will replace the title on the frontend

3

It's not so simple. Could you share flow for dashboad 2?

4

Test it, because I'm not sure if your browser will block it somehow

demo

[
    {
        "id": "5a289082d2b947a9",
        "type": "ui-template",
        "z": "19cb94d5b096ef08",
        "group": "cd0dac1475062196",
        "page": "",
        "ui": "",
        "name": "",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n    <div>\n        \n        <v-btn @click=\"test1()\">Test 1</v-btn>\n        <v-btn @click=\"test2()\">Test 2</v-btn>\n    </div>\n</template>\n\n<script>\n    export default {\n\n\n        methods: {\n            // expose a method to our <template> and Vue Application\n            test1: function () {\n                document.title = \"test1\";\n            },\n            test2: function () {\n                document.title = \"test2\";\n            }\n        },\n        mounted() {\n            document.title = \"hi\";\n            this.$socket.on('msg-input:' + this.id, (msg) => {\n                if(msg.payload.action === \"newtitle\") {\n                    document.title = msg.payload.value;\n                }\n            })\n        },\n\n    }\n</script>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 500,
        "y": 80,
        "wires": [
            []
        ]
    },
    {
        "id": "461a9ea7d6e73849",
        "type": "function",
        "z": "19cb94d5b096ef08",
        "name": "function 3",
        "func": "msg.payload = {\n    action: \"newtitle\",\n    value: +Date.now() // return timestamp\n}\nreturn msg;",
        "outputs": 1,
        "timeout": 0,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 300,
        "y": 80,
        "wires": [
            [
                "5a289082d2b947a9"
            ]
        ]
    },
    {
        "id": "404905d7c2d76444",
        "type": "inject",
        "z": "19cb94d5b096ef08",
        "name": "",
        "props": [],
        "repeat": "1",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "topic": "",
        "x": 130,
        "y": 80,
        "wires": [
            [
                "461a9ea7d6e73849"
            ]
        ]
    },
    {
        "id": "cd0dac1475062196",
        "type": "ui-group",
        "name": "Group 1",
        "page": "e188ea992f7b5998",
        "width": 6,
        "height": 1,
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": true,
        "disabled": false,
        "groupType": "default"
    },
    {
        "id": "e188ea992f7b5998",
        "type": "ui-page",
        "name": "Page 1",
        "ui": "98d9c169110a1e36",
        "path": "/page1",
        "icon": "home",
        "layout": "grid",
        "theme": "c757d5c250b7d202",
        "breakpoints": [
            {
                "name": "Default",
                "px": 0,
                "cols": 3
            },
            {
                "name": "Tablet",
                "px": 576,
                "cols": 6
            },
            {
                "name": "Small Desktop",
                "px": 768,
                "cols": 9
            },
            {
                "name": "Desktop",
                "px": 1024,
                "cols": 12
            }
        ],
        "order": 1,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "98d9c169110a1e36",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "headerContent": "page",
        "navigationStyle": "default",
        "titleBarStyle": "default",
        "showReconnectNotification": true,
        "notificationDisplayTime": 1,
        "showDisconnectNotification": true,
        "allowInstall": true
    },
    {
        "id": "c757d5c250b7d202",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "density": "default",
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    },
    {
        "id": "217771307ca3f908",
        "type": "global-config",
        "env": [],
        "modules": {
            "@flowfuse/node-red-dashboard": "1.27.0"
        }
    }
]
5

Thank you

1 Like
6

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