I've been searching for a way to add a button in the sidenav in the dashboard. I've searched a lot but only found ways to add it to the top bar. Does anyone have any idea how would i add it? (Cause i don't, i'm 100% lost). My problem is i don't know how I would edit anything in the sidenav.
In this thread Bart shows his custom node that adds a full terminal on the sidebar: [ANNOUNCE]node-red-contrib-xterm : second beta (sidebar)
Maybe his code can give you some ideas how to proceed?
Erm, this is the sidebar, I need to do something on the dashboard's sidenav
Oops, missed the category. Sorry!
1 Like
lmao, its ok.
You don´t mention what would be the purpose of this buttom. If it is for reaching an http endpoint then it is available out of the box.
i'd set up a dropdown to organize better the tabs in theside nav. Right now i don't have many but in some time i will have at least 28 of them... So like i'm developing a industrial dashboard for a company which have 2 industries. And i'm making a specific tab for each "area" of the industry. So would go for something like
industry1 v
area 1
area 2
area 3
...
industry2 v
area 1
area 2
area 3
...
And then later i'd create a view optmized for mobile so:
idustry 1 (mobile) v
area 1
area 2
area 3
...
I think this is beyond the native dashboard capability. I suspect you will need to move to ui_dashboard to be free to use frontend frameworks like Vue or React or even a more modern Angular release. This is specially critical as you seems to want to have responsive layouts for using in mobile phones.
I dont think so, for you can do similar stuff in the tool bar.
Sure, you can apply some tricks here and there and customize the standard Dashboard. The question is, if it is feasible and maintainable in the long-term. I suspect you are building an industrial solution, so these are things to consider.
In the end it is up to you and your employers, but I would really evaluate other solutions as well.
As Andrei said, the uibuilder could be better suited to your needs, because it gives you full control over the front-end development.
EDIT: I read empoyees at first instead of employers and I was like: I'm on the furthest position possible of having employees.
I'm developing it alone... and i'm in an intership. Lol. The only reason i'm not using Ui builder is that it would take waaaaaaaaay longer. This is probably the last custom change i'd need in my dashboard.
So, I figured out how to make a dropdown there, but i'm having trouble getting the links to work. Any idea?
[{"id":"49ea3062.e83f2","type":"ui_template","z":"e5ec21e6.2c39e","group":"fc9f45d0.c93828","name":"dropdown","order":86,"width":29,"height":1,"format":"<style>\n .active {\n background-color: green;\n color: white;\n }\n \n /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */\n .dropdown-container {\n display: none;\n background-color: #262626;\n padding-left: 8px;\n }\n .dropdown-btn {\n padding: 6px 8px 6px 16px;\n text-decoration: none;\n font-size: 20px;\n color: #818181;\n display: block;\n border: none;\n background: none;\n width: 100%;\n text-align: left;\n cursor: pointer;\n outline: none;\n }\n</style>\n\n<script>\n $('#nr-dashboard > md-content > section > md-sidenav').append(`\n <button class=\"dropdown-btn\">Dropdown \n <i class=\"fa fa-caret-down\"></i>\n </button>\n <div class=\"dropdown-container\">\n <md-list role=\"list\"> <!-- ngRepeat: obj in main.menu --><!-- ngIf: !obj.hidden --><md-list-item ng-repeat=\"obj in main.menu\" ng-class=\"{'nr-menu-item-active':location.$$path=='/'+$index}\" role=\"listitem\" class=\"_md-button-wrap ng-scope _md\" tabindex=\"-1\" aria-disabled=\"false\" style=\"\"><div class=\"md-button md-no-style\"><!-- ngIf: !obj.hidden --><button class=\"md-no-style md-button ng-scope md-ink-ripple\" type=\"button\" ng-transclude=\"\" ng-if=\"!obj.hidden\" ng-click=\"main.open(obj, $index)\" ng-disabled=\"obj.disabled\" aria-label=\"Delta\"></button><!-- end ngIf: !obj.hidden --> <div class=\"md-list-item-inner\"> <ui-icon icon=\"fa-industry\" style=\"margin:5px\" class=\"ng-isolate-scope\"><!-- ngIf: iconType==='angular-material' --> <!-- ngIf: iconType==='fa' --><div ng-if=\"iconType==='fa'\" style=\"display:inline-block; margin:auto; line-height:initial;\" class=\"ng-scope\"><i class=\"fa fa-fw fa-industry\" ng-class=\"icon\"></i></div><!-- end ngIf: iconType==='fa' --> <!-- ngIf: iconType==='wi' --> <!-- ngIf: iconType==='mi' --> <!-- ngIf: iconType==='icofont' --> <!-- ngIf: iconType==='image' --> </ui-icon> <p class=\"ng-binding\">Delta</p> </div><div class=\"md-secondary-container\"></div></div></md-list-item><!-- end ngIf: !obj.hidden --><!-- end ngRepeat: obj in main.menu --><!-- ngIf: !obj.hidden --><md-list-item ng-repeat=\"obj in main.menu\" ng-class=\"{'nr-menu-item-active':location.$$path=='/'+$index}\" role=\"listitem\" class=\"_md-button-wrap ng-scope _md nr-menu-item-active\" tabindex=\"-1\" aria-disabled=\"false\" style=\"\"><div class=\"md-button md-no-style\"><!-- ngIf: !obj.hidden --><button class=\"md-no-style md-button ng-scope md-ink-ripple\" type=\"button\" ng-transclude=\"\" ng-if=\"!obj.hidden\" ng-click=\"main.open(obj, $index)\" ng-disabled=\"obj.disabled\" aria-label=\"Malhas Delta\"><div class=\"md-ripple-container\" style=\"\"></div></button><!-- end ngIf: !obj.hidden --> <div class=\"md-list-item-inner\"> <ui-icon icon=\"fa-microchip\" style=\"margin:5px\" class=\"ng-isolate-scope\"><!-- ngIf: iconType==='angular-material' --> <!-- ngIf: iconType==='fa' --><div ng-if=\"iconType==='fa'\" style=\"display:inline-block; margin:auto; line-height:initial;\" class=\"ng-scope\"><i class=\"fa fa-fw fa-microchip\" ng-class=\"icon\"></i></div><!-- end ngIf: iconType==='fa' --> <!-- ngIf: iconType==='wi' --> <!-- ngIf: iconType==='mi' --> <!-- ngIf: iconType==='icofont' --> <!-- ngIf: iconType==='image' --> </ui-icon> <p class=\"ng-binding\">Malhas Delta</p> </div><div class=\"md-secondary-container\"></div></div></md-list-item><!-- end ngIf: !obj.hidden --><!-- end ngRepeat: obj in main.menu --><!-- ngIf: !obj.hidden --><md-list-item ng-repeat=\"obj in main.menu\" ng-class=\"{'nr-menu-item-active':location.$$path=='/'+$index}\" role=\"listitem\" class=\"_md-button-wrap ng-scope _md\" tabindex=\"-1\" aria-disabled=\"false\"><div class=\"md-button md-no-style\"><!-- ngIf: !obj.hidden --><button class=\"md-no-style md-button ng-scope md-ink-ripple\" type=\"button\" ng-transclude=\"\" ng-if=\"!obj.hidden\" ng-click=\"main.open(obj, $index)\" ng-disabled=\"obj.disabled\" aria-label=\"Moenda Delta\"></button><!-- end ngIf: !obj.hidden --> <div class=\"md-list-item-inner\"> <ui-icon icon=\"fa-cogs\" style=\"margin:5px\" class=\"ng-isolate-scope\"><!-- ngIf: iconType==='angular-material' --> <!-- ngIf: iconType==='fa' --><div ng-if=\"iconType==='fa'\" style=\"display:inline-block; margin:auto; line-height:initial;\" class=\"ng-scope\"><i class=\"fa fa-fw fa-cogs\" ng-class=\"icon\"></i></div><!-- end ngIf: iconType==='fa' --> <!-- ngIf: iconType==='wi' --> <!-- ngIf: iconType==='mi' --> <!-- ngIf: iconType==='icofont' --> <!-- ngIf: iconType==='image' --> </ui-icon> <p class=\"ng-binding\">Moenda Delta</p> </div><div class=\"md-secondary-container\"></div></div></md-list-item><!-- end ngIf: !obj.hidden --><!-- end ngRepeat: obj in main.menu --><!-- ngIf: !obj.hidden --><md-list-item ng-repeat=\"obj in main.menu\" ng-class=\"{'nr-menu-item-active':location.$$path=='/'+$index}\" role=\"listitem\" class=\"_md-button-wrap ng-scope _md\" tabindex=\"-1\" aria-disabled=\"false\"><div class=\"md-button md-no-style\"><!-- ngIf: !obj.hidden --><button class=\"md-no-style md-button ng-scope md-ink-ripple\" type=\"button\" ng-transclude=\"\" ng-if=\"!obj.hidden\" ng-click=\"main.open(obj, $index)\" ng-disabled=\"obj.disabled\" aria-label=\"Destilaria Delta\"></button><!-- end ngIf: !obj.hidden --> <div class=\"md-list-item-inner\"> <ui-icon icon=\"fa-flask\" style=\"margin:5px\" class=\"ng-isolate-scope\"><!-- ngIf: iconType==='angular-material' --> <!-- ngIf: iconType==='fa' --><div ng-if=\"iconType==='fa'\" style=\"display:inline-block; margin:auto; line-height:initial;\" class=\"ng-scope\"><i class=\"fa fa-fw fa-flask\" ng-class=\"icon\"></i></div><!-- end ngIf: iconType==='fa' --> <!-- ngIf: iconType==='wi' --> <!-- ngIf: iconType==='mi' --> <!-- ngIf: iconType==='icofont' --> <!-- ngIf: iconType==='image' --> </ui-icon> <p class=\"ng-binding\">Destilaria Delta</p> </div><div class=\"md-secondary-container\"></div></div></md-list-item><!-- end ngIf: !obj.hidden --><!-- end ngRepeat: obj in main.menu --><!-- ngIf: !obj.hidden --><md-list-item ng-repeat=\"obj in main.menu\" ng-class=\"{'nr-menu-item-active':location.$$path=='/'+$index}\" role=\"listitem\" class=\"_md-button-wrap ng-scope _md\" tabindex=\"-1\" aria-disabled=\"false\"><div class=\"md-button md-no-style\"><!-- ngIf: !obj.hidden --><button class=\"md-no-style md-button ng-scope md-ink-ripple\" type=\"button\" ng-transclude=\"\" ng-if=\"!obj.hidden\" ng-click=\"main.open(obj, $index)\" ng-disabled=\"obj.disabled\" aria-label=\"Volta Grande\"></button><!-- end ngIf: !obj.hidden --> <div class=\"md-list-item-inner\"> <ui-icon icon=\"fa-industry\" style=\"margin:5px\" class=\"ng-isolate-scope\"><!-- ngIf: iconType==='angular-material' --> <!-- ngIf: iconType==='fa' --><div ng-if=\"iconType==='fa'\" style=\"display:inline-block; margin:auto; line-height:initial;\" class=\"ng-scope\"><i class=\"fa fa-fw fa-industry\" ng-class=\"icon\"></i></div><!-- end ngIf: iconType==='fa' --> <!-- ngIf: iconType==='wi' --> <!-- ngIf: iconType==='mi' --> <!-- ngIf: iconType==='icofont' --> <!-- ngIf: iconType==='image' --> </ui-icon> <p class=\"ng-binding\">Volta Grande</p> </div><div class=\"md-secondary-container\"></div></div></md-list-item><!-- end ngIf: !obj.hidden --><!-- end ngRepeat: obj in main.menu --><!-- ngIf: !obj.hidden --><md-list-item ng-repeat=\"obj in main.menu\" ng-class=\"{'nr-menu-item-active':location.$$path=='/'+$index}\" role=\"listitem\" class=\"_md-button-wrap ng-scope _md\" tabindex=\"-1\" aria-disabled=\"false\"><div class=\"md-button md-no-style\"><!-- ngIf: !obj.hidden --><button class=\"md-no-style md-button ng-scope md-ink-ripple\" type=\"button\" ng-transclude=\"\" ng-if=\"!obj.hidden\" ng-click=\"main.open(obj, $index)\" ng-disabled=\"obj.disabled\" aria-label=\"Malhas Volta Grande\"></button><!-- end ngIf: !obj.hidden --> <div class=\"md-list-item-inner\"> <ui-icon icon=\"fa-microchip\" style=\"margin:5px\" class=\"ng-isolate-scope\"><!-- ngIf: iconType==='angular-material' --> <!-- ngIf: iconType==='fa' --><div ng-if=\"iconType==='fa'\" style=\"display:inline-block; margin:auto; line-height:initial;\" class=\"ng-scope\"><i class=\"fa fa-fw fa-microchip\" ng-class=\"icon\"></i></div><!-- end ngIf: iconType==='fa' --> <!-- ngIf: iconType==='wi' --> <!-- ngIf: iconType==='mi' --> <!-- ngIf: iconType==='icofont' --> <!-- ngIf: iconType==='image' --> </ui-icon> <p class=\"ng-binding\">Malhas Volta Grande</p> </div><div class=\"md-secondary-container\"></div></div></md-list-item><!-- end ngIf: !obj.hidden --><!-- end ngRepeat: obj in main.menu --><!-- ngIf: !obj.hidden --><!-- end ngRepeat: obj in main.menu --><!-- ngIf: !obj.hidden --><!-- end ngRepeat: obj in main.menu --><!-- ngIf: !obj.hidden --><md-list-item ng-repeat=\"obj in main.menu\" ng-class=\"{'nr-menu-item-active':location.$$path=='/'+$index}\" role=\"listitem\" class=\"_md-button-wrap ng-scope _md\" tabindex=\"-1\" aria-disabled=\"false\"><div class=\"md-button md-no-style\"><!-- ngIf: !obj.hidden --><button class=\"md-no-style md-button ng-scope md-ink-ripple\" type=\"button\" ng-transclude=\"\" ng-if=\"!obj.hidden\" ng-click=\"main.open(obj, $index)\" ng-disabled=\"obj.disabled\" aria-label=\"Trend\"></button><!-- end ngIf: !obj.hidden --> <div class=\"md-list-item-inner\"> <ui-icon icon=\"fa-search\" style=\"margin:5px\" class=\"ng-isolate-scope\"><!-- ngIf: iconType==='angular-material' --> <!-- ngIf: iconType==='fa' --><div ng-if=\"iconType==='fa'\" style=\"display:inline-block; margin:auto; line-height:initial;\" class=\"ng-scope\"><i class=\"fa fa-fw fa-search\" ng-class=\"icon\"></i></div><!-- end ngIf: iconType==='fa' --> <!-- ngIf: iconType==='wi' --> <!-- ngIf: iconType==='mi' --> <!-- ngIf: iconType==='icofont' --> <!-- ngIf: iconType==='image' --> </ui-icon> <p class=\"ng-binding\">Trend</p> </div><div class=\"md-secondary-container\"></div></div></md-list-item><!-- end ngIf: !obj.hidden --><!-- end ngRepeat: obj in main.menu --> </md-list>\n </div>`);\n var dropdown = document.getElementsByClassName(\"dropdown-btn\");\n var i;\n \n for (i = 0; i < dropdown.length; i++) {\n dropdown[i].addEventListener(\"click\", function() {\n this.classList.toggle(\"active\");\n var dropdownContent = this.nextElementSibling;\n if (dropdownContent.style.display === \"block\") {\n dropdownContent.style.display = \"none\";\n } else {\n dropdownContent.style.display = \"block\";\n }\n });\n }\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":460,"y":125,"wires":[[]]},{"id":"fc9f45d0.c93828","type":"ui_group","z":"","name":"VG","tab":"ded1d340.aeb1e","order":1,"disp":false,"width":"29","collapse":false},{"id":"ded1d340.aeb1e","type":"ui_tab","z":"","name":"Volta Grande","icon":"fa-industry","order":5,"disabled":false,"hidden":false}]
1 Like
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.