How to add new tabs in Node Editor Window

[kamronkhakimov]

There are many tabs under properties tab. Where can I find documentation to it?

[marcus-j-davies]

Welcome to the forums @kamronkhakimov

I couldn't find any documentation, but in a nutshell - you will do something like this.

1. Define the containers, in your HTML

<div class="tabs-row">
   <ul id="tabs"></ul>
</div>  
<div id="tabs-content">
  <div id="tab-1">...</div>
  <div id="tab-2">...</div>
</div>

2. in oneditprepare - create the Tabs

$('#tabs-content').children().hide()
$(`#tab-1`).show() /* Show initial */

const tabs = RED.tabs.create({
    id: 'tabs',
    scrollable: false,
    collapsible: false,
    onchange: function(tab) {
        $('#tabs-content').children().hide()
        $(`#${tab.id}`).show()
    })
})

tabs.addTab({ id: 'tab-1', label: 'My Tab 1' })
tabs.addTab({ id: 'tab-2'  label: 'My Tab 2' })

Note: this was based on node-red-contrib-uibuilder (node) - Node-RED by @TotallyInformation

[TotallyInformation]

Here is the Editor JS code:

TotallyInformation/node-red-contrib-uibuilder/blob/main/resources/uibuilder.js#L1567-L1605

Here are my Obsidian notes on RED.tabs:

RED.tabs

• https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177/3
• https://github.com/node-red/node-red/blob/master/packages/node_modules/%40node-red/nodes/core/function/10-function.html#L358
• https://github.com/bartbutenaers/node-red-contrib-blockly/blob/master/blockly.html#L624
• https://github1s.com/node-red/node-red/blob/HEAD/packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js

	this.tabs = RED.tabs.create({
	     id: "node-svg-tabs",
	     scrollable: true,
	     collapsible: true,
	     onchange: function(tab) { }
	})
	
	this.tabs.addTab({
	     id: "node-svg-tab-source",
	     label: "SVG source"
	})
	
	this.tabs.removeTab("node-svg-tab-editor")
	
	this.tabs.order(["node-svg-tab-source", "node-svg-tab-editor", "node-svg-tab-animations"])

	const tabs = RED.tabs.create({
            id: 'el-tabs',
            // scrollable: true,
            // collapsible: true,
            onchange: function (tab) {
                $('#el-tabs-content').children().hide()
                $('#' + tab.id).show()
            }
        })
        tabs.addTab({
            id: 'el-tab-main',
            label: 'Main'
        })
        tabs.addTab({
            id: 'el-tab-conf',
            label: 'Element Config'
        })

<div class="form-row func-tabs-row">
 <ul style="min-width: 450px; margin-bottom: 20px;" id="el-tabs"></ul>
</div>

<div id="el-tabs-content">
 <div id="el-tab-main" style="display:none">
     <!-- ... -->
 </div>
 <!-- ... -->
</div>

the Function node, or the MQTT Broker config nodes. They both contain tabbed sections and will show how it is done. node-red/packages/node_modules/@node-red/nodes/core/network/10-mqtt.html at b3ce0c007907b93aeb52e13631597ff258719254 · node-red/node-red · GitHub

[kamronkhakimov]

Thanks! That is exactly what I needed.