The tree component used in the Business Service Console contains some small graphics, so the tree itself is embedded in a table. Please use the snippet in Example 25 as a boilerplate for your tree:

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%@ taglib prefix="syswf" uri="http://systinet.com/jsp/syswf" %>

<!-- The table, that laids out the tree and graphics -->
<table name="myMenu" id="myMenu" border="0"><tr>
    <td><img src="gfx/0.gif" alt="" width="1" height="400" border="0"></td>
    <td valign="top">

    <!-- The div that identifies the scrollable portion of the pane -->
    <div id="divCont" name="divCont" onScroll="saveScrollInfo('tree',this,'tree');">

    <!-- This area is identified as a tree to other scripts and components -->
    <div id="tree" name="tree"/>
    <script>
        <!-- Tree declaration. Use names for variables, that suit to your needs -->
        var treeRoot = new JSTreeMenu("root",
            "Root",
            "<syswf:control targetTask="/root" 
             targetDepth="${sessionStack.currentDepth - 1}" mode="script" />",
            "root.gif",
            "root.gif",
            "");

        <!-- Here go the individual nodes of the tree -->

        <!-- This is the finalization of the tree, refocusing the 
        element that corresponds  to the displayed page -->
        redrawTree();
        <c:if test="${not empty focus}">
            publish.focus("<c:out value="${focus}"/>");
        </c:if>
    </script>
    </div>
    </div>
    </td></tr>
</table>

	Note
	The tree is enclosed in the <div> tags. The framework JavaScripts look for its IDs and identify areas that are scrollable or contain the tree. Please do not alter this pattern and the values of the IDs when creating your trees or the framework will not recognize your component properly.

The parameters for the JSTreeMenu constructor are:

            new JSTreeMenu(id, caption, onClickAction [, collapsedImage [, expandedImage ] ] )

Add individual items that should be displayed in the tree as separate JSTreeMenuItem controls and link them to the desired parent. You can attach JavaScript code for each of the items. In most cases the action will simply go over to the task represented by the item in the navigation tree.

Start by creating a new tree item like this:

var subitem = new JSTreeMenuItem(
    "subitem1",
    "SubItem 1",
    "<syswf:control targetTask="/root/someTask" 
       targetDepth="${sessionStack.currentDepth - 1}" 
       mode="script" />",
    "provider.gif",
    "provider.gif",
    "")

The parameters for the JSTreeMenuItem constructor are:

new JSTreeMenuItem(id, caption, onClickAction [, collapsedImage [, expandedImage ] ] )
            

Each control should have an unique id as the first parameter.

If you want the Business Service Console to open a new page, use the standard way to go to a given task:

<syswf:control targetTask="/browse" targetDepth="${sessionStack.currentDepth - 1}" mode="script" />

Note the sessionStack.currentDepth assignment. It causes the new task to replace the current one in the task history bar in the page header.

Then you need to add the newly created item to its parent node. In this example, we add the item underneath the root node:

treeRoot.add(subitem);

When the task is entered as a result of clicking on a tree node, the whole page is reloaded, including the tree itself. Because the tree is reconstructed as well, you need to have code in the displayed task's JSP that passes the id of the tree node that is going to be focused. Usually this id is the id of the Tree node that launched the page's task. Use the focus parameter to pass the id into the tree Web UI component as shown in Example 26:

<!-- The tree area will be made resizable, by wrapping it between appropriate header
     and footer
-->
<syswf:wrap headerTemplate="design/resizableFrameHeader.jsp" 
   footerTemplate="design/resizableFrameFooter.jsp" >
    <!-- Includes the browse tree into the page, place your tree 
     component ID into the "name" attribute -->
    <syswf:component name="browseTree" prefix="browseTree">
        <!-- Substitute your node's ID for the value -->
        <syswf:param name="focus" value="subitem1"/>
    </syswf:component>
</syswf:wrap>

To make it possible to adjust the width of the navigation tree, simply wrap the tree between resizableFrameHeader and resizableFrameFooter tags:

<!-- The tree area will be made resizable, by wrapping it between appropriate header
     and footer
-->
<syswf:wrap headerTemplate="design/resizableFrameHeader.jsp" 
   footerTemplate="design/resizableFrameFooter.jsp" >
    <!-- Includes the browse tree into the page, place your tree 
     component ID into the "name" attribute -->
    <syswf:component name="browseTree" prefix="browseTree">
        <!-- Substitute your node's ID for the value -->
        <syswf:param name="focus" value="subitem1"/>
    </syswf:component>
</syswf:wrap>