Add sidebar tab on app start not working

[dannyhuly]

Hi all,

I'm trying to add a custom tab as the application starts (as shown it this doc RED.sidebar : Node-RED) but the side bar won't load unless I "wait" for the editor to finish loading (so I presume).

Currently I added setTimeout(...,100) to allow the editor to load so RED.sidebar.addTab(...) will work.
This issue happens for RED.notify(...) as well.

What should I do to ensure that the RED.sidebar.addTab will work when the app initializing.

Thanks.

[marcus-j-davies]

HI @dannyhuly

Where are you calling RED.sidebar.addTab?

I don't need to wait, or delay its loading.
I instantiate the tab on the onpaletteadd callback in the HTML file.

in my main HTML file I reference some of my Core js files which exposes stuff.

<script type="text/javascript" src="resources/node-red-contrib-zwave-js/UITab/client.js" ></script>

Client.js

const ZwaveJsUI = (function() {
    function init() {

        /* init stuff */

        RED.sidebar.addTab({
            id: 'zwave-js',
            label: ' ZWave JS',
            name: 'Z-Wave JS',
            content: ParentContainer,
            enableOnEdit: true,
            iconClass: 'fa fa-feed'
        });
    }
    return {init: init}
})();

HTML File

RED.nodes.registerType('zwave-js', {
     /* Other required Stuff */
    onpaletteadd: ZwaveJsUI.init,
});

[dannyhuly]

I'm importing a js file via the editorTheme editor configuration settings

I like the tab to be added regardless of any nodes

[dannyhuly]

I was able to resolve this by adding new event based on the 'workspace:change event.

I added this js file to the editorTheme.page.scripts array.

// editor-loaded-event.js
RED.events.on('workspace:change', () => {
    RED.events.off('workspace:change', () => {});
    RED.events.emit('editor:loaded');
});

The editor:loaded event will trigger only once after the app is ready.

Usage:

RED.events.on('editor:loaded', () => {
    RED.notify('hello world');
});

RED.events.on('editor:loaded', () => {
     RED.sidebar.addTab(...);
});