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>

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

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?

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

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.