[Solved] Adding sidebar tab for a custom node

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>

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

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.

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

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