Blog

Confluence's missing feature: Alle Unterseiten der aktuellen Seite im Baum/Inhaltsverzeichnis aufklappen

Unterseiten einer Seiten ConfluenceMit 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.
Nur Elternknoten markiert
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.
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!

Holisticon AG — Teile diesen Artikel

Über den Autor

Avatar

Mr Norman Erck M.Sc. started developing websites as a teen in 1999 driven by his fascination for the possibilities of the rising e-business technologies. He is now a certified ScrumMaster and Enterprise- Software-Architect who has worked on e-business projects for over seven years. He takes the role of a scrum master and architect for IT projects in large companies. He is a speaker on conferences about CDI as well.

Ein Kommentar

  1. Hallo,
    kann ich das auch irgendwie in die Konfiguration des Documentation-Theme oder die globale Konfig aufnehmen?
    Ich möchte das Feature gerne für alle Spaces und Seiten haben.
    Vielen Dank und viele Grüße
    Christof

Antwort hinterlassen