Hide/show tabsheet in config node dynamically

Developing Nodes
1

Hi folks,

We have 3 tabsheets in the config screen of our node:

this.tabs = RED.tabs.create({
     id: "node-svg-tabs",
});

this.tabs.addTab({
     id: "node-svg-tab-source",
     label: "SVG source"
});
this.tabs.addTab({
     id: "node-svg-tab-editor",
     label: "SVG editor"
});
this.tabs.addTab({
     id: "node-svg-tab-animations",
     label: "Animations"
});

However the middle tabsheet should be removed/added dynamically, based on another option of the config screen:

image

Seems there is no hideTab or showTab available, but there is a removeTab:

image

But when we use addTab afterwards, the tabsheet will be added at the right side (instead of in the middle).

Is there any way to hide/show the middle tab. Perhaps should we use order to move the tab to the middle position?

Thanks!
Bart

2

There is no hideTab because we haven't needed that functionality anywhere in the editor or nodes.

I think your best bet is to remove/add the tab and use the order function to move it back where you want it.

1 Like
3

Ok that is fine for me. Thanks!

4

For anybody that ever needs something similar, here is how it works:

  1. When I don't want the tabsheet anymore:

    [EDIT 6/9/2019]: only remove the tab when it currently exists already. Because when you try to remove an unexisting tab, an error will occur:
    image

    if (node.tabs.contains("node-svg-tab-editor")) {
   this.tabs.removeTab("node-svg-tab-editor");
}

  2. When I want the tabsheet again (as second tabsheet):

    [EDIT 6/9/2019]: only add the new tab when it currently doesn't exists yet. Because otherwise you will end up with duplicate tabsheets:
    image

    if (!node.tabs.contains("node-svg-tab-editor")) {
   this.tabs.addTab({
       id: "node-svg-tab-editor",
       label: "SVG editor"
   });
}

this.tabs.order(["node-svg-tab-source", "node-svg-tab-editor", "node-svg-tab-animations"]);
4 Likes
5

@knolleary: Are these tabs considered public API? I did not find them in the docs.

I would very much like to reuse existing functionality. Until now I have always built this tab stuff on my own. :flushed:

1 Like
6

Whilst they aren't documented, a number of non-core nodes now use them, so I guess I'm kinda committed to the API now :slight_smile:

There are a few other UI widgets we have that aren't documented. Some are more mature than others and I'll look at getting some more documented.

4 Likes
7

Splendid! Then I will use these in the future.

Thank you! :slightly_smiling_face:

1 Like
8

@kuema,
I have updated both code snippets above...

1 Like
9

Thank you!

I am going to replace my own approach with that one. :slightly_smiling_face: