Is it possible to change dashboard page title dynamically?
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
It's not so simple. Could you share flow for dashboad 2?
Test it, because I'm not sure if your browser will block it somehow
[
{
"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"
}
}
]
Thank you
1 Like
