Communardo Software GmbH, Kleiststraße 10 a, D-01129 Dresden
0800 1 255 255

Improve the Confluence "pagetree" macro functionality

There are two little issues for the Confluence "page­tree" macro that a lot of people wants to get fixed. Styling the cur­rent active page and auto­ma­ti­cally expand the children.

Point 1 – Style the selec­ted page ele­ment in the tree

The cur­r­ently selec­ted page in the page­tree will be shown with a bold font style. At the selec­ted ele­ment in the DOM you will find a "style" attri­bute with the value "font-weigth: bold;".But to do some own sty­ling you will need a css class or id to grap this element.

Point 2 – Expand the child­ren of the selec­ted page

Wouldn't it be nice to auto­ma­ti­cally expand the child pages of a selec­ted page? By default there is no macro para­me­ter to achieve this request.

To solve these points we need to add a little code snip­pet to our "Administration" -> "Custom HTML"-Section ("At begin­ning of the BODY"-part).

I suc­cess­fully have tes­ted this code in con­flu­ence 3.4.2, 3.5.2, 4.1 and 4.2.

<script type="text/javascript" >
	AJS.toInit(function ($) {
	        //improve the pagetree functionality: "selected" class at selected page and expand the children of selected page
	        //first save the original pagetree function "origHideEmptyChildrenContainer"
	        var origHideEmptyChildrenContainer = AJS.pagetree.hideEmptyChildrenContainers;

                //define our own one and overwrite the original pagetree function "hideEmptyChildrenContainers"
                //this function is called by the pagetree after children loading		
                AJS.pagetree.hideEmptyChildrenContainers =  function(pagetreeChildrenDiv) {

        	        //search for the child element with the style attribute
		        pagetreeChildrenDiv.find('span.plugin_pagetree_children_span').each(function(){
			        if(jQuery(this).attr('style')) {

        			        //add a marker for the seleted page... now we can style it with css
				        jQuery(this).addClass("selected");

        			        //click on the plus icon to expand the children of the current page
				        jQuery(this).parent().parent().find('.plugin_pagetree_childtoggle_container a.icon-plus').trigger('click');
			        }
		        });
		        //call the saved original function...
		        origHideEmptyChildrenContainer(pagetreeChildrenDiv);
	        };
        });
</script>

Great arti­cle, very helpful.

-Stefan

That's exactly what I were loo­king for for the last 2 hours!
Solution works fine, very good article.

Thanks
Stefan

Thank you for pos­ting this solu­tion ; this is the func­tio­n­a­lity that I wan­ted for my wiki. As you sta­ted, it works great with 3.5.2.
Cheers, David

Tested it with Confluence 3.3.3, works like a charm 🙂
Thank you very much!
Martin

This has chan­ged for the docu­ment theme in our cur­rent ver­sion which is 5.1.1.

Specifically the class of the "expand" icon has chan­ged so you'll need to change this line:

jQuery(this).parent().parent().find('.plugin_pagetree_childtoggle_container a.icon-plus').trigger('click');

to

jQuery(this).parent().parent().find('.plugin_pagetree_childtoggle_container a.plugin_pagetree_childtoggle').trigger('click');

Changes in the docu­men­ta­tion theme (at least in our cur­rent ver­sion 5.1.1) mean you'll need to change this line:

jQuery(this).parent().parent().find('.plugin_pagetree_childtoggle_container a.icon-plus').trigger('click');

to

jQuery(this).parent().parent().find('.plugin_pagetree_childtoggle_container a.plugin_pagetree_childtoggle').trigger('click');

Specifically the class for the "expand" icon has changed.

Version 2.2.1 of the page tree plugin breaks this. 🙁

I'm using this java­script to show the child­ren in 4.3.7, it works wonderful.

Now loo­king into upgrading to 5.4. It's not working anymore.
I app­lied the solu­tion pro­vi­ded by Roy Modie, but it still doesn't work.

I cur­r­ently have a look at a Confluence 5.4.3 with its bun­de­led Pagetree Plugin 2.3.3.

This ver­sion sol­ved most of the problems.

Child pages are open by default and the selec­ted page now has a style class ".plugin_pagetree_current". So i think the workar­round is no lon­ger nee­ded for Confleunce 5.4 or the cur­rent ver­sion of the page­tree plugin.

I can't con­firm this.
In the new default theme, yes, page­tree dis­plays the child­ren of the cur­rent page as you (Sandro) describe.
But in the docu­men­ta­tion theme, it doesn't. It's as before.
Also, if page­tree is in the con­tent area, it does not open at the cur­rent page either.

And for some strange rea­son, I had still no luck to fix it in Confluence 5.4.3.

it seems the java­script silently ends at AJS.pagetree.hideEmptyChildrenContainers.
Maybe this does not exist anymore?

This script works in 5.8.15. Even with the Documentation Theme.

// Expand child­ren of cur­rent page
(func­tion() {
var init = false;
AJS.bind('pagetree-children-loaded', function() {
if (init) { return; }
init = true;

var parentToggleOfCurrent = $('.plugin_pagetree_current')
.parent().parent().find('.plugin_pagetree_childtoggle');

parentToggleOfCurrent.click();
});
}())

Comments are closed.

Pin It on Pinterest