How to edit config.js file

Dashboard
1

I would like to have customize tab in right palette exactly like how config does. So, how can I edit config src code to add few more enchantments.

Note: I don't want to modify the existing config tab but I want to create a new tab containing same behavior how config does and add few more features into it.

2

Hi @tanya

can you explain a bit more what you mean?

Do you mean you would like to create a custom sidebar tab in the editor? Is this related to a node you are creating for Node-RED? Or do you want to create a custom version of Node-RED itself?

Creating a custom sidebar tab is not very well documented - and it would help to understand a bit more about what you are trying to do so I can point you in the right direction.

3

Hi,
Thanks for replying!

I want to mimic how config tab is working on sidebar. exactly same i want to create one more tab on sidebar. How can i do that?

image
image863Ă—573 11.4 KB

4

It would help if you could provide a bit more information about what you are trying to do. As I said, this isn't well documented and the best I can do is point you at examples - but I need to know a bit more from you.

5

Yes I would like to create a custom sidebar tab in the editor.Yes this is related to a node am creating for Node-RED. I want to create similar tab like config tab which is on sidebar.

Note: I want all features which are there in config tab in sidebar with few more features which i want to add. My question is how to run tab-config.js file on node red so that i can add few more enchantments to it.

image
image683Ă—575 7.94 KB

6

Yes I would like to create a custom sidebar tab in the editor.Yes this is related to a node am creating for Node-RED

7

Hi @tanya

In your node's html definition you can define a function called onpaletteadd. This will get called when your node is loaded into the editor.

Inside that function you can do the work to create the sidebar tab.

(You should also define onpaletteremove that can be used to delete the sidebar tab if you node is removed.... but that can be done later)

The main call to register a new sidebar looks like this:

RED.sidebar.addTab({
    id: "config",
    label: RED._("sidebar.config.label"),
    name: RED._("sidebar.config.name"),
    content: content,
    toolbar: toolbar,
    iconClass: "fa fa-cog",
    action: "core:show-config-tab",
    onchange: function() { refreshConfigNodeList(); }
});

As you have already found tab-config.js I suggest you step through it to see how it creates content and toolbar - you'll need to do something similar to get the CSS classes right for those components.

You've said you want a sidebar that is like the config node sidebar, but with some enhancements. Can you explain what enhancements you want?

1 Like
8

How can I run this file tab-config.js? I want to run on node red and see the changes i made to this file. how can i check my changes on node red?

9

@tanya so you want to modify the core editor code? I thought you wanted to add a custom sidebar with your node?

What changes do you want to make to the file? What are the enhancements?

tab-config.js is part of the editor source code - you can't just modify and run it. You have follow the steps listed here: https://github.com/node-red/node-red#developers That will get you to the point where you are able to run a build of the node-red code. You can then modify tab-config.js ,run a build and then run node-red to see the changes.

10

I want to group all the debug options created on my nodes to render on sidebar like config tab is doing.

Am unable to modify tab-config.js and see results on node red at browser.(am going through all the steps)

[/quote]

11

If you want your node to provide its own sidebar, then you need to put the code for that in your node's html file and use the onpaletteadd function to call it. It will then get loaded when your node is loaded.

You'll have to copy the code out of tab-config.js, but to do that, you'll need to step through it to understand what it is doing.