Skip to content

Instantly share code, notes, and snippets.

@knolleary

knolleary/README.md

Last active February 15, 2023 18:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save knolleary/2b5cf9f79a435180f6f7295e3967d9b9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save knolleary/2b5cf9f79a435180f6f7295e3967d9b9 to your computer and use it in GitHub Desktop.
Download ZIP
Example Node-RED that adds a sidebar panel in the editor
Raw
README.md

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

Raw
package.json
{
"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"
}
}
}
Raw
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>
@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.

@josalesmj
Copy link

josalesmj commented Feb 15, 2023

Hello, how could I add info to a variable from side bar?

I want to create a sidebar that will display a iframe only if the user added a url in the input on the top of the side bar.

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