Skip to content

Instantly share code, notes, and snippets.

@knolleary
Last active Apr 6, 2022
Embed
What would you like to do?
Example Node-RED that adds a sidebar panel in the editor

Example Node-RED that adds a sidebar panel in the editor

  1. git clone this gist somewhere

  2. In ~/.node-red run: npm install <path to where the gist is>

  3. Restart Node-RED

  4. Reload the editor and marvel at the new sidebar tab

{
"name": "node-red-plugin-template",
"version": "1.0.0",
"description": "An example plugin that adds a new sidebar to the editor",
"keywords": [],
"author": "",
"license": "Apache-2.0",
"node-red": {
"plugins": {
"sidebar-plugin": "sidebar-plugin.html"
}
}
}
<script type="text/javascript">
(function() {
RED.plugins.registerPlugin("example-sidebar-plugin", {
onadd: function() {
var content = $("<div>").css({"position":"relative","height":"100%"});
content.className = "red-ui-sidebar-example"
$("<div>My Example Sidebar</div>").appendTo(content);
// Register an action so the user could bind a keyboard shortcut to show
// the sidebar.
RED.actions.add("core:show-example-sidebar-tab",function() {
RED.sidebar.show("example-sidebar")
});
RED.sidebar.addTab({
id: "example-sidebar",
name: "Example Sidebar", // long name for the menu
label: "Example", // short name for the tab
iconClass: "fa fa-birthday-cake", //pick from https://fontawesome.com/v4.7.0/icons/
content: content,
action: "core:show-example-sidebar-tab"
});
}
})
})();
</script>
@tom3e
Copy link

tom3e commented Nov 10, 2021

Hi,
I installed your example-sidebar at node-red 2.0.6 and it worked at first try.
But I have to activate it manually by selecting it from the menue. Is there a way to have it at display on startup like the other tabs Info and debug?
I tried to set the RED.sidebar.addTab({....,pinned: true,..}) without success.

Thanks,
Tom

@knolleary
Copy link
Author

knolleary commented Nov 10, 2021

Can you explain what you mean by 'display on startup' ? Do you mean you want it to be the tab shown by default when the editor is opened? Or do you mean something else?

@tom3e
Copy link

tom3e commented Nov 10, 2021

Do you mean you want it to be the tab shown by default when the editor is opened?
Correct!

@knolleary
Copy link
Author

knolleary commented Nov 10, 2021

You cannot force a particular tab to the front - it's up the user what order the tabs are in.

You can trigger the sidebar to show your tab with RED.sidebar.show("example-sidebar") - but you shouldn't really use that to force yours to the front when the editor is loaded.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment