What we have done so far is that we've created a dynamic list. This list can be easily altered so that it appears like a tree-style view. In order to do this, we will add some indentation and a fancy set of icons.

Download the following images and put them inside the "design/tscm/images/" directory:

• folder_closed.png
• folder_open.png
• link.png

The "folder_open" icon should be displayed in front of the folder that is being accessed. The "folder_closed" icon should be displayed in front of all the other folders (the ones that are not being accessed. The "link.png" should be displayed in front of the links. In addition, the links should be slightly indented. All this can be added within a matter of seconds by slightly altering the "links_tree_menu.tpl" file. At this point, this template file should look something like this:

{* Loop through all sub-folders within the "Links" folder. *}

{section loop=fetch( content,

                    list,

                    hash( parent_node_id,    __NODE_ID_OF_LINKS__,

                          class_filter_type, include,

                          class_filter_array, array( 'folder' ),

                          sort_by,           $node.sort_array ) ) }

 

   {* Check if this node(folder) is the one that was accessed: *}

   {section show=eq( $:item.node_id, $node.node_id )}

 

       {* Display the folder as "open". *}

       <b>

          <a href={concat( "/content/view/full/", $:item.node_id, "/" )|ezurl}>

             <img src={"folder_open.png"|ezimage} alt="" /> {$:item.name}

          </a>

       </b>

       <br />

 

       {* Loop through all the nodes(links) within this folder. *}

       {section loop=fetch( content,

                            list,

                            hash( parent_node_id,    $:item.node_id,

                                  class_filter_type, include,

                                  class_filter_array, array( 'link' ),

                                  sort_by,           $:item.sort_array ) ) }

 

           {* Indent the stuff that comes next (creates a sub-level effect). *}

 

              

 

           {* Display the name of each link as a link. *}

           <a href="{$:item.object.data_map.location.content}" target="_blank">

               <img src={"link.png"|ezimage} alt="" /> {$:item.name}

           </a>

           <br />

 

       {* End of link-list loop. *}

       {/section}

 

   {* Else: this is not the node(folder) that was accessed. *}

   {section-else}

 

       {* Display the folder as "closed" (and don't list the contents). *}

       <b>

          <a href={concat( "/content/view/full/", $:item.node_id, "/" )|ezurl}>

             <img src={"folder_closed.png"|ezimage} alt="" /> {$:item.name}

          </a>

       </b>

       <br />

 

   {* End of if/else structure. *}

   {/section}

 

{* End of sub-folder loop. *}

{/section}

As you can see, we've added the icons and indented the links. In addition, we've duplicated the code that displays the name (and the icon) of the folder that is being listed by the outer loop. This is done in order to be able to display different icons depending on the state of the folder (the "folder_open" icon will be displayed adjacent the folder being accessed, the "folder_closed" icon will be displayed next to all other folders). The "section-else" statement acts as an ELSE branch. At this point, when the the "Educational sites" is clicked, the browser should display something that resembles the following screenshot:

That's it. We've created a simple/generic tree navigator that could be easily altered to function in other kind of contexts.