index.md

layout	docs-api
toc	toc-api-ui.html
title	RED.sidebar
slug	url label /docs/api/ui ui sidebar

The sidebar allows nodes and plugins to add custom tabs.

• RED.sidebar API
  • RED.sidebar.addTab( tab )
  • RED.sidebar.removeTab( id )
  • RED.sidebar.show( id )
  • RED.sidebar.containsTab( id )

RED.sidebar API

RED.sidebar.addTab( tab )

Add a new tab to the sidebar.

The tab definition is an object with the following properties:

Property	Description
id	The unique id for this tab.
label	The text to display on the sidebar tab. This should not be too long.
name	The name of the tab displayed in the sidebar menu.
icon	(optional) A URL to an SVG file to use as the tab icon. The SVG is used as a CSS mask-image, so it will be rendered using the current text color. Either icon or iconClass can be used, but not both.
iconClass	(optional) The FontAwesome 4 class of the icon to use. For example, "fa fa-database". Either icon or iconClass can be used, but not both.
content	The DOM element containing the content of the sidebar.
toolbar	(optional) A DOM element to display in the sidebar toolbar when this tab is active.
enableOnEdit	(optional) If set to true, this tab will be accessible whilst the edit dialog is open. Default: false.
action	(optional) The name of a registered action used to display this tab. This allows the user to assign a keyboard shortcut to switch to the tab.

// The sidebar content
const content = $("<div>").css({"position":"relative","height":"100%"});

// (optional) A toolbar header for the sidebar
const header = $("<div>", {class:"red-ui-sidebar-header"}).appendTo(content);


RED.actions.add("my-custom-tab:show-custom-tab",function() {
    RED.sidebar.show("my-custom-tab");
});

RED.sidebar.addTab({
    id: "my-custom-tab",
    label: "custom",
    name: "My Custom Tab",
    iconClass: "fa fa-database",
    content: content,
    action: "my-custom-tab:show-custom-tab"
});

RED.sidebar.removeTab( id )

Removes the tab, if it exists.

If a node adds a tab as part of its onpaletteadd function, it must make sure it calls this API to remove it as part of its onpaletteremove function.

RED.sidebar.removeTab("my-custom-tab");

RED.sidebar.show( id )

Show the given tab, if it exists, in the sidebar.

RED.sidebar.show("my-custom-tab")

RED.sidebar.containsTab( id )

Returns true if the tab exists in the sidebar

let debugExists = RED.sidebar.containsTab('my-custom-tab');