Ui template script lost after switch of tab

Dashboard
1

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

[
    {
        "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 ?

2

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

3

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

4

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.

5

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

6

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

7

Take a look at this thread and see if it helps

8

you wil find the flow just below

[
    {
        "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
    }
]
9

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...

10

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)!

[
    {
        "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
    }
]
11

it works !!! thanks a lot for your help

12

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