Dynamically hiding tabs

[lveronese]

Hi,

I've struggled many hours around this seemigly simple requirement.
I have forms with many detail tabs that need to be displayed only when some rules apply to the current displayed record in the master form.
Ideally a visibleWhen on tabs in TabSet should do it.
I tried to add this rule to the tabs and actually all tabs with a rule are hidden no matter the value of the Criteria. I've seen that tabs are not Canvas objects and this makes things quite difficult to handle.
I've not come up with a solution to my problem. There is no API to hide/show tabs so, even if I code myself the visibility logic I have no way then to hide/show the tabs.
It seems currently possibile to enable/disable tabs. I may keep all the tabs and enable/disable them with a custom function but I find this solution limiting.

Does someone have an idea on how this requirement could be handled?

Thank you in advance.

[Isomorphic]

TabSets don't have a notion of "hiding" a tab. To "hide" a tab, you can simply remove the tab with removeTab(), and then to "show" it later, re-add it with the same pane. Prior to removing the tab, use updateTab() to sever the connection between the pane and the tab, otherwise, the pane will be destroyed along with the tab when it is removed.

TabSets do support enabling and disabling tabs. Technically, there are no docs saying that tab.enableWhen is valid, however, we would expect this to work - if you're having trouble with this, we'll need to see runnable sample code showing what's going wrong.

[claudiobosticco]

TabSets don't have a notion of "hiding" a tab. To "hide" a tab, you can simply remove the tab with removeTab(), and then to "show" it later, re-add it with the same pane.

Usually I declare the (optional) ID of the tabs, and then I use tabID.show() and tabID.hide(): isn't it a supported usage?

[Isomorphic]

That's not technically supported - we don't have automated tests covering that usage. It may be OK, but there may be some problems when scrollers are visible, since it doesn't look like we would notice the hidden tab and run all the right layout code to arrange everything as expected.

[lveronese]

Thank you for your explanation. IMHO this solution is a bit complex. Many other libraries allow hiding tabs (and relative panes as a consequence) with simple hide/show methods. SmartClient should provide such an API in a future release.

[Isomorphic]

It's just a few lines of code, and the fact that there cannot be hidden tabs simplifies various things (such as APIs having less error cases for developers to worry about, and tools not needing to handle it).

However, if it really irks you, there's always Feature Sponsorship.

[claudiobosticco]

lveronese as I'll have to refactor my code, I'm testing something like this:

isc.TabSet.addProperties({
    _savedTabInfo: {},
    hideTab: function (id) {
        var tabNumber = this.getTabNumber(id);
        if (tabNumber !== -1) {
            this._savedTabInfo[id] = {
                pane: this.getTabPane(id),
                tabObject: this.getTabObject(id),
                position: this.getTabNumber(id)
            }
            this.updateTab(id, null);
            this.removeTab(id);
        }
    },
    showTab: function (id) {
        var savedTabInfo = this._savedTabInfo[id];
        if (savedTabInfo) {
            this.addTab(savedTabInfo.tabObject, savedTabInfo.position);
            this.updateTab(id, savedTabInfo.pane);
        }
    }
});
​

which requires a name or ID for the tabs to be shown/hidden

[lveronese]

Thank you Claudio,

I will incorporate your solution in my code if the customer perfers hidden tabs.
Are you sure the use of this.id can't cause conflicts with other properties of the object?
May it be better to add a specific property like _savedTabInfo and use it like this._savedTabInfo.id = { ... } ?

[claudiobosticco]

Thank you Claudio,
I will incorporate your solution in my code if the customer perfers hidden tabs.
Are you sure the use of this.id can't cause conflicts with other properties of the object?
May it be better to add a specific property like _savedTabInfo and use it like this._savedTabInfo.id = { ... } ?

yes, I've added the change you suggested and fixed some bugs. Note: the position requires something more sophisticated to be respected in non trivial cases where you hide/show more than one tab.

[claudiobosticco]

Also note that if you need to use addTab/removeTab APIs to actually alter the tabs array, this will add other problems relative to the tab position. At least in respect to this aspect, it's better to enable/disable tabs.

[lveronese]

I'll go with disable for the moment. In fact the only solution that could really work would be for you to be able to change the CSS visibility of the tab underlying DOM element which seems not to be possible currently since Tab is not a Canvas derived class. This is something strange given the overall quality of the library. I've been working with SmartClient for three months now and in general I'm really satisfied of the choice. This has been the first nuisance I've encountered so far.

[Isomorphic]

See getTab() - tabs are created by passing just an Object, not a Canvas, because that makes a much shorter and clearer definition, and the vast majority of Canvas properties do not make sense. But you do have access to the created Canvas.

There's nothing to improve upon as far as how that part of the API works.

Hidden tabs, as we've discussed, have drawbacks in terms of the complexity of the API, and now you've been shown the quite simple code that achieves them if you really want to take that approach.

[claudiobosticco]

See getTabCanvas()

do you mean getTabPane ? I don't see a getTabCanvas method.

[Isomorphic]

Sorry, in SmartClient, the API is just getTab(), not getTabCanvas(). In SmartGWT there is a separate getTabCanvas() API, required because the SC method has multiple possible return types, which is not allowed in Java.

Also note that the docs for this API explain another reason why there is a difference between tabs and their related Canvas - some implementations of TabSet could use just a single Canvas to render all of the tabs.

[Isomorphic]

From now on Tab.enableWhen is fully supported and documented, you can find it since the build of May 31