# Proposal: Config Nodes "+"

**URL:** <https://discourse.nodered.org/t/proposal-config-nodes/86629>\
**Category:** Core Development\
**Created:** [21 March 2024 08:47 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629 "2024-03-21T08:47:28Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [21 March 2024 08:47 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629/1 "2024-03-21T08:47:28Z")

</div>

I've always found the UX around adding a new config node very frustrating, I regularly see users confused around how to add a new `ui-group`, etc. within Dashboard 2.0, and it's a similar experience when working with MQTT nodes too.

Current UX

1. Select the dropdown for the property you want to add a new config node for:  

2. Select the "Add new " option

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/5/c5d19a20f04ae473c8b2d088804c475621ad315e.png)

1. Select the "Edit" button

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/386b72cabe0736af13ba6c88d0681e200ffd52ad.png)

### Proposal:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/b/5bdb758d8807e0902ac5c3164d929e71ae7a5260.png)

---

<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 March 2024 08:58 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629/2 "2024-03-21T08:58:38Z")

</div>

For what its worth, seems reasonable to me.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [21 March 2024 11:07 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629/3 "2024-03-21T11:07:47Z")

</div>

This would save one or two clicks but I don't think it makes config setup much less confusing.

Would you remove "Add new ... " from the drop down list?  
If there is no config node already, should the pencil button be greyed out? (It's already pretty low key, but I suppose the icon could be greyed out)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/6/e62b2b72397e8e6942c7b5cd9c1aa08526c53f60.png)

What I find confusing about setting up config nodes is when there are two or three levels eg dashboard group, dashboard tab so you have to select add new, then add new again. You have to go via group to get to tab, though tab is the more intuitive concept.

I wonder if both tab and group dropdowns could be shown, with the highest level item first.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/8/389c438fd31c8b0e490f820fcb29e2c2d6177209.png)

Obviously if you changed the Tab selection, Group would have to change to "Unassigned"

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [21 March 2024 11:53 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629/4 "2024-03-21T11:53:25Z")

</div>

> [@jbudd](#):
>
> This would save one or two clicks but I don't think it makes config setup much less confusing.

Have seen dozens of users get stuck when going to add a config node, whether than be MQTT Broker, Dashboard Gorup or otherwise - it's always a sticking point, and current UX is very unintuitive.

I've never seen someone, using Node-RED for the first time, or at least config nodes for the first time, think that to add a new config node, they need to click the dropdown/select menu, then slick the "Add new" option, and then click edit. A simple "+" button would fix this.

> [@jbudd](#):
>
> Would you remove "Add new ... " from the drop down list?

If no config nodes previously defined, yes, I'd remove that entirely.

On first-load, when none have been defined, The dropdown as it is now, with a "+" instead of a pencil icon would be my approach.

> [@jbudd](#):
>
> What I find confusing about setting up config nodes

Other improvements are being made to Dashboard 2.0 specifically, but I'm trying to constrain this to the general UX of Node-RED Config Nodes, rather than specific Dashboard use case.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [21 March 2024 12:11 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629/5 "2024-03-21T12:11:07Z")

</div>

Would it be more user friendly to have a plus button in the config sidebar, or in dashboard 2 case in the dashboard 2 sidebar.

 ![chrome_screenshot_21 Mar 2024 12_08_40 GMT](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/5/a54720d9ac8ce73cef8b4e0ab3d2d3087b9155c1.png)

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [21 March 2024 12:12 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629/6 "2024-03-21T12:12:16Z")

</div>

> [@joepavitt](#):
>
> I've never seen someone, using Node-RED for the first time, or at least config nodes for the first time, think that to add a new config node, they need to click the dropdown/select menu, then slick the "Add new" option, and then click edit. A simple "+" button would fix this.

Being pedantic, the _first time_ a user has to create a config node "Add new ..." is the only option, so no need to click the dropdown button.

Edit - Hmm maybe I'm thinking too much about an individual home user rather than someone maintaining a corporate system.

For that user, offering both + and pencil buttons would make the confusion worse, so yes you would have to remove the pencil.  
Or, in other words, change the button icon the first time.  
I don't see it as a significant improvement, sorry.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [21 March 2024 12:36 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629/7 "2024-03-21T12:36:59Z")

</div>

> [@jbudd](#):
>
> Hmm maybe I'm thinking too much about an individual home user rather than someone maintaining a corporate system.

Definitely more apparent here when the user didn't do the initial setup, but even in cases where they did - I get a handful of questions/issues per week saying how unclear it is to create a new config node. From my time at IBM too, that was a regular complaint for MQTT broker configs, etc. within the team.

> [@jbudd](#):
>
> I don't see it as a significant improvement, sorry.

doesn't have to be a _significant_ improvement though? Just _an improvement_, which it would be.

> [@E1cid](#):
>
> Would it be more user friendly to have a plus button in the config sidebar, or in dashboard 2 case in the dashboard 2 sidebar.

For Dashboard 2.0 - that's exactly what I've done. For core Node-RED though, having the option to add in the sidebar could work, but you're also taking for granted that you know the config nodes have a sidebar, which a lot of Node-RED users do not.

The point at which a user often realises they need to add a configuration is once they've dropped on a node requiring it, e.g. `mqtt`, `ui-group`, or our `function-gpt` node. When editing that node, the user has the tray open, so why not present the option there, rather than expect the user to know about the underlying concept of Config Nodes, and know that there is a "config" side menu where they can be listed?

---

<div class="post-metadata">

**Author:** ![LosinIt](https://avatars.discourse-cdn.com/v4/letter/l/439d5e/32.png) [@LosinIt](https://discourse.nodered.org/u/LosinIt)\
**Post date:** [21 March 2024 17:06 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629/8 "2024-03-21T17:06:33Z")

</div>

Ah, yes, a seemingly minor issue that had me confused the first handful of times I had to add a config in any such nodes. Then it became just an 🙄 but I totally agree that it is an unforced error, a quirk, that is better remedied and this seems a substantial improvement to me.

Just my $0.02

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [25 March 2024 14:45 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629/9 "2024-03-25T14:45:08Z")

</div>

The simplest thing I see is to dynamically change the icon: when the "add" option is selected it's the "+" icon otherwise it's the 🖊 icon. 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [25 March 2024 19:45 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629/10 "2024-03-25T19:45:30Z")

</div>

Yep, thats definitelt an alternative here that would be an improvement, still three clicks though: "open dropdown" \> "add new config" \> click "+"

And still includes the fairly unintuitive step to select the dropdown and choose the "Add new" option.

Adding a plus button to currently un-used screen real estate makes the action (a) more intuitive and (b) far quicker to perform

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [25 March 2024 20:43 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629/11 "2024-03-25T20:43:57Z")

</div>

I promise, my last comment on this suggestion...

Your image, annotated:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/aede8add688ca0efe1723e0d976af18d736df048.png)

- I am a complete beginner with Node-red. I have never seen a config node dialog before.
- I do not know that there is help text available for this dialog and I have not noticed the little button "Show help" at bottom left.
- I do not have the wherewithal to observe that there is an "Add new ..." option in the dropdown, maybe already displayed in the field.
- It does not occur to me to click the arrow or pencil button next to the dropdown just to see if it helps.

Now the designers have given me another button. It has a + on it.  
Suddenly everything becomes clear!  
Button 1 had me flummoxed but now I can choose between button 1 or button 2, all is well.

Don't you think this epiphany is slightly improbable?

I notice that unlike the "Show help" button, there is no tooltip on mouse-over of the Edit button. It could say "Edit config or create a new one"

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [25 March 2024 21:04 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629/12 "2024-03-25T21:04:35Z")

</div>

> [@jbudd](#):
>
> Don't you think this epiphany is slightly improbable?

No, the "+" button the row with "Page" would be quite clearly a button to add a new page.

I have seen at least 2 x dozen people hit exactly the list you've put forward in live screenshare sessions, and many more in issues/async sessions.

Most people in this situation do click the "pencil" icon, then change the settings in accordance of the new page/config they want, then send me messages (in the async use cases) complaining that it overrode there old page/config node

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [27 March 2024 11:48 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629/13 "2024-03-27T11:48:05Z")

</div>

@joepavitt I can try to implement it (your idea of the two buttons) - I think there is some benefit

---

<div class="post-metadata">

**Author:** ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)\
**Post date:** [27 March 2024 14:13 UTC](https://discourse.nodered.org/t/proposal-config-nodes/86629/14 "2024-03-27T14:13:46Z")

</div>

> <https://github.com/node-red/node-red/pull/4627>
>
> \<!--
> \## Before you hit that Submit button....
> 
> Please read our \[contribution …guidelines\](https://github.com/node-red/node-red/blob/master/CONTRIBUTING.md)
> before submitting a pull-request.
> 
> \## Types of changes
> 
> What types of changes does your code introduce?
> Put an \`x\` in the boxes that apply
> \--\>
> 
> \- \[\] Bugfix (non-breaking change which fixes an issue)
> \- \[x\] New feature (non-breaking change which adds functionality)
> 
> \<!--
> If you want to raise a pull-request with a new feature, or a refactoring
> of existing code, it \*\*may well get rejected\*\* if it hasn't been discussed on
> the \[forum\](https://discourse.nodered.org) or
> \[slack team\](https://nodered.org/slack) first.
> 
> \--\>
> 
> \## Proposed changes
> 
> 
> 
> This PR reduces the number of three steps into one to add a config-node by clicking a new (+) button.
> 
> The "edit" button will be disabled if no option is available. The "add" option is removed from the list as soon as it contains at least one option.
> 
> Requested by @joepavitt on the \[forum\](https://discourse.nodered.org/t/proposal-config-nodes/86629).
> 
> PS: I don't know if I should also adapt the test files? (\`10-mqtt\_page.js\` and \`22-websocket\_page.js\`)
> 
> \## Checklist
> 
> 
> \- \[x\] I have read the \[contribution guidelines\](https://github.com/node-red/node-red/blob/master/CONTRIBUTING.md)
> \- \[x\] For non-bugfix PRs, I have discussed this change on the forum/slack team.
> \- \[x\] I have run \`npm run test\` to verify the unit tests pass
> \- \[\] I have added suitable unit tests to cover the new/changed functionality