[Solved] Adding sidebar tab for a custom node

#1

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>
0 Likes

#2

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

0 Likes

#3

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.

0 Likes

#4

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

0 Likes