Skip Headers
Oracle® Application Express Application Builder User's Guide
Release 4.1

Part Number E21674-05
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Index
Index
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
PDF · Mobi · ePub

Creating Trees

Application Builder includes a built-in wizard for generating a tree. Trees utilize 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:

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, this item can be used 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.

        Note that these options only appear if you select the Existing Application Item link option.

      • Nothing

    5. Click Next.

  12. Confirm your selections and click Finish.

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.

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 item label changes to red when you pass your cursor over it and the cursor changes to an arrow and question mark. See "About Field-Level Help".

  4. Click Apply Changes.