Adding a button to a node in the flow editor

Developing Nodes
1

Hi folks,

I'm in the situation where it would be nice to have a button on a node in the flow editor... Never used it before since I understand that the flow editor is not a dashboard. But I would like add it to the node-red-contrib-image-output node, which I consider as 'the' Debug-node for image related data ...

So I created a pull request, to have a toggle button (like the Debug-node):

RED.nodes.registerType('image', {
    defaults: {
        active: { value: true }
     },
    button: {
        toggle: "active",
        onclick: function() {
             ...
        }
    }
}

To make sure existing flows are not changed, the button should look like this initially (i.e. images will be passed by default):

image

However it looks like this (i.e. images are blocked by default :woozy_face:):

image

I think this is caused by my node.active field, which is undefined at startup (since it is a new field that I have added to existing nodes). And since the oneditprepare is not called here (as long as the config screen won't be opened), I have no chance to force the field to a true.

Does anybody know a way to force a field to it's default value at startup, or another way to solve this?

Thanks !!
Bart

2

No. I can't think of anyway to handle this as you want.

We've never retrospectively added a button, so not had to consider this scenario.

We could add a default option to the button definition that should be used if the toggle property is not defined in the node.

3

Hey Nick,
thanks for the proposal! But not much nodes will use this, and mostly indeed it will be added to such nodes from the start, and not afterwards. So I think you have more important things to do ...

Will discuss with Dave how to proceed with this pull request ...

4

I'm not the only person who could make a PR to add such a feature.

5

Well, to be honest I have been looking for that code snippet via the Github "search in this repository", but I even haven't found it that way... Have the impression that - since Node-RED has been split in multiple npm modules - that the search results don't show everything. But I might be mistaken completely!!!

1 Like
6

No, I agree, some (actually most) stuff is really hard to track down now if you don't know how everything is split up.

Actually, you are probably better off trying to track things down in the live code (in the browser if looking at the editor or in VScode for server).

2 Likes
7

Since we did the repackaging, all of the code lives under packages/node_modules/...

Unfortunately, github doesn't index folders with node_modules in their name. That makes sense for 99.5% of repos as node_modules doesn't typically contain the code being developed in the repo. But for us, it does.

I haven't found a way to tell github that node_modules should not be ignored in our case.

So yes, cloning the code locally and using your IDE's search capabilities is the way to do it.

3 Likes
8

Ok guys,
that is really useful to know!!! Thanks!