APEX Tabs with Badges

D

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)) {
            return;
        }
        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();
                    //
                    $(value).insertAfter(target);
                }
            }
        });
    },
    200  // delay
);