10.8 Creating Trees

Application Builder includes a built-in wizard for generating a tree. Trees use jsTree, a JavaScript-based, cross browser tree component that features theme support, optional keyboard navigation, and optional state saving. You can create a Tree from a query that specifies a hierarchical relationship by identifying an ID and parent ID column in a table or view. The tree query utilizes a START WITH .. CONNECT BY clause to generate the hierarchical query.

Topics:

Tip:

The creation of jsTree regions is only possible on pages using a Desktop user interface.

10.8.1 Creating a Tree

To create a tree using a wizard:

  1. On the Workspace home page, click the Application Builder icon.

  2. Select an application.

  3. Click Create Page and click Next.

  4. For Page Type, select Tree.

  5. For Page Attributes, specify the following:

    1. Page Number - Specify the page on which the tree should be created.

    2. Page Name - If the tree will be created on a new page, enter the page name.

    3. Region Template - Select a region template for the tree region.

    4. Region Name - Enter a name for the region to contain the tree.

    5. Breadcrumb - Select whether you want to use a breadcrumb navigation control on your page, and which breadcrumb navigation control you want to use. If you select Breadcrumb, enter the following:

      • Entry Name - Enter a name for the breadcrumb entry.

      • Select Parent Entry - Select a parent entry.

    6. Click Next.

  6. For Tab, specify whether the page should have tabs and click Next.

  7. For Tree Templates, select a tree template and click Next.

  8. For Table/View Owner and Name, select the table or view owner and name on which to base the tree and click Next.

  9. For Query, select the columns to include in the tree:

    1. ID - Select the column to use as the ID.

    2. Parent ID - Select the column to use as the parent ID.

    3. Node Text - Select the text to appear on the tree nodes.

    4. Start With - Select the column to be used to specify the root of the hierarchical tree query.

    5. Start Tree - Choose how to start your query. Options include:

      • Based on Existing Item - Select an existing application or page item.

      • Based on a SQL Query - Enter a SQL query that returns a single row or single column.

      • Based on a Static Value - Enter a static value.

      • Value is NULL.

    6. Click Next.

  10. For Where and Order by, specify the following:

    1. Where Clause - Enter an optional WHERE clause.

    2. Order Siblings By - Select the columns by which siblings are ordered.

    3. Click Next.

  11. For Tree Attributes, specify the following:

    1. Include Buttons - Select the buttons to include.

    2. Selected Node Page Item - Can be used to hold the selected node value. If you select an application item, you can use this item to save the tree state, by holding the last selected node of the tree.

    3. Tooltip - Displays a tooltip when the mouse hovers over a leaf node. Options include:

      • Static Assignment - Specifies a static value to be used as the tooltip text. Substitution strings can be used in the static text, to incorporate information from the SQL query in the tooltip text. The following substitution strings can be used:

        #VALUE# - refers to the value of ID column.

        #TITLE# - refers to the value of Node Text column

        #LINK# - refers to the value of Link option

      • Database Column - Select the column to use as the tooltip text.

    4. Link Option:

      • Existing Application Item - Makes the leaf node text a link. If you select this option, you must specify a page to link to and an existing application item to link leaf node text.

        This option only appears if you select the Existing Application Item link option.

      • Nothing

    5. Click Next.

  12. Confirm your selections and click Finish.

10.8.2 Editing a Tree as a Developer

By default, a tree does not have focus and node links are activated with a single click action. This section describes how developers can customize a tree by editing tree attributes.

10.8.2.1 Accessing the Tree Attributes Page

Developers can customize a tree by editing attributes on the Tree Attributes page.

To access the Tree Attributes page:

  1. Navigate to the appropriate Page Definition. See "Accessing the Page Definition".

  2. Access the Tree Attributes page:

    • Tree view - Right-click the Region name and select Edit Tree.

    • Component View - Under Regions, click the Tree link next to the name of the tree region you want to edit.

    The Tree Attributes page appears and is divided into the following sections:

    • Display Settings enable you control a tree's appearance and functionality. Use these settings to define a tree template, tooltip, a page item to hold the last selected node value for saving tree state, determine whether the tree has focus on page load, and what action activates node links on a tree.

    • Query enables you to edit the SQL query underlying the tree. The query must be in the following format:

      SELECT status, level, name, icon, id, tooltip, link 
FROM ... 
WHERE ... 
START WITH... 
CONNECT BY PRIOR id = pid 

ORDER SIBLINGS BY ...

  3. To learn more about a specific attribute, click the item label.

    When help is available, the cursor changes to an arrow and question mark when you pass the cursor over an item. See "About Field-Level Help".

  4. Click Apply Changes.

10.8.3 About Trees Created as Shared Components

Previous releases of Oracle Application Express supported the creation of trees as Shared Components. Although existing trees are still supported, Oracle Application Express no longer supports the creation of trees as Shared Components.

Oracle Application Express now supports the generation of a jsTree tree region. jsTree is a JavaScript based, cross browser tree component. It is packaged as a jQuery plug-in. To learn more, see "Creating Trees".

Topics:

10.8.3.1 Editing an Existing Tree

Once you create a tree as a Shared Component, you can edit it on the Trees page.

To edit a tree created as a Shared Component:

  1. Navigate to the Trees page:

    1. Navigate to the Workspace home page.

    2. Click the Application Builder icon.

    3. Select an application.

    4. On the Application home page, click Shared Components.

    5. Under Navigation, click Trees.

      The Trees page appears.

      You can change the appearance of the page by using the Search bar at the top of the page. See "Customizing Interactive Reports".

  2. Select a tree.

    The Edit Tree page appears.

  3. Edit the appropriate attributes.

  4. To learn more about a specific item on a page, click the item label. See "About Field-Level Help".

  5. Click Apply Changes.

10.8.3.1.1 About Navigation Alternatives

The Edit Tree page is divided into the following sections: Name, Query, Before and After, Static Node Templates, Dynamic Templates, Node Text Templates, and Link Templates.

You can access these sections by scrolling down the page, or by clicking a navigation button at the top of the page. When you select a button at the top of the page, the selected section appears and all other sections are temporarily hidden. To view all sections of the page, click Show All.

10.8.3.2 Accessing Existing Tree Reports

You can view the Trees Utilization and Tree History reports by clicking the appropriate tab at the top of the Trees page.

To view tree reports:

  1. Navigate to the Trees page:

    1. Navigate to the Workspace home page.

    2. Click the Application Builder icon.

    3. Select an application.

    4. On the Application home page, click Shared Components.

    5. Under Navigation, click Trees.

  2. Click the appropriate tab:

    • Utilization

    • History

You can change the appearance of the page by using the Search bar at the top of the page. See "Customizing Interactive Reports".

To learn more, see the sections that follow.

Note:

The Utilization and History buttons only appear after you have created a tree.

10.8.3.2.1 Tree Utilization

Click Utilization on the Trees page to access the Tree Utilization report. This report displays all trees included in the current application. To edit a tree, select the tree name.

10.8.3.2.2 Tree History

Click History on the Trees page to view changes to trees by developer and date.