# Add sidebar tab on app start not working

**URL:** <https://discourse.nodered.org/t/add-sidebar-tab-on-app-start-not-working/64726>\
**Category:** General\
**Created:** [5 July 2022 15:00 UTC](https://discourse.nodered.org/t/add-sidebar-tab-on-app-start-not-working/64726 "2022-07-05T15:00:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dannyhuly](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dannyhuly/32/71604_2.png) [@dannyhuly](https://discourse.nodered.org/u/dannyhuly)\
**Post date:** [5 July 2022 15:00 UTC](https://discourse.nodered.org/t/add-sidebar-tab-on-app-start-not-working/64726/1 "2022-07-05T15:00:26Z")

</div>

Hi all,

I'm trying to add a custom tab as the application starts (as shown it this doc [RED.sidebar : Node-RED](https://nodered.org/docs/api/ui/sidebar/)) 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.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [5 July 2022 18:47 UTC](https://discourse.nodered.org/t/add-sidebar-tab-on-app-start-not-working/64726/2 "2022-07-05T18:47:02Z")

</div>

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.

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

```

**Client.js**

```auto
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**

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

```

---

<div class="post-metadata">

**Author:** ![dannyhuly](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dannyhuly/32/71604_2.png) [@dannyhuly](https://discourse.nodered.org/u/dannyhuly)\
**Post date:** [6 July 2022 07:08 UTC](https://discourse.nodered.org/t/add-sidebar-tab-on-app-start-not-working/64726/3 "2022-07-06T07:08:46Z")

</div>

I'm importing a js file via the [editorTheme](https://nodered.org/docs/user-guide/runtime/configuration#editor-configuration) editor configuration settings

I like the tab to be added regardless of any nodes

---

<div class="post-metadata">

**Author:** ![dannyhuly](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dannyhuly/32/71604_2.png) [@dannyhuly](https://discourse.nodered.org/u/dannyhuly)\
**Post date:** [6 July 2022 08:26 UTC](https://discourse.nodered.org/t/add-sidebar-tab-on-app-start-not-working/64726/4 "2022-07-06T08:26:26Z")

</div>

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.

```auto
// 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:

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

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

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [20 July 2022 08:27 UTC](https://discourse.nodered.org/t/add-sidebar-tab-on-app-start-not-working/64726/5 "2022-07-20T08:27:25Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.