Skip to main content

APEX Tabs with Badges


Did you ever wanted to add badges to the tab names in Tabs component? You might expect this will be simple. But it is not. You add a <span> to the name and your tabs will break (see the image below). Expected result is on the right.

So what you need to do?

  • assign TABS static id to your Tabs region
  • assign any static id to all your tabs (subregions)
  • create page item for each tab
  • fill these items however you like
  • create DA to add these badges after the tabs are created
  • adjust CSS styles to your needs

Here is the DA which will map your badge items to the proper tabs. So on page 1 it will map P1_TAB_A_BADGE item to the TAB_A tab (subregion with TAB_A static id).

setTimeout(function() {
        var tabs_id = 'TABS';       // static_id for the Tabs region
        var badges  = '_BADGE';     // postfix for badge items
        if (!$('#' + tabs_id)) {
        var tabs    = apex.region(tabs_id).widget().aTabs('getTabs');
        var items   = $('#' + tabs_id + ' > input[type="hidden"]');
        $.each(items, function(k, el) {
            var name = $(el).attr('name');
            if (name) {
                var sr_name = '#SR_' + name.substring(name.indexOf('_') + 1).replace(badges, '');
                if (name.indexOf(badges) != -1 && tabs[sr_name] !== undefined) {
                    var target  = $(tabs[sr_name].tab$[0]).find('span');
                    var value   = apex.item(name).getValue();
    200  // delay