Programmatically Selecting, Showing, or Hiding Tabs on a Page in Creatio (formerly bpm’online)

If you want to draw the user’s attention to a particular tab on a bpm’online page, you can easily set the active tab using the tab’s name (look for your tab in the diff to know what it’s name is).

Setting the Active/Selected Tab

this.setActiveTab("GeneralInfoTab");

Showing or Hiding a Tab

To show or hide a tab, you will need to get the tab from the tabs collection. For example:

var tab = this.get("TabsCollection").get("MyTabName");

// show tab
tab.set("Visible", true);

// hide tab
tab.set("Visible", false);

Once you have a reference to the tab, just set it’s Visible property to show or hide as needed.

If you’d like to completely remove a tab (so it’s no longer retrieving data or other code that you just do not want to run), you can remove it from the tab collection completely. This should be done in the page’s onRender event. For example, if you wanted to remove the Feed tab from your section page, you could do the following:

onRender: function() {
    this.callParent(arguments);

    var tabs = this.get("TabsCollection");
    if (tabs.contains("ESNTab")) {
        tabs.removeByKey("ESNTab");
    }
}

Now the feed tab won’t even exist on the page (not just hidden, but removed).

Along these same lines, you can be aware when the user changes the active tab by overriding the onTabChange on the page:

activeTabChange: function(activeTab) {
    this.callParent(arguments);
    
    if (Ext.isEmpty(activeTab)) {
        return;
    }
    
    var tab = activeTab.get("Caption");
    if (tab === "MY TAB CAPTION") {
        // do something
    }
}

This sort of thing can be useful when you want to defer doing something until the user selects a particular tab.

Note: As of Creatio version 7.16.3, you can now also show or hide control groups and tabs using business rules on the page as well. However, if you need to do it programmatically, the method outlined in this article will also still work.