Hi folks, Developing nodes for Node-RED is not difficult, once you know how to do it. However I always forget how to create a sidebar plugin, to show a panel in the right sidebar of the flow editor. Especially if the user needs to enter data in the sidebar, and you want to remember that data. So…

From the wiki's back to the sidebar :yum: @gregorius : it is also sometimes useful to make some features of your sidebar available as a flow editor action. Suppose you have e.g. a button on your sidebar, which calls a function when being clicked:$("#do-something-button").click(function() { doS…

[image] BartButenaers: RED.events.on('runtime-state', function() { RED.events.off('runtime-state', function() {}); I changed this to be: var initialiseConfigNodeOnce = () => { RED.events.off('runtime-state', initialiseConfigNodeOnce); .... }; RED.events.on('runtime-state', initia…

[image] gregorius: RED.events.on('runtime-state', initialiseConfigNodeOnce); Since RED.events is an EventEmitter, you could use RED.events.once() instead, so you could save the RED.events.off() in your callback.

[image] kuema: RED.events.once() I was thinking the same: [Screen Shot 2023-10-16 at 10.38.52] but my browser told me something else :frowning:

[image] gregorius: the node isn't setup, i.e. doesn't contain the current value: I had something similar in the beginning, due to 2 reasons: Every time the user changes something in your sidebar (i.e. dropdown value, input field value, ...), you need to store the updated data immediately i…

[image] gregorius: but my browser told me something else :frowning: Aaah, sorry! My bad... I was a bit quick there. I thought it refers to the runtime code, not the editor. Then ignore what I've said... :sweat_smile:

[image] BartButenaers: I had something similar in the beginning, due to 2 reasons: Solved the problem, the node that is defined is the config and should have a different type - I was using the same type for tab and config node. The html (data-template-name) defined in the config node is then …

So I've created my first sidebar plugin by converting the flow2uml node from palette to config node with sidebar menu: [Screen Shot 2023-10-16 at 17.37.35] I also pulled all this code (sidebar templates) into the nodedev set of nodes so that it's now possible to generate sidebar nodes using the N…

[image] gregorius: it's now possible to generate sidebar nodes using the NodeFactory Cool. A fast student in our classroom... Due to your new NodeFactory feature this tutorial has become already obsolete for you :wink:

Tutorial - create a sidebar plugin and persist the data in a config node

Developing Nodes

marcus-j-davies 16 October 2023 16:28 21

Ok - Been following this thread for sometime.

@BartButenaers - Great tutorial

One thing I find great for sidebar is the use of the stack panels & tree views!
I use them in my ZWave plugin a fair bit

3 Likes

Topic		Replies	Views
How to create a sidebar tab Dashboard	18	2802	14 October 2020
:tada: Node-RED 5 Beta 1 available News docker	51	1771	11 March 2026
Does a sidebar node has a server side instance? Developing Nodes	2	541	25 November 2019
Where to save persistent data in a published node Developing Nodes	24	1819	12 May 2022
Suggestions for Node Red 5.0 Feature Requests	27	640	1 April 2026

Tutorial - create a sidebar plugin and persist the data in a config node

Related topics