# Ui template script lost after switch of tab

**URL:** <https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650>\
**Category:** Dashboard\
**Created:** [6 October 2022 18:48 UTC](https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650 "2022-10-06T18:48:06Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![bertaud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bertaud/32/80981_2.png) [@bertaud](https://discourse.nodered.org/u/bertaud)\
**Post date:** [6 October 2022 18:48 UTC](https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650/1 "2022-10-06T18:48:06Z")

</div>

I have a nodered dashboard withe several tab  
in one table i have a template witha script for date and time range picker  
As soon as i switch to another tab, and come back to initial tab i lost the content  
if i reload the page for the tab at browser level the content of ui template appears again

so as a paliative solution i have tried to reload the the tab by flow with the following code

```auto
[
    {
        "id": "ea4605c08dd40eb0",
        "type": "tab",
        "label": "Flow 5",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "663ce662753eca2f",
        "type": "change",
        "z": "ea4605c08dd40eb0",
        "name": "Refresh Browser",
        "rules": [
            {
                "t": "set",
                "p": "payload",
                "pt": "msg",
                "to": "{\"tab\":\"\"}",
                "tot": "json"
            },
            {
                "t": "delete",
                "p": "socketid",
                "pt": "msg"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 630,
        "y": 360,
        "wires": [
            [
                "32bcec95bc85b447",
                "f1d3465204a02f65"
            ]
        ]
    },
    {
        "id": "32bcec95bc85b447",
        "type": "trigger",
        "z": "ea4605c08dd40eb0",
        "name": "",
        "op1": "",
        "op2": "",
        "op1type": "pay",
        "op2type": "nul",
        "duration": "15",
        "extend": true,
        "overrideDelay": false,
        "units": "s",
        "reset": "",
        "bytopic": "all",
        "topic": "topic",
        "outputs": 1,
        "x": 850,
        "y": 360,
        "wires": [
            [
                "0a64c9b6a05e2030",
                "9035d0bd4890b048"
            ]
        ]
    },
    {
        "id": "61d5cc7260ed2658",
        "type": "debug",
        "z": "ea4605c08dd40eb0",
        "name": "trace1",
        "active": true,
        "tosidebar": true,
        "console": true,
        "tostatus": true,
        "complete": "true",
        "targetType": "full",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 420,
        "y": 440,
        "wires": []
    },
    {
        "id": "9b70420b84466a96",
        "type": "debug",
        "z": "ea4605c08dd40eb0",
        "name": "trace2",
        "active": true,
        "tosidebar": true,
        "console": true,
        "tostatus": true,
        "complete": "true",
        "targetType": "full",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 640,
        "y": 440,
        "wires": []
    },
    {
        "id": "f1d3465204a02f65",
        "type": "debug",
        "z": "ea4605c08dd40eb0",
        "name": "trace3",
        "active": true,
        "tosidebar": true,
        "console": true,
        "tostatus": true,
        "complete": "true",
        "targetType": "full",
        "statusVal": "payload",
        "statusType": "auto",
        "x": 800,
        "y": 420,
        "wires": []
    },
    {
        "id": "ddcf10a17934bc99",
        "type": "switch",
        "z": "ea4605c08dd40eb0",
        "name": "",
        "property": "name",
        "propertyType": "msg",
        "rules": [
            {
                "t": "eq",
                "v": "COCKPIT DE SECURITE MUI",
                "vt": "str"
            }
        ],
        "checkall": "true",
        "repair": false,
        "outputs": 1,
        "x": 450,
        "y": 360,
        "wires": [
            [
                "663ce662753eca2f",
                "9b70420b84466a96"
            ]
        ]
    },
    {
        "id": "0a64c9b6a05e2030",
        "type": "debug",
        "z": "ea4605c08dd40eb0",
        "name": "trace4",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 1010,
        "y": 420,
        "wires": []
    },
    {
        "id": "e0a51e36922906d0",
        "type": "mui_ui_control",
        "z": "ea4605c08dd40eb0",
        "name": "Debut control UI",
        "events": "all",
        "x": 240,
        "y": 360,
        "wires": [
            [
                "ddcf10a17934bc99",
                "61d5cc7260ed2658"
            ]
        ]
    },
    {
        "id": "9035d0bd4890b048",
        "type": "mui_ui_control",
        "z": "ea4605c08dd40eb0",
        "name": "",
        "events": "all",
        "x": 1020,
        "y": 360,
        "wires": [
            []
        ]
    }
]

```

but it is has no effect...  
is there an easy way to trigger by flow the reload of tab ?

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [6 October 2022 19:33 UTC](https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650/2 "2022-10-06T19:33:56Z")

</div>

With **Ui\_control** you can get a trigger when changing tab. It will give tab number or name to determine what tab is loaded

---

<div class="post-metadata">

**Author:** ![bertaud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bertaud/32/80981_2.png) [@bertaud](https://discourse.nodered.org/u/bertaud)\
**Post date:** [6 October 2022 20:07 UTC](https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650/3 "2022-10-06T20:07:15Z")

</div>

this is exactly the solution i share but it doesn't works refresh tab is not same as reload page

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 October 2022 08:44 UTC](https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650/4 "2022-10-07T08:44:21Z")

</div>

It looks like you are using `node-red-contrib-mdashboard` and `ui-control` may not work with the multiuser dashboard. You could open an issue with the author of the `node-red-contrib-mdashboard` but it hasn't been updated in almost three years and it doesn't look like the author is responding to issues.

---

<div class="post-metadata">

**Author:** ![bertaud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bertaud/32/80981_2.png) [@bertaud](https://discourse.nodered.org/u/bertaud)\
**Post date:** [7 October 2022 09:51 UTC](https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650/5 "2022-10-07T09:51:49Z")

</div>

i confirm i have taken an example for mdashboard but i have the same issue with dashboard

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [7 October 2022 10:23 UTC](https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650/6 "2022-10-07T10:23:04Z")

</div>

Export and post an example flow showing the problem. Just post the nodes that are important to the example.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [7 October 2022 10:25 UTC](https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650/7 "2022-10-07T10:25:37Z")

</div>

Take a look at this thread and see if it helps

> [@Auto refresh dashboard when changing tabs](https://discourse.nodered.org/t/auto-refresh-dashboard-when-changing-tabs/61515/3):
>
> Hi, i have connected the nodes like this in both flows, but nothing happens when I change tabs. When the dashboard is loaded from scratch in the (chrome) browser, the context data is loaded into the first tab, but when I switch tabs I need to refresh each time

---

<div class="post-metadata">

**Author:** ![bertaud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bertaud/32/80981_2.png) [@bertaud](https://discourse.nodered.org/u/bertaud)\
**Post date:** [7 October 2022 11:23 UTC](https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650/8 "2022-10-07T11:23:36Z")

</div>

you wil find the flow just below

```auto
[
    {
        "id": "ea4605c08dd40eb0",
        "type": "tab",
        "label": "Flow 5",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "15a43ab8125dbc5b",
        "type": "ui_button",
        "z": "ea4605c08dd40eb0",
        "name": "",
        "group": "b6d7cb7778ab0ca4",
        "order": 2,
        "width": "7",
        "height": "1",
        "passthru": false,
        "label": "bouton1",
        "tooltip": "",
        "color": "",
        "bgcolor": "rgb(9, 116, 121)",
        "className": "",
        "icon": "touch_app",
        "payload": "",
        "payloadType": "date",
        "topic": "SELECT * FROM AssetEntity",
        "topicType": "str",
        "x": 320,
        "y": 160,
        "wires": [
            []
        ]
    },
    {
        "id": "b96ff48db62e2575",
        "type": "ui_template",
        "z": "ea4605c08dd40eb0",
        "group": "cc2d82da652f5aac",
        "name": "HEAD scripts and css",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<script type=\"text/javascript\" src=/cdndeliver/moment.min.js></script>\n<script type=\"text/javascript\" src=/cdndeliver/daterangepicker.min.js></script>\n<link rel=\"stylesheet\" type=\"text/css\" href=/cdndeliver/daterangepicker.css />\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 340,
        "y": 540,
        "wires": [
            []
        ]
    },
    {
        "id": "4ecf91db634711ca",
        "type": "function",
        "z": "ea4605c08dd40eb0",
        "name": "data extraction",
        "func": "\nvar datedeb= flow.get(\"datedeb\",\"file\");\nvar datefin= flow.get(\"datefin\",\"file\");\nvar identifierid=flow.get(\"identifierid\",\"file\");\nvar inter=flow.get(\"inter\",\"file\");\nvar asset=inter[identifierid].id\n//msg.topic='select tagdataid, timestamp, assetidentifier, profilename, tagidentifier from lbs.tagdatatable where assetidentifier=\\'' +asset+ '\\' and timestamp>=' +tsdatedeb+ ' and timestamp<' +tsdatefin+ ' allow filtering;'\nmsg.topic='select assetid, timestamp, profilename, assetidentifier, currentzonename from lbs.assetgeolocdatatable where assetid=\\'' +asset+ '\\' and timestamp>=\\'' +datedeb+ '\\' and timestamp<\\''+datefin+'\\' allow filtering;'\nnode.log(\"------ cqlsh=\"+msg.topic)\nreturn msg;\n\n\n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 640,
        "y": 680,
        "wires": [
            [
                "5a03bac21433aca1"
            ]
        ]
    },
    {
        "id": "530446701fa53ff2",
        "type": "ui_template",
        "z": "ea4605c08dd40eb0",
        "group": "ccbd1e64bfacd7ae",
        "name": "selection de plage",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<input type=\"text\" id=\"daterange1\" />\n\n<script>\n \n const scope = this.scope;\n $('#daterange1').daterangepicker({\n timePicker: true,\n locale: {\n format: 'YYYY-MM-DD hh:mm A'\n }\n });\n $('#daterange1').on('apply.daterangepicker', function(ev, picker) {\n let payload = {};\n payload.startDate = picker.startDate.format('YYYY-MM-DD');\n payload.endDate = picker.endDate.format('YYYY-MM-DD');\n payload.startTime = picker.startDate.format('HH:mm:ss');\n payload.endTime = picker.endDate.format('HH:mm:ss');\n scope.send({payload:payload});\n });\n\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 330,
        "y": 600,
        "wires": [
            [
                "2a1bf72d6b0be8c5"
            ]
        ]
    },
    {
        "id": "2a1bf72d6b0be8c5",
        "type": "function",
        "z": "ea4605c08dd40eb0",
        "name": "dates and time plage selection",
        "func": "function toTimestamp(strDate){\n var datum = Date.parse(strDate);\n return datum/1000;\n}\nvar datedeb= msg.payload.startDate + \" \" + msg.payload.startTime + \"+0000\"\nvar datefin= msg.payload.endDate + \" \" + msg.payload.endTime + \"+0000\"\nflow.set(\"datedeb\",datedeb,\"file\");\nflow.set(\"datefin\",datefin,\"file\");\nreturn msg;\n\n\n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 630,
        "y": 600,
        "wires": [
            [
                "499f5acb8c9ee978"
            ]
        ]
    },
    {
        "id": "499f5acb8c9ee978",
        "type": "debug",
        "z": "ea4605c08dd40eb0",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 890,
        "y": 600,
        "wires": []
    },
    {
        "id": "5a03bac21433aca1",
        "type": "debug",
        "z": "ea4605c08dd40eb0",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 870,
        "y": 680,
        "wires": []
    },
    {
        "id": "ce2b6262cf9aa0ea",
        "type": "ui_template",
        "z": "ea4605c08dd40eb0",
        "group": "7dc91d8fe1ba1e53",
        "name": "Node-Red Dashboard Custom CSS",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<style>\n\n /*Main background*/\n body {\n background: -webkit-linear-gradient(\n 55deg,\n #FFFFFF 0%,\n #FFFFFF 50%,\n #FFFFFF 100%\n );\n }\n\n /*Top bar*/\n body.nr-dashboard-theme md-toolbar,\n /* couleur du fond */\n body.nr-dashboard-theme md-content md-card {\n background-color: Transparent !important; \n color: red !important;\n font-size: 16px;\n }\n\n\n /*Left menu*/\n /*Sidebar*/\n body.nr-dashboard-theme md-sidenav {\n color: white !important;\n background-color: rgba(0,0,0,0) !important;\n }\n /*Hover selection*/\n a.md-no-style, button.md-no-style {\n border-radius: 10px !important;\n }\n /*Selected*/\n .nr-menu-item-active div button {\n border-right: 4px solid rgb(41 98 255) !important;\n }\n /*List*/\n body.nr-dashboard-theme md-sidenav div.md-list-item-inner {\n /* couleur texte menu de gauche */\n color: white !important;\n /* background-color: rgba(40,85,165,1) !important; */\n background-color: rgba(20,28,102,0.9) !important; \n \n /* border-radius: 10px !important; */\n /* font-size: 16px; */\n\n }\n\n\n /*Groups*/\n ui-card-panel {\n /* background-color: rgba(25,25,112,0.9) !important; */\n background-color: rgba(20,28,102,1) !important; \n border-radius: 10px !important;\n }\n .nr-dashboard-theme ui-card-panel {\n border: none !important;\n }\n /*Name groups*/\n /* titre des groupes */\n .nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color: rgba(255, 255, 255, 0.9) !important;\n font-size: 16px;\n }\n\n\n\n /*Bouttons*/\n /* dans dashboard*/\n .nr-dashboard-theme .nr-dashboard-button .md-button {\n /* background-color: rgba(255,255,255,.1) !important; */\n background-color: rgba(225,5,30,.9) !important; \n /*background-color: rgba(25,25,112,0.9) !important; */\n }\n /* dans menu gauche*/\n .md-button {\n /* background-color: rgba(255,5,30,.9) !important; */\n /* background-color: rgba(40,85,165,1) !important; */\n /* background-color: rgba(25,25,112,0.9) !important; */\n border-radius: 1px !important;\n }\n\n\n /*Dropdown menu*/\n .nr-dashboard-theme md-select-menu{\n /* background-color: rgba(40,85,165,1) !important; */\n background-color: rgba(25,25,112,0.9) !important;\n\n }\n .nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu md-option {\n /* background-color: transparent !important; */\n }\n .nr-dashboard-theme .md-select-menu-container {\n background-color: transparent !important;\n border-radius: 10px !important;\n border: none !important;\n }\n .nr-dashboard-theme md-select-menu md-option[selected] {\n color: black !important;\n /* background-color: #FFFFFF !important; */\n background-color: #000000 !important;\n }\n \n.nr-dashboard-theme .nr-dashboard-textinput input {\n border-color: #111111;\n color: #000000;\n font-family: inherit;\n background-color: #FFFFFF !important;\n}\n /*Template*/\n md-card>img, md-card>md-card-header img, md-card md-card-title-media img {\n color: white !important;\n border-radius: 10px !important;\n }\n\n /* Color picker text BG */\n .nr-dashboard-theme .color-picker-input-wrapper > input {\n color: black !important;\n /* background-color: #FFFFFF!important; */\n background-color: Transparent!important;\n }\n\n\nth {\n background: #FFFFFF;\n position: sticky;\n box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);\n }\n\n thead tr th {\n /* Don't forget this, required for the stickiness */\n top: 0;\n }\n\n tbody tr td {\n /* Don't forget this, required for the stickiness */\n background: #FFFFFF;\n top: 1.5em;\n }\n\n\n</style>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "global",
        "className": "",
        "x": 320,
        "y": 100,
        "wires": [
            []
        ]
    },
    {
        "id": "6da91529ee989230",
        "type": "http response",
        "z": "ea4605c08dd40eb0",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 1150,
        "y": 320,
        "wires": []
    },
    {
        "id": "131b34cd02755660",
        "type": "file in",
        "z": "ea4605c08dd40eb0",
        "name": "/cdndeliver/moment.min.js",
        "filename": "/home/altran/.node-red/cdndeliver/moment.min.js",
        "format": "utf8",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 590,
        "y": 320,
        "wires": [
            [
                "a47c314f5adc8929"
            ]
        ]
    },
    {
        "id": "f04dd3cbf71c8239",
        "type": "http in",
        "z": "ea4605c08dd40eb0",
        "name": "Http endpoint moment.min.js",
        "url": "moment.min.js",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 260,
        "y": 320,
        "wires": [
            [
                "131b34cd02755660"
            ]
        ]
    },
    {
        "id": "09c3e13fc9229301",
        "type": "http response",
        "z": "ea4605c08dd40eb0",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 1190,
        "y": 380,
        "wires": []
    },
    {
        "id": "f7e30c3cb061d821",
        "type": "file in",
        "z": "ea4605c08dd40eb0",
        "name": "/cdndeliver/daterangepicker.min.js",
        "filename": "/home/altran/.node-red/cdndeliver/daterangepicker.min.js",
        "format": "utf8",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 647,
        "y": 376,
        "wires": [
            [
                "d497dad24cebbf9d"
            ]
        ]
    },
    {
        "id": "314a8a0d66fc47fd",
        "type": "http in",
        "z": "ea4605c08dd40eb0",
        "name": "Http endpoint daterangepicker.min.js",
        "url": "daterangepicker.min.js",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 277,
        "y": 376,
        "wires": [
            [
                "f7e30c3cb061d821"
            ]
        ]
    },
    {
        "id": "e0da745fa9096d4a",
        "type": "http response",
        "z": "ea4605c08dd40eb0",
        "name": "",
        "statusCode": "",
        "headers": {},
        "x": 1250,
        "y": 440,
        "wires": []
    },
    {
        "id": "a1fa2656964e20ea",
        "type": "file in",
        "z": "ea4605c08dd40eb0",
        "name": "/cdndeliver/daterangepicker.css",
        "filename": "/cdndeliver/daterangepicker.css",
        "format": "utf8",
        "chunk": false,
        "sendError": false,
        "encoding": "none",
        "allProps": false,
        "x": 630,
        "y": 440,
        "wires": [
            [
                "a42fa4e7034dfeb1"
            ]
        ]
    },
    {
        "id": "432212348445afcc",
        "type": "http in",
        "z": "ea4605c08dd40eb0",
        "name": "Http endpoint daterangepicker.css",
        "url": "daterangepicker.css",
        "method": "get",
        "upload": false,
        "swaggerDoc": "",
        "x": 280,
        "y": 440,
        "wires": [
            [
                "a1fa2656964e20ea"
            ]
        ]
    },
    {
        "id": "a47c314f5adc8929",
        "type": "change",
        "z": "ea4605c08dd40eb0",
        "name": "Set Headers",
        "rules": [
            {
                "t": "set",
                "p": "headers",
                "pt": "msg",
                "to": "{}",
                "tot": "json"
            },
            {
                "t": "set",
                "p": "headers.content-type",
                "pt": "msg",
                "to": "text/javascript",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 970,
        "y": 320,
        "wires": [
            [
                "6da91529ee989230"
            ]
        ]
    },
    {
        "id": "d497dad24cebbf9d",
        "type": "change",
        "z": "ea4605c08dd40eb0",
        "name": "Set Headers",
        "rules": [
            {
                "t": "set",
                "p": "headers",
                "pt": "msg",
                "to": "{}",
                "tot": "json"
            },
            {
                "t": "set",
                "p": "headers.content-type",
                "pt": "msg",
                "to": "text/javascript",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1030,
        "y": 380,
        "wires": [
            [
                "09c3e13fc9229301"
            ]
        ]
    },
    {
        "id": "a42fa4e7034dfeb1",
        "type": "change",
        "z": "ea4605c08dd40eb0",
        "name": "Set Headers",
        "rules": [
            {
                "t": "set",
                "p": "headers",
                "pt": "msg",
                "to": "{}",
                "tot": "json"
            },
            {
                "t": "set",
                "p": "headers.content-type",
                "pt": "msg",
                "to": "text/css",
                "tot": "str"
            }
        ],
        "action": "",
        "property": "",
        "from": "",
        "to": "",
        "reg": false,
        "x": 1050,
        "y": 440,
        "wires": [
            [
                "e0da745fa9096d4a"
            ]
        ]
    },
    {
        "id": "7aa33a164f7b90db",
        "type": "comment",
        "z": "ea4605c08dd40eb0",
        "name": "http endpoint pour servir les fichiers daterangepicker en local",
        "info": "",
        "x": 370,
        "y": 260,
        "wires": []
    },
    {
        "id": "b6d7cb7778ab0ca4",
        "type": "ui_group",
        "name": "test1",
        "tab": "b48dda0270d58618",
        "order": 1,
        "disp": true,
        "width": "14",
        "collapse": false,
        "className": ""
    },
    {
        "id": "ccbd1e64bfacd7ae",
        "type": "ui_group",
        "name": "test2",
        "tab": "1c0adfe637f06523",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "b48dda0270d58618",
        "type": "ui_tab",
        "name": "test1",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    },
    {
        "id": "1c0adfe637f06523",
        "type": "ui_tab",
        "name": "test2",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![bertaud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bertaud/32/80981_2.png) [@bertaud](https://discourse.nodered.org/u/bertaud)\
**Post date:** [14 October 2022 20:02 UTC](https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650/9 "2022-10-14T20:02:35Z")

</div>

i have seen the post but it doesn't works for me. They speak of a template node but there was no template node in the shared flow im lost...

---

<div class="post-metadata">

**Author:** ![knoepsche](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knoepsche/32/69450_2.png) [@knoepsche](https://discourse.nodered.org/u/knoepsche)\
**Post date:** [15 October 2022 19:11 UTC](https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650/10 "2022-10-15T19:11:16Z")

</div>

By switching tabs angular loses scope and values. Not to loose them you may use angulars $root.scope. I changed your example to my way to deal with this problem. Watch the ui-template nodes (header and group)!

```auto
[
    {
        "id": "78d24dd4423c580d",
        "type": "tab",
        "label": "Flow 5",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "25ad8370550b97c5",
        "type": "ui_button",
        "z": "78d24dd4423c580d",
        "name": "",
        "group": "b6d7cb7778ab0ca4",
        "order": 2,
        "width": "7",
        "height": "1",
        "passthru": false,
        "label": "bouton1",
        "tooltip": "",
        "color": "",
        "bgcolor": "rgb(9, 116, 121)",
        "className": "",
        "icon": "touch_app",
        "payload": "",
        "payloadType": "date",
        "topic": "SELECT * FROM AssetEntity",
        "topicType": "str",
        "x": 360,
        "y": 440,
        "wires": [
            []
        ]
    },
    {
        "id": "e17fbfa5a8d09bc2",
        "type": "function",
        "z": "78d24dd4423c580d",
        "name": "data extraction",
        "func": "\nvar datedeb= flow.get(\"datedeb\",\"file\");\nvar datefin= flow.get(\"datefin\",\"file\");\nvar identifierid=flow.get(\"identifierid\",\"file\");\nvar inter=flow.get(\"inter\",\"file\");\nvar asset=inter[identifierid].id\n//msg.topic='select tagdataid, timestamp, assetidentifier, profilename, tagidentifier from lbs.tagdatatable where assetidentifier=\\'' +asset+ '\\' and timestamp>=' +tsdatedeb+ ' and timestamp<' +tsdatefin+ ' allow filtering;'\nmsg.topic='select assetid, timestamp, profilename, assetidentifier, currentzonename from lbs.assetgeolocdatatable where assetid=\\'' +asset+ '\\' and timestamp>=\\'' +datedeb+ '\\' and timestamp<\\''+datefin+'\\' allow filtering;'\nnode.log(\"------ cqlsh=\"+msg.topic)\nreturn msg;\n\n\n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 640,
        "y": 680,
        "wires": [
            [
                "fbc78d99c53f3694"
            ]
        ]
    },
    {
        "id": "cd3f20748cd19a72",
        "type": "ui_template",
        "z": "78d24dd4423c580d",
        "group": "ccbd1e64bfacd7ae",
        "name": "selection de plage",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<input type=\"text\" id=\"daterange1\" />\n\n<script>\n (function(scope) {\n scope.startDate;\n scope.endDate;\n $('#daterange1').daterangepicker({\n timePicker: true,\n startDate: scope.startDate,\n endDate: scope.endDate,\n locale: {\n format: 'M/DD hh:mm A'\n }\n });\n $('#daterange1').on('apply.daterangepicker', function(ev, picker) {\n scope.$root.startDate = picker.startDate;\n scope.$root.endDate = picker.endDate;\n let payload = {};\n payload.startDate = picker.startDate.format('YYYY-MM-DD');\n payload.endDate = picker.endDate.format('YYYY-MM-DD');\n payload.startTime = picker.startDate.format('HH:mm:ss');\n payload.endTime = picker.endDate.format('HH:mm:ss');\n scope.send({payload:payload});\n });\n scope.$watch('$root.startDate', function(){\n try{\n const startDate = scope.$root.startDate;\n scope.$applyAsync(function(){\n scope.startDate = startDate;\n });\n }catch(err){\n console.error(err);\n }\n });\n scope.$watch('$root.endDate', function(){\n try{\n const endDate = scope.$root.endDate;\n scope.$applyAsync(function(){\n scope.endDate = endDate;\n });\n }catch(err){\n console.error(err);\n }\n });\n })(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 330,
        "y": 600,
        "wires": [
            [
                "378992946b432f03",
                "6de228d3b9c11ffd"
            ]
        ]
    },
    {
        "id": "378992946b432f03",
        "type": "function",
        "z": "78d24dd4423c580d",
        "name": "dates and time plage selection",
        "func": "function toTimestamp(strDate){\n var datum = Date.parse(strDate);\n return datum/1000;\n}\nvar datedeb= msg.payload.startDate + \" \" + msg.payload.startTime + \"+0000\"\nvar datefin= msg.payload.endDate + \" \" + msg.payload.endTime + \"+0000\"\nflow.set(\"datedeb\",datedeb,\"file\");\nflow.set(\"datefin\",datefin,\"file\");\nreturn msg;\n\n\n\n",
        "outputs": 1,
        "noerr": 0,
        "initialize": "",
        "finalize": "",
        "libs": [],
        "x": 630,
        "y": 600,
        "wires": [
            [
                "2a88d995047dd66f"
            ]
        ]
    },
    {
        "id": "2a88d995047dd66f",
        "type": "debug",
        "z": "78d24dd4423c580d",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 890,
        "y": 600,
        "wires": []
    },
    {
        "id": "fbc78d99c53f3694",
        "type": "debug",
        "z": "78d24dd4423c580d",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 870,
        "y": 680,
        "wires": []
    },
    {
        "id": "fbbd48e2cc8a53a4",
        "type": "ui_template",
        "z": "78d24dd4423c580d",
        "group": "b6d7cb7778ab0ca4",
        "name": "Node-Red Dashboard Custom CSS",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<style>\n\n /*Main background*/\n body {\n background: -webkit-linear-gradient(\n 55deg,\n #FFFFFF 0%,\n #FFFFFF 50%,\n #FFFFFF 100%\n );\n }\n\n /*Top bar*/\n body.nr-dashboard-theme md-toolbar,\n /* couleur du fond */\n body.nr-dashboard-theme md-content md-card {\n background-color: Transparent !important; \n color: red !important;\n font-size: 16px;\n }\n\n\n /*Left menu*/\n /*Sidebar*/\n body.nr-dashboard-theme md-sidenav {\n color: white !important;\n background-color: rgba(0,0,0,0) !important;\n }\n /*Hover selection*/\n a.md-no-style, button.md-no-style {\n border-radius: 10px !important;\n }\n /*Selected*/\n .nr-menu-item-active div button {\n border-right: 4px solid rgb(41 98 255) !important;\n }\n /*List*/\n body.nr-dashboard-theme md-sidenav div.md-list-item-inner {\n /* couleur texte menu de gauche */\n color: white !important;\n /* background-color: rgba(40,85,165,1) !important; */\n background-color: rgba(20,28,102,0.9) !important; \n \n /* border-radius: 10px !important; */\n /* font-size: 16px; */\n\n }\n\n\n /*Groups*/\n ui-card-panel {\n /* background-color: rgba(25,25,112,0.9) !important; */\n background-color: rgba(20,28,102,1) !important; \n border-radius: 10px !important;\n }\n .nr-dashboard-theme ui-card-panel {\n border: none !important;\n }\n /*Name groups*/\n /* titre des groupes */\n .nr-dashboard-theme ui-card-panel p.nr-dashboard-cardtitle {\n color: rgba(255, 255, 255, 0.9) !important;\n font-size: 16px;\n }\n\n\n\n /*Bouttons*/\n /* dans dashboard*/\n .nr-dashboard-theme .nr-dashboard-button .md-button {\n /* background-color: rgba(255,255,255,.1) !important; */\n background-color: rgba(225,5,30,.9) !important; \n /*background-color: rgba(25,25,112,0.9) !important; */\n }\n /* dans menu gauche*/\n .md-button {\n /* background-color: rgba(255,5,30,.9) !important; */\n /* background-color: rgba(40,85,165,1) !important; */\n /* background-color: rgba(25,25,112,0.9) !important; */\n border-radius: 1px !important;\n }\n\n\n /*Dropdown menu*/\n .nr-dashboard-theme md-select-menu{\n /* background-color: rgba(40,85,165,1) !important; */\n background-color: rgba(25,25,112,0.9) !important;\n\n }\n .nr-dashboard-theme md-select-menu, .nr-dashboard-theme md-select-menu md-option {\n /* background-color: transparent !important; */\n }\n .nr-dashboard-theme .md-select-menu-container {\n background-color: transparent !important;\n border-radius: 10px !important;\n border: none !important;\n }\n .nr-dashboard-theme md-select-menu md-option[selected] {\n color: black !important;\n /* background-color: #FFFFFF !important; */\n background-color: #000000 !important;\n }\n \n.nr-dashboard-theme .nr-dashboard-textinput input {\n border-color: #111111;\n color: #000000;\n font-family: inherit;\n background-color: #FFFFFF !important;\n}\n /*Template*/\n md-card>img, md-card>md-card-header img, md-card md-card-title-media img {\n color: white !important;\n border-radius: 10px !important;\n }\n\n /* Color picker text BG */\n .nr-dashboard-theme .color-picker-input-wrapper > input {\n color: black !important;\n /* background-color: #FFFFFF!important; */\n background-color: Transparent!important;\n }\n\n\nth {\n background: #FFFFFF;\n position: sticky;\n box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);\n }\n\n thead tr th {\n /* Don't forget this, required for the stickiness */\n top: 0;\n }\n\n tbody tr td {\n /* Don't forget this, required for the stickiness */\n background: #FFFFFF;\n top: 1.5em;\n }\n\n\n</style>\n\n<script type=\"text/javascript\" src=\"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js\"></script>\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js\"></script>\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css\" />\n\n<script type=\"text/javascript\">\n function getRootScope(){\n const dashboardElement = angular.element('#nr-dashboard');//get the apps root element\n const rootScope = dashboardElement.injector().get('$rootScope');//get the root scope\n return rootScope;\n };\n \n angular.element(async function(){\n try{\n const rootScope = window.getRootScope();\n rootScope.startDate = undefined;\n rootScope.endDate = undefined;\n /*\n rootScope.$apply(function(){\n rootScope.folderName = '';\n rootScope.mediaArray = new Array();\n });\n */\n }catch(err){\n console.error(err);\n }\n });\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "global",
        "className": "",
        "x": 360,
        "y": 240,
        "wires": [
            []
        ]
    },
    {
        "id": "6de228d3b9c11ffd",
        "type": "debug",
        "z": "78d24dd4423c580d",
        "name": "debug 1",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 680,
        "y": 460,
        "wires": []
    },
    {
        "id": "b6d7cb7778ab0ca4",
        "type": "ui_group",
        "name": "test1",
        "tab": "b48dda0270d58618",
        "order": 1,
        "disp": true,
        "width": "14",
        "collapse": false,
        "className": ""
    },
    {
        "id": "ccbd1e64bfacd7ae",
        "type": "ui_group",
        "name": "test2",
        "tab": "1c0adfe637f06523",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "b48dda0270d58618",
        "type": "ui_tab",
        "name": "test1",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    },
    {
        "id": "1c0adfe637f06523",
        "type": "ui_tab",
        "name": "test2",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![bertaud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bertaud/32/80981_2.png) [@bertaud](https://discourse.nodered.org/u/bertaud)\
**Post date:** [15 October 2022 19:53 UTC](https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650/11 "2022-10-15T19:53:53Z")

</div>

it works !!! thanks a lot for your help

---

<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:** [29 October 2022 19:54 UTC](https://discourse.nodered.org/t/ui-template-script-lost-after-switch-of-tab/68650/12 "2022-10-29T19:54:15Z")

</div>

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