# Hide/show tabsheet in config node dynamically

**URL:** <https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177>\
**Category:** Developing Nodes\
**Created:** [5 September 2019 21:30 UTC](https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177 "2019-09-05T21:30:02Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [5 September 2019 21:30 UTC](https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177/1 "2019-09-05T21:30:02Z")

</div>

Hi folks,

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

```auto
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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/8e94bf291b9210e6af7866843ea3166daba7819e.png)

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

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e5be875fa3ad9c7db158d1fef1dbacab491e4cfc.png)

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

---

<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 September 2019 21:47 UTC](https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177/2 "2019-09-05T21:47:05Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [5 September 2019 21:48 UTC](https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177/3 "2019-09-05T21:48:49Z")

</div>

Ok that is fine for me. Thanks!

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [5 September 2019 22:15 UTC](https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177/4 "2019-09-05T22:15:11Z")

</div>

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

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

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

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [6 September 2019 06:25 UTC](https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177/5 "2019-09-06T06:25:00Z")

</div>

@knolleary: Are these tabs considered public API? I did not find them in the [docs](https://nodered.org/docs/api/ui/).

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

---

<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:** [6 September 2019 08:36 UTC](https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177/6 "2019-09-06T08:36:59Z")

</div>

> [@kuema](#):
>
> Are these tabs considered public API?

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 🙂

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.

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [6 September 2019 09:18 UTC](https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177/7 "2019-09-06T09:18:49Z")

</div>

Splendid! Then I will use these in the future.

Thank you! 🙂

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [6 September 2019 21:50 UTC](https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177/8 "2019-09-06T21:50:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [7 September 2019 06:33 UTC](https://discourse.nodered.org/t/hide-show-tabsheet-in-config-node-dynamically/15177/9 "2019-09-07T06:33:53Z")

</div>

Thank you!

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