Mit dem PageTree- bzw. Inhalt-Makro bietet Confluence die Möglichkeit, die Seiten einer bestimmten Kategorie anzuzeigen. Man kann dem Makro auch mitgeben, bis zu welcher Ebene Unterseiten angezeigt werden sollen. Möchte man jedoch nur die Unterseiten der aktuellen Seite anzeigen, wird man von Confluence im Stich gelassen. Wie man Confluence beibringt, nur die Unterseiten der aktuellen Seite anzuzeigen, vermittelt der Blog-Beitrag.

Anforderung

Per Standard liefert Confluence bei dem PageTree die Möglichkeit, keine Starttiefe (startDepth=0) anzugeben, so ist der aktuelle Knoten zwar hervorgehoben, aber die Kinderelemente sind nicht ausgeklappt.

Die zweite Variante wäre, die Kinderknoten ausklappen zu lassen. Dem PageTree wird dazu eine Starttiefe mitgegeben (startDepth=2). Hier wären dann alle Kinderknoten ausgeklappt.

Ziel ist aber, nur die Kinderknoten des aktuellen Elementes auszuklappen.

Ein Skript macht es möglich

Wie so oft, ist man nicht der Erste, der eine bestimmte Funktionalität wünscht, so ist es auch bei dieser Problematik. Sandro Herrmann hat in dem Beitrag Improve the Confluence “pagetree” macro functionality ein Skript zur Verfügung gestellt, das die Unterseiten der aktuellen Seite aufklappt und zusätzlich dieses Element durch Styling hervorhebt.

Zu Nutze macht sich Herr Herrmann, dass Confluence jQuery integriert hat:

{section}
{column:width=20%}
{html}
<script type="text/javascript">// <![CDATA[
    AJS.toInit(function ($) {
	    //improve the pagetree functionality: "selected" class at selected
	    //page and expand the children of selected page
	    //first save the original page tree function
            //"origHideEmptyChildrenContainer"
	    var origHideEmptyChildrenContainer = AJS.pagetree
	        .hideEmptyChildrenContainers;

	    //define our own one and overwrite the original page tree
	    //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>
{html}
{pagetree:root=02 TP CSC|searchBox=true|startDepth=0}
{column}
{column:width=80%}
...
{column}
{section}

Damit das Skript greift, wird es als HTML-Makro vor dem Inhalt-Makro in die Seite integriert. Im Beispiel gibt es zwei Spalten auf der Seite: In der einen Spalte wird das Inhaltsverzeichnis gerendert und in der anderen Spalte der Inhalt.

Elegante Einbindung

Wird das Skript nur vereinzelt genutzt, kann es in jede Seite integriert werden. Nutzt man dieses Skript jedoch in mehreren Seiten, so lohnt es sich, es in eine separate Datei auszulagern und diese in den entsprechenden Seiten zu integrieren.

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

	    //define our own one and overwrite the original page tree
	    //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>
{html}

Diese Seite bekommt z.B. den Namen „Dynamischer Navigationsbaum“ und wird dann einfach in die entsprechenden Seiten integriert.

{section}
{column:width=20%}
{include:Dynamischer Navigationsbaum}
{pagetree:root=02 TP CSC|searchBox=true|startDepth=0}
{column}
{column:width=80%}
...
{column}
{section}

Getestet habe ich das Skript in der aktuellen Confluence-Version 4.1.4. Im Beitrag von Herr Herrmann ist auch zu finden, dass es auch in der Versionen 3.3.3, 3.4.2 und 3.5.2. läuft. Also: einfach mal ausprobieren!