Sorry if I missed this in the docs (or other posts here) Can someone explain to me how I might include sliders, color pickers, and dropdowns in my Dashboard 2.0 Template node? Do I need additional libraries, if so where / how can I install them? Will they be included by default in future releases? And how do I actually include them in the Template node, in terms of syntax? Thanks Mat

Annoyingly, it seems like the v-slider doesn't emit a @change event: https://vuetifyjs.com/en/api/v-slider/#api The alternative, and universal method is to react to changes to the v-model, which isn't intuitive to write, but does work across all widgets, which is: @update:modelValue="send(...)"

[image] hazymat: Do I need additional libraries No. As described in the dashboard docs, you can use the verify components out of the box. Provide custom JS and HTML (including any Vuetify components) to render in the Dashboard [image] hazymat: sliders [image] Slider component — Vuetify The slider component can be used as an alternative visualization instead of a number input. [image] hazymat: color pickers [image] Color picker component — Vuetify The color picker component allows users to select a from pre-defined or custom colors using a variety of different i... [image] hazymat: dropdowns [image] Select component — Vuetify The select component provides a list of options that a user can make selections from. The examples on the vuetify pages all have example code (the code button above each live demo) and they have a playground where you can test stuff.

Sliders I did once [image] Customize sliders for DB2 Dashboard A little bit of fun with sliders [{"id":"1c0c26f3ab8a24c8","type":"ui-template","z":"e59576a114c1e493","group":"6f47b8907c5da63a","page":"","ui":"","name":"range","order":5,"width":"6","height":"1","head":"","format":" \n \n \n \n Range: {{rang…

Dropdown examples - [{"id":"2086b1f86b7ea9cc","type":"group","z":"be4568a984cb4685","name":"Dropdowns","style":{"label":true,"color":"#000000","fill":"#e3f3d3"},"nodes":["686288d9473a0ad7","85ddcad5226e744c","58866c432c8047e0","6a5445d93e54827e","9161cc515f695ecd","f69abba39561daef"],"x":454,"y":79,"w":352,"h":162},{"id":"686288d9473a0ad7","type":"ui-template","z":"be4568a984cb4685","g":"2086b1f86b7ea9cc","group":"48fc19d1161f11e6","page":"","ui":"","name":"Menu","order":8,"width":"3","height":"1","head":"","format":" \n \n \n \n \n Select Option 1\n \n \n \n \n {{ item.title }} \n \n \n \n \n \n\n \n export default {\n data: () => ({\n items: [\n { title: 'Option 1' },\n { title: 'Option 2' },\n { title: 'Option 3' },\n { title: 'Option 4' },\n ],\n }),\n }\n \n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":530,"y":120,"wires":[["85ddcad5226e744c"]]},{"id":"85ddcad5226e744c","type":"debug","z":"be4568a984cb4685","g":"2086b1f86b7ea9cc","name":"debug","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":710,"y":120,"wires":[]},{"id":"58866c432c8047e0","type":"ui-template","z":"be4568a984cb4685","g":"2086b1f86b7ea9cc","group":"48fc19d1161f11e6","page":"","ui":"","name":"with icons","order":9,"width":"3","height":"1","head":"","format":" \n \n \n \n \n Select Option 2\n \n \n \n 0\">\n \n \n \n \n {{ item.icon }} \n \n {{ item.title }} \n \n \n \n \n No items available \n \n \n \n \n \n\n \n export default {\n data: () => ({\n items: [\n { title: 'Option 1', icon: 'mdi-check' },\n { title: 'Option 2', icon: 'mdi-account' },\n { title: 'Option 3', icon: 'mdi-star' },\n { title: 'Option 4', icon: 'mdi-alert' },\n ],\n }),\n};\n ","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":160,"wires":[["6a5445d93e54827e"]]},{"id":"6a5445d93e54827e","type":"debug","z":"be4568a984cb4685","g":"2086b1f86b7ea9cc","name":"debug","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":710,"y":160,"wires":[]},{"id":"9161cc515f695ecd","type":"ui-template","z":"be4568a984cb4685","g":"2086b1f86b7ea9cc","group":"48fc19d1161f11e6","page":"","ui":"","name":"with url","order":10,"width":"3","height":"1","head":"","format":" \n \n \n \n \n Select Option 3\n \n \n \n \n \n \n \n {{ item.icon }} \n \n {{ item.title }} \n \n \n \n \n \n \n\n \n export default {\n data: () => ({\n items: [\n { title: 'Option 1', icon: 'mdi-check', url: 'https://example.com/option1' },\n { title: 'Option 2', icon: 'mdi-account', url: 'https://example.com/option2' },\n { title: 'Option 3', icon: 'mdi-star', url: 'https://example.com/option3' },\n { title: 'Option 4', icon: 'mdi-alert', url: 'https://example.com/option4' },\n ],\n }),\n};\n ","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":200,"wires":[["f69abba39561daef"]]},{"id":"f69abba39561daef","type":"debug","z":"be4568a984cb4685","g":"2086b1f86b7ea9cc","name":"debug","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":710,"y":200,"wires":[]},{"id":"48fc19d1161f11e6","type":"ui-group","name":"Test","page":"19eb6d108e9275e2","width":"20","height":"13","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"19eb6d108e9275e2","type":"ui-page","name":"Examples","ui":"ae3d4aeb3f977a90","path":"/examples","icon":"","layout":"tabs","theme":"a965ccfef139317a","order":3,"className":"","visible":true,"disabled":"false"},{"id":"ae3d4aeb3f977a90","type":"ui-base","name":"Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"temporary","titleBarStyle":"default"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Just to add to Steve's answer, we also have some template examples that use the Vuetify widgets too in the docs here: [image] Template ui-template | Node-RED Dashboard 2.0 Harness the power of ui-template in Node-RED Dashboard 2.0 to design custom widgets and unique dashboard layouts.

Thanks all for the answers. Really useful - I can see it's going to be easy to use - just needed that little pointer to get me started.

Ok so I have this: The slider is rendering correctly and binding to the input value, however no message is being sent out when I move the slider. What have I done wrong?

Thanks - and here's one more. It doesn't send anything on the output. Did I get the syntax wrong? (Ignore the v-if, that works fine. In cases where that evaluates to true, the colour picker is shown ok. It just doesn't output anything.)

[image] hazymat: It doesn't send anything on the output You should check the docs. Like the one above, color picker doesn't have an event change: https://vuetifyjs.com/en/api/v-color-picker/ Alternatively, bind the value to a data property and use a watch. Similar topic here: Dashboard 2 - VUE - #2 by Steve-Mcl

Thanks for the pointer. Got it working now. I thought I had read the docs but I was looking in the wrong place (was looking at this page). Cheers.

Node-RED

Node-RED Forum

Sliders, color pickers, dropdowns, etc., in Dashboard 2.0 Templates

Dashboard

hotNipi 6 October 2024 17:50 3

Sliders I did once

Topic		Replies	Views
Dashboard 2 Beta development Dashboard dashboard-2	173	4797	25 January 2024
Dashboard 2.0 is now Generally Available Dashboard dashboard-2	95	5895	14 March 2024
Simple Dashboard 2.0 Template node example Dashboard dashboard-2	15	2293	27 April 2024
Dashboard 2.0 Pre-Alpha Available General dashboard-2	314	9605	9 December 2023
Latest Dashboard 2.0 Release - Tabs, Number Input & New Gauges Dashboard dashboard-2	30	1047	5 September 2024

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Sliders, color pickers, dropdowns, etc., in Dashboard 2.0 Templates

Related topics