# \[Solved\] Adding sidebar tab for a custom node

**URL:** <https://discourse.nodered.org/t/solved-adding-sidebar-tab-for-a-custom-node/4577>\
**Category:** General\
**Created:** [5 November 2018 11:58 UTC](https://discourse.nodered.org/t/solved-adding-sidebar-tab-for-a-custom-node/4577 "2018-11-05T11:58:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![malinthasa](https://avatars.discourse-cdn.com/v4/letter/m/3be4f8/32.png) [@malinthasa](https://discourse.nodered.org/u/malinthasa)\
**Post date:** [5 November 2018 11:58 UTC](https://discourse.nodered.org/t/solved-adding-sidebar-tab-for-a-custom-node/4577/1 "2018-11-05T11:58:51Z")

</div>

Hi,

I am developing a custom node (result node) which need to show a tab in the sidebar. I tried to add a tab in sidebar by looking at how debug node does that but I cannot see the expected tab among the list of tags. I tried to isolate the code which adds the tab and as per my understanding following code does that.

```
RED.sidebar.addTab({
        id: "result",
        label: this._("result.sidebar.label"),
        name: this._("result.sidebar.name"),
        content: uiComponents.content,
        toolbar: uiComponents.footer,
        enableOnEdit: true,
        pinned: true,
        iconClass: "fa fa-globe"
});
RED.actions.add("core:show-result-tab",function() { RED.sidebar.show('result'); });

```

But I am not sure about following action registration.

```
`RED.actions.add("core:show-result-tab",..)`.

```

Following is the full html of the node. Could you please guide me to do the job.

```
<script type="text/x-red" data-template-name="result">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="common.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]common.label.name">
    </div>
</script>

<script type="text/javascript">
    (function() {
        var subWindow = null;
        RED.nodes.registerType('result',{
            category: 'custom',
            defaults: {
                name: {value:""}
            },

            color:"#87a980",
            inputs:1,
            outputs:0,
            icon: "globe.png",
            align: "right",
            onpaletteadd: function() {
                var options = {
                    messageMouseEnter: function(sourceId) {
                        if (sourceId) {
                            var n = RED.nodes.node(sourceId);
                            if (n) {
                                n.highlighted = true;
                                n.dirty = true;
                            }
                            RED.view.redraw();
                        }
                    },
                    messageMouseLeave: function(sourceId) {
                        if (sourceId) {
                            var n = RED.nodes.node(sourceId);
                            if (n) {
                                n.highlighted = false;
                                n.dirty = true;
                            }
                            RED.view.redraw();
                        }
                    },
                    messageSourceClick: function(sourceId) {
                        RED.view.reveal(sourceId);
                    },
                    clear: function() {
                        RED.nodes.eachNode(function(node) {
                            node.highlighted = false;
                            node.dirty = true;
                        });
                        RED.view.redraw();
                    }
                };

                var uiComponents = RED.result.init(options);

                RED.sidebar.addTab({
                    id: "result",
                    label: this._("result.sidebar.label"),
                    name: this._("result.sidebar.name"),
                    content: uiComponents.content,
                    toolbar: uiComponents.footer,
                    enableOnEdit: true,
                    pinned: true,
                    iconClass: "fa fa-globe"
                });
                RED.actions.add("core:show-result-tab",function() { RED.sidebar.show('result'); });

                $(window).unload(function() {
                    if (subWindow) {
                        try {
                            subWindow.close();
                        } catch(err) {
                            console.log(err);
                        }
                    }
                });

                this.handleWindowMessage = function(evt) {
                    var msg = evt.data;
                    if (msg.event === "mouseEnter") {
                        options.messageMouseEnter(msg.id);
                    } else if (msg.event === "mouseLeave") {
                        options.messageMouseLeave(msg.id);
                    } else if (msg.event === "mouseClick") {
                        options.messageSourceClick(msg.id);
                    } else if (msg.event === "clear") {
                        options.clear();
                    }
                };
                window.addEventListener('message',this.handleWindowMessage);
            },
        });
    })();
</script>
```

---

<div class="post-metadata">

**Author:** ![malinthasa](https://avatars.discourse-cdn.com/v4/letter/m/3be4f8/32.png) [@malinthasa](https://discourse.nodered.org/u/malinthasa)\
**Post date:** [5 November 2018 12:41 UTC](https://discourse.nodered.org/t/solved-adding-sidebar-tab-for-a-custom-node/4577/2 "2018-11-05T12:41:11Z")

</div>

Could solve the issue removing erroneous code line `var uiComponents = RED.result.init(options);`

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [5 November 2018 16:58 UTC](https://discourse.nodered.org/t/solved-adding-sidebar-tab-for-a-custom-node/4577/3 "2018-11-05T16:58:34Z")

</div>

As I mentioned on slack, but to repeat here, please do not use the type 'result' or add a sidebar tab with the id of 'result'. That is far too generic and likely to cause naming clashes. Please use a name that is related to the area you are developing this node for.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [5 November 2018 23:27 UTC](https://discourse.nodered.org/t/solved-adding-sidebar-tab-for-a-custom-node/4577/4 "2018-11-05T23:27:13Z")

</div>

And please don't set pinned to true. If all nodes do this it rapidly becomes worthless and will have to be deprecated.

---

<div class="post-metadata">

**Author:** ![Khk2000](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@Khk2000](https://discourse.nodered.org/u/Khk2000)\
**Post date:** [4 October 2023 11:09 UTC](https://discourse.nodered.org/t/solved-adding-sidebar-tab-for-a-custom-node/4577/5 "2023-10-04T11:09:20Z")

</div>

Just a minor query, can we have customised icon (file.svg or png) instead of font-awesome icons

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [15 January 2025 16:57 UTC](https://discourse.nodered.org/t/solved-adding-sidebar-tab-for-a-custom-node/4577/6 "2025-01-15T16:57:27Z")

</div>