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

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

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"
      }
  }
}

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>

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.

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.