Apply button on node Edit panel

I have quite a few large template nodes in my project that i sometimes work on.
When debugging the results i have to click ok and then deploy to see the changes.

After this i have to re-open the edit panel for the template node and then scroll to where i was working.

What i miss is a 'apply' button on the edit dialog so that i can edit, apply, deploy test and then edit again without losing track of where in the template i was working.

Is this something that others are interested in? i think it could be implemented without to any breaking changes by someone familiar with the node-red codebase.

-Svein

If you are talking about a ui-template you can point to an external file.
If you are talking about the template node you could use a file-in node to read a file and pass it to the template node. In the template node put {{payload}} and what ever was in the file will be in the template.

so you edit thefile and save it and run the flow.

i'm talking about the normal template node.
But the apply button should be implemented on all nodes.

i have used file in nodes on the ui-template before but ended up with a normal template node that wrote to a file and then the file was read in to the ui-template.
Inject->template-Fileout

Inject-fileread->ui-template.

This way i could edit the file directly in node red.

Since i run node-red on a raspberry pi at home and access the node-red gui from a lot of different pc's (both home and away from home) i want access to the template from within the node-red web-app and not rely on any software on the pc i'm using.

An apply button would solve everything for me.

-Svein

This will need input from @dceejay or @knolleary I think. It would seem to be a fairly large change to the way Node-RED currently works though.

I've implemented a full editor in uibuilder for this reason but of course, that is changing static files rather than a dynamic one as the Template Node does and so is a very different case.

1 Like

I fail to see how adding a "apply" button could cause a major change. It is basically the same action just without closing the panel.

i had a look at the script and i think removing the last line from node-dialog-ok click handler would make it a apply button. "RED.tray.close()"

But somehow the deply button needs to be clickable when the panel is open.
There is otherwise no point in applying the changes.

One note. this does not only apply to template nodes. I also have a few function nodes that are quite large. an apply button would certanly be nice here also for the same reasons as in the template nodes.

Make a change, Apply, deploy and test without loosing track of where in the function node i was working.

-Svein

Anybody else that see the use of an "apply" button and could implement it?
-Svein

I can see how this might result in large changes (enabling deploy button because a node has changed etc) however, a request for a "node deploy" on the nodes configuration panel may be easier for the devs than rearranging all the UI code.

Perhaps if you try to implement it, post some screen shots, get some feedback and do a PR it might get accepted?

If that is a bit too much then perhaps story board / mock up with pictures might get devs attention and support?

Now that there has been some major changes to node-red, is this simpler to implement?
I miss this feature a lot when working with large template or function nodes.

Nothing has fundamentally changed with the edit life cycle of a node.

It is a feature that is in the back of my mind to tackle, but it isn't an easy problem.

The main challenge is that a node can define it's own oneditsave function that is called when the dialog is closed and can do the work to translate whatever is in the dialog to individual node properties. It can also tidy up an UI resources it has generated on the assumption the dialog is closing.

The fact these two things are mixed into one function means we can't do one (update the node properties) without the other (dispose of the UI elements).

That said, I think there are a couple tricks we could use to make for a slicker experience.

Hypothetically, if the deploy button was clickable whilst the edit dialog was open, we would have to:

  1. Remember what UI element has focus in the dialog and if it is a text editor, the position of the cursor.
  2. Close the dialog, allowing oneditsave to be called - rather than actually sliding it closed, this could be a different effect that leaves the tray open but hides its content as the UI elements are disposed of.
  3. Deploy the new flow
  4. Reopen the edit dialog and attempt to restore the focus and cursor position.

It gets more complicated in the cases where you have nested dialogs open - such as editing a config node that was open from a flow node's dialog. Or in one of the type editors, such as Markdown. There we have to save/restore that full stack of dialogs.

All things considered, it's still the same hard problem it always was. Whether any of what I describe is feasible will only be determined by trying to build it.

Remembering the state of the editor panel seams like a lot of work and risk of forgetting something.

How about making this optional for the nodes to implement?
This should get rid of any nasty side effects for nested edit panels and remembering the state of everything. Also limit this to first level edit panels.

For example a node could define a function like "oneditdeploy" or just "instantdeploy" that could be handled differently than the normal "Done" witch calls " oneditsave"

This would not clean up ui things as they would be left open and just save it's changes + do a "deploy modified nodes" or even beter just deploy the current node.

The button could be shown between the "Cancel" and "Done" Buttons in nodes that implement this function.

This could then be implemented in the core nodes such as template and function nodes.

Would it be possible to do it that way?

In the future this could also be used in "pop out" edit panels if needed.
We could then have a function or template node open in another window while working with other stuff in the main window. i often find my self opening and closing template and function nodes to copy things back and forth. but that is for the future :stuck_out_tongue: one thing at a time :slight_smile:

started another project with node-red and ran in to this issue right away again.
Could this not be done especially for template nodes? and optionally for future nodes that want this behavior?

this way it would not break anything.

Templates could have one more button. "Apply and Deploy" next to the "Done" button

I keep running in to this annoyance. i just want to deploy a template and see the changes. Then continue to edit.

Could this be reconsidered?

By "reconsidered" what do you mean? All of the same challenges I outlined in my previous response still apply today. I didn't rule it out, just explained why it's a hard problem to solve.

If anyone wanted to try to tackle them, I'd be happy to step through it. It just isn't high in my personal priority list.

I got the impression that the suggestion was rejected due to the challenges you mentioned.

Nice to here it that it is not.

On my larger project i have made a editor hosted in node red using ace to edit local files. But it is not a "drop in" thing on new projects. and i do not like that i have to do this on all small projects.
it also requires me to load files before every template. so more nodes.

It should not be needed since node-red already has the template editor and function editor. just missing the 1 step deploy.

it would also be nice to be able to open a template/function editor in a new tab or window.
Like we can do with the debug window

This would rely make node-red feel like a IDE and a all-in-one package for small to medium projects.