User Macros For Creating Tabs

[#1]

Have you ever wanted to create tabs on your page? Well, of course you have! Tabs are a great way of organizing a page to keep it looking uncluttered. Below are two user macros you can create that will give you the ability to put tabs on your Confluence pages.

How it looks in the editor

How it looks when viewing the page

The User Macro Code

Macro Name:
tab_group

Macro Title:
Tab Group

Description:
This macro is used with the Tab macro. It controls the tab direction and responsiveness of the tab macros within it.

Macro Body Processing:
Rendered

Template:

## Developed by: Davin Studer
## Date created: 03/31/2022
## @param Vertical:title=Vertical Orientation|type=boolean|desc=Display the tabs vertically vs horizontally.|default=false
## @param Responsive:title=Responsive|type=boolean|desc=If checked tabs that overrun the width of the screen will be placed inside a menu.|default=false

##############################
## Create a unique id value ##
##############################
#set( $id=$action.dateFormatter.calendar.timeInMillis )

###########################################################################
## These are used for getting around velocity issues when writing jQuery ##
###########################################################################
#set( $d = '$' )
#set( $p = '#' )

#if ( $paramVertical == true )
    #set( $direction = "vertical-tabs" )
#else
    #set( $direction = "horizontal-tabs" )
#end

#if ( $paramResponsive == true )
    #set( $responsive = ' data-aui-responsive="true"' )
#else
    #set( $responsive = "" )
#end

<div id="tabGroup$id" class="aui-tabs $direction"$responsive>
<ul class="tabs-menu"> </ul>
$!body
</div>

<script type="text/javascript">
    AJS.toInit(function(){
        var html$id = '';
        //Only one active tab
        if(AJS.${d}('#tabGroup$id > .tabs-pane.active-pane').length > 1 || AJS.${d}('#tabGroup$id > .tabs-pane.active-pane').length == 0) {
            AJS.${d}('#tabGroup$id > .tabs-pane.active-pane').removeClass('active-pane');
            var firstTab$id = AJS.${d}('#tabGroup$id > .tabs-pane').get(0);
            AJS.${d}(firstTab$id).addClass('active-pane');
        }
        
        AJS.${d}('#tabGroup$id > .tabs-pane').each(function(index) {
            var active$id = '';
            
            if(AJS.${d}(this).hasClass('active-pane')) {
                active$id = ' active-tab';
            }
            html$id += '<li class="menu-item' + active$id + '"><a href="#' + AJS.${d}(this).attr('id') + '" id="aui-tab-uid-' + AJS.${d}(this).attr('id') + '" class="tabs-menu-anchor"><strong>' + AJS.${d}(this).attr('data-tab-name') + '</strong></a></li>';
        });
        
        AJS.${d}('#tabGroup$id > .tabs-menu').append(html$id);
        
        AJS.tabs.setup();
        
        // Prevent scrolling the page to the tab
        AJS.${d}(".tabs-menu-anchor").click(function(e){
            AJS.tabs.change(AJS.${d}(this), e)
            e.preventDefault()
            e.stopImmediatePropagation();
        });
    });
</script>

Macro Name:
tab

Macro Title:
Tab

Description:
This macro is used with the Tab Group macro. Place one or more of these inside a Tab Group macro to create tabs on your page.

Macro Body Processing:
Rendered

Template:

## Developed by: Davin Studer
## Date created: 03/31/2022
## @param TabName:title=Tab Name|type=string|required=true|desc=Specify a name for this tab.
## @param TabID:title=Tab ID|type=string|required=false|desc=Specify a id for this tab. (optional)
## @param Active:title=Active|type=boolean|desc=Only one tab may be the active one. (optional)|default=false
 
##############################
## Create a unique id value ##
##############################
#set( $id=$action.dateFormatter.calendar.timeInMillis )

#if ( $paramActive == true )
    #set( $active = " active-pane" )
#else
    #set( $active = "" )
#end

#if ( $paramTabID && $paramTabID != "" )
    #set( $tabID = "tab_$paramTabID" )
#else
    #set( $tabID = "tab_$id" )
#end

<div class="tabs-pane$!active" id="$tabID" data-tab-name="$!paramTabName">
$!body
</div>

[Rafael Corredor]

Hi,

Thank you for this one.  It is very useful.

I would be great to have a repository with this and other existing user macros.  One option could be to have something similar to this space for JIRA Admin: https://jaus.atlassian.net/wiki/spaces/JAUS/overview 

[Davin Studer]

I've thought for a long time it would be nice to have a place where people could do this ... kinda like the Atlassian Marketplace but for user macros.

[Nicolai Sibler]

Thanks @Davin Studer , wonderful job!

Could you please point out where to incease the width of the tab's titles when displayed vertically (or to word wrap the line)?

Sorry for bothering, but in German we just need some more space for our beloved word monstrosities ;-)

[Davin Studer]

This is actually using built-in Atlassian UI functionality. So, it would behave the same way with anything that uses their UI framework. A quick look at the CSS and it looks like this is the rule that is constraining the width. So, you would need to override that CSS rule.

.aui-tabs.vertical-tabs>.tabs-menu {
    width: 11em;
}

[Larry Peery]

Hi @Nicolai Sibler

Were you able to get the vertical tab names to wrap?

Thanks,
Larry

[Larry Peery]

Adding style="white-space: normal;" to the <strong> attribute within the <li><a href...> in the tab group macro worked for me.

<strong style="white-space: normal;">' + AJS.${d}(this).attr('data-tab-name') + '</strong></a></li>';

[Andrew C_]

This may be a bad place for this, but I am at a loss.   I am trying to lock/freeze the tabs in place on the page as you scroll.  If you page your tab is linked to has a lot of content and you have to scroll the tabs get lost and then you have to scroll back.   Is there any way to lock/freeze the tab container/tab group in its place?

[Rafał Żydek]

Are there problems with usage on Confluence 8? I'm not able to make it works on Confluence 8 DC. Sometime I cannot see anything, sometime the list of tabs is duplicated

Definition:

Result

Update: problem exist only if you have columns / divided layout of the page.

Update#2

I made a fix for confluence 8.

Replace

AJS.${d}('#tabGroup$id > .tabs-menu').append(html$id);
AJS.tabs.setup();

with

if (AJS.${d}('#tabGroup$id > .tabs-menu').html().length<2){
  AJS.${d}('#tabGroup$id > .tabs-menu').append(html$id);
  AJS.tabs.setup();
}

[Larry Peery]

We are having similar issues with Confluence 8. We did try the replacement listed above but were not able to resolve the issue.

Confluence Server 8.2.0

Is anyone else facing this?

The Edit Screen...

The Published page...

[Rafał Żydek]

I fixed issue by workaround, below tab_group code:

if ( AJS.${d}('#tabGroup$id > .tabs-menu').html().length < 2 ){
  AJS.${d}('#tabGroup$id > .tabs-menu').append(html$id);
  AJS.tabs.setup();

}

 Full code:

## @param Vertical:title=Vertical Orientation|type=boolean|desc=Display the tabs vertically vs horizontally.|default=false
## @param Responsive:title=Responsive|type=boolean|desc=If checked tabs that overrun the width of the screen will be placed inside a menu.|default=false

##############################
## Create a unique id value ##
##############################
#set( $id=$action.dateFormatter.calendar.timeInMillis )

###########################################################################
## These are used for getting around velocity issues when writing jQuery ##
###########################################################################
#set( $d = '$' )
#set( $p = '#' )

#if ( $paramVertical == true )
#set( $direction = "vertical-tabs" )
#else
#set( $direction = "horizontal-tabs" )
#end

#if ( $paramResponsive == true )
#set( $responsive = ' data-aui-responsive="true"' )
#else
#set( $responsive = "" )
#end

<div id="tabGroup$id" class="aui-tabs $direction"$responsive>
<ul class="tabs-menu"> </ul>
$!body
</div>

<script type="text/javascript">
AJS.toInit(function(){
var html$id = '';
//Only one active tab
if(AJS.${d}('#tabGroup$id > .tabs-pane.active-pane').length > 1 || AJS.${d}('#tabGroup$id > .tabs-pane.active-pane').length == 0) {
AJS.${d}('#tabGroup$id > .tabs-pane.active-pane').removeClass('active-pane');
var firstTab$id = AJS.${d}('#tabGroup$id > .tabs-pane').get(0);
AJS.${d}(firstTab$id).addClass('active-pane');
}

AJS.${d}('#tabGroup$id > .tabs-pane').each(function(index) {

var active$id = '';

if(AJS.${d}(this).hasClass('active-pane')) {
active$id = ' active-tab';
}

html$id += '<li class="menu-item' + active$id + '"><a href="#' + AJS.${d}(this).attr('id') + '" id="aui-tab-uid-' + AJS.${d}(this).attr('id') + '" class="tabs-menu-anchor"><strong>' + AJS.${d}(this).attr('data-tab-name') + '</strong></a></li>';

});

//Adding tabs
if ( AJS.${d}('#tabGroup$id > .tabs-menu').html().length < 2 ){
AJS.${d}('#tabGroup$id > .tabs-menu').append(html$id);
AJS.tabs.setup();

}

// Prevent scrolling the page to the tab
AJS.${d}(".tabs-menu-anchor").click(function(e){
AJS.tabs.change(AJS.${d}(this), e)
e.preventDefault()
e.stopImmediatePropagation();
});
});
</script>

Be aware that macro TAB have vulnerability and allow users iject <scripts>. My code for tab macro to avoid that:

## @param TabName:title=Tab Name|type=string|required=true|desc=Specify a name for this tab.
## @param TabID:title=Tab ID|type=string|required=false|desc=Specify a id for this tab. (optional)
## @param Active:title=Active|type=boolean|desc=Only one tab may be the active one. (optional)|default=false

##############################
## Create a unique id value ##
##############################
#set( $id=$action.dateFormatter.calendar.timeInMillis )

#if ( $paramActive == true )
#set( $active = " active-pane" )
#else
#set( $active = "" )
#end

#####################
## Replace < char  ##
#####################
#set( $tabName = $paramTabName.replace('&lt;','') )
#set( $tabID = $paramTabID.replace('&lt;','') )

 
#if ( $paramTabID && $paramTabID != "" )
#set( $tabID = "tab_$paramTabID" )
#else
#set( $tabID = "tab_$id" )
#end

<div class="tabs-pane$!active" id="$tabID" data-tab-name="$tabName">
$!body
</div>

[E Noonan]

I know this is an old thread, but maybe someone will see it.  

Do you have to buy the tab macro from Atlassian to use this user macro?  I ask because the cost on the marketplace for the tab macro is exorbitant for a company with more than 10 users using Confluence.

[Jill Skjøndal Grefsrud]

Two questions: 

Do the tabs "load" individually, so that heavy pages with large amounts of content will appear lighter and load faster if tabs are added? 

Will a Ctrl+F / F3 search work for the whole page or only for the activated tab? 

Thanks in advance! :) 

[Phil Bustin]

I don't see detailed instructions this post for where and how to create a template that contains tabs.

[Nicolai Sibler]

@Phil Bustin

Instructions to set up this user macro in your Server/DC instance (excerpt from Writing User Macros):

1. Go to Administration  > General Configuration > User Macros
2. Choose Create a User Macro
3. Enter the macro details (see article above)
4. Click Add

[Phil Bustin]

Thanks, Nicolai.  In our Sandbox, in Confluence > Administration > General Configuration, there is no Macro item.  

In Confluence > Configuration > navigation pane > Administration, there is only Macro Usgage.

Maybe I need to be assigned a different type of Administrator privilege.