# Adding a button to a node in the flow editor

**URL:** https://discourse.nodered.org/t/adding-a-button-to-a-node-in-the-flow-editor/19414
**Category:** Developing Nodes
**Created:** [21 December 2019 06:35 UTC](https://discourse.nodered.org/t/adding-a-button-to-a-node-in-the-flow-editor/19414 "2019-12-21T06:35:50Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [21 December 2019 06:35 UTC](https://discourse.nodered.org/t/adding-a-button-to-a-node-in-the-flow-editor/19414/1 "2019-12-21T06:35:50Z")

</div>

Hi folks,

I'm in the situation where it would be nice to have a [button](https://nodered.org/docs/creating-nodes/appearance#buttons) 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](https://github.com/rikukissa/node-red-contrib-image-output/pull/17), to have a toggle button (like the Debug-node):

```auto
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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/0/0b13f530070abe42609addba544e7c273c7a3ad8.png)

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/712a7e646fe7c5b9c159e02f8e3bc3475dae0fd0.png)

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

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [21 December 2019 08:41 UTC](https://discourse.nodered.org/t/adding-a-button-to-a-node-in-the-flow-editor/19414/2 "2019-12-21T08:41:10Z")

</div>

> [@BartButenaers](#):
>
> Does anybody know a way to force a field to it's default value at startup, or another way to solve this?

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.

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [21 December 2019 09:38 UTC](https://discourse.nodered.org/t/adding-a-button-to-a-node-in-the-flow-editor/19414/3 "2019-12-21T09:38:58Z")

</div>

> [@knolleary](#):
>
> We could add a `default` option to the button definition that should be used if the toggle property is not defined in the node.

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

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [21 December 2019 09:52 UTC](https://discourse.nodered.org/t/adding-a-button-to-a-node-in-the-flow-editor/19414/4 "2019-12-21T09:52:06Z")

</div>

> [@BartButenaers](#):
>
> So I think you have more important things to do ...

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

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [21 December 2019 11:40 UTC](https://discourse.nodered.org/t/adding-a-button-to-a-node-in-the-flow-editor/19414/5 "2019-12-21T11:40:40Z")

</div>

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

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [21 December 2019 22:20 UTC](https://discourse.nodered.org/t/adding-a-button-to-a-node-in-the-flow-editor/19414/6 "2019-12-21T22:20:48Z")

</div>

> [@BartButenaers](#):
>
> But I might be mistaken completely!!!

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

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [21 December 2019 22:39 UTC](https://discourse.nodered.org/t/adding-a-button-to-a-node-in-the-flow-editor/19414/7 "2019-12-21T22:39:13Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [22 December 2019 07:38 UTC](https://discourse.nodered.org/t/adding-a-button-to-a-node-in-the-flow-editor/19414/8 "2019-12-22T07:38:55Z")

</div>

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