Hide/show tabsheet in config node dynamically

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

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

Ok that is fine for me. Thanks!

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

@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

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

Splendid! Then I will use these in the future.

Thank you! :slightly_smiling_face:

1 Like

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

1 Like

Thank you!

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