Trees to display hierarchical information in a clear, easy-to-use format. You can create a tree control using a SQL query.
Tip:
In Oracle Application Express release 5.0, you can continue to edit existing jsTree regions, but no longer have the ability to create them. See "About Trees."
Topics:
See Also:
To view tree examples, install the packaged application, Sample Trees.
See "Managing Packaged Applications in a Full Development Environment."
App Builder includes a built-in wizard for generating a tree that displays a hierarchical view. With Oracle Application Express release 5.0, trees use a new APEX Tree implementation. Like the legacy jsTree region, this new tree implementation is a JavaScript-based, cross browser tree component that features optional keyboard navigation, and optional state saving. The APEX Tree shares the same functionality as jsTree, with the exception that the Template attribute does not apply to the new tree. The look, usability, and accessibility is also improved with the new implementation. You can continue to edit existing jsTree regions, but no longer have the ability to create them.
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.
Tip:
The creation of APEX Tree regions is only supported on pages using a Desktop user interface.
Previous releases of Oracle Application Express supported the creation of jsTree tree regions. Although existing trees are still supported, Oracle Application Express no longer supports the creation of jsTree tree regions. Oracle Application Express now supports the generation of an APEX Tree tree region. APEX Tree is a JavaScript based, cross browser tree component, similar to jsTree.
This section describes how to manage trees in Page Designer.
Topics:
A tree is based on a query and returns data that can be represented in a hierarchy. When you create a tree using the Create Page Wizard, the wizards generates this hierarchical query for your based on the options you select.
To create a tree on a new page:
On the Workspace home page, click the App Builder icon.
Select an application.
Click Create Page.
For Create a Page:
User Interface - Select Desktop.
Select a page type - Select Tree.
Click Next.
For Page Attributes, specify the following:
Page Number - Specify the page on which the tree should be created.
Page Name - If the tree will be created on a new page, enter the page name.
Page Mode - Select a page mode.
Page Group - Select the name of the page group you would like to associate with this page. This option will only be visible when the application contains groups.
Region Template - Select a region template for the tree region.
Region Name - Enter a name for the region to contain the tree.
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.
Click Next.
For Navigation Preference, specify the type of navigation to include on this page and click Next. The navigation options (for example, navigation menu or tabs) depends upon the current application theme.
For Table/View Owner and Name:
Table/View Owner - Select the owner of the table from which the tree will be based.
Table / View Name - Select the table or view which contains the columns to be included in the master page.
Click Next.
For Query, identify the column you want to use as the ID, the Parent ID, and text that should appear on the nodes:
ID - Select the column to use as the ID.
Parent ID - Select the column to use as the parent ID.
Node Text - Select the text to appear on the tree nodes.
Start With - Select the column to be used to specify the root of the hierarchical tree query.
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.
Click Next.
For Where and Order by, specify the following:
Where Clause - Enter an optional WHERE
clause. For example:
ename='JONE'
Order Siblings By - Select the order siblings by column, such as ENAME
. The default value is based on the Node Text column selected.
Click Next.
For Tree Attributes, specify the following:
Include Buttons - Select the buttons to include.
Selected Node Page Item - Select the page or application item to hold the selected node value. This item can be used to save the tree state, by holding the value of the last selected node. The value of the selected node can be saved to the selected item using the node link attribute or a page process. When the tree is reloaded, the tree opens to the last selected tree node.
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.
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
Click Next.
Confirm your selections and click Create.
Tip:
The creation of APEX Tree regions is supported on pages using a Desktop user interface.
Important:
Legacy Component View is disabled by default. To enable Legacy Component View, edit your user preferences. See "Editing User Preferences".
Legacy Component View is a legacy user interface for editing application pages. Oracle recommends developers use Page Designer instead of Legacy Component View. Legacy Component View groups user interface elements and application logic by component type. Unlike Page Designer, Legacy Component View does not offer a visual representation of a page or support the dragging and dropping of page components.
Tip:
To assist developers with the transition to Page Designer, Page Designer includes a Component View tab. Similar in appearance to Legacy Component View, the Page Designer Component View tab presents user interface elements and application logic by component type. However, when you click a component and the Property Editor highlights the corresponding attribute in the right pane. See "Component View Tab".
Developers can create and edit trees in Component View.
To create a tree in component view:
Navigate to the page. See "Viewing a Page in Legacy Component View."
Under Region, click the Create icon.
The Create Region Wizard appears.
Select Tree and click Next.
For Display Attributes:
Title - Enter a title for the region. This title displays if the region template you choose displays the region title.
Region Template - Choose a template to control the look of the region.
Parent Region - Defines the parent region to which the new region belongs to.
Display Point - Identify a display point for this region. Two types of display points exist: page template positions and page body positions. To learn more about an attribute, see field-level Help.
Sequence - Specify the sequence for this component. The sequence determines the order of evaluation.
Click Next.
For Table/View Owner and Name:
Table/View Owner - Select the owner of the table from which the tree will be based.
Table / View Name - Select the table or view which contains the columns to be included in the master page.
Click Next.
For Query, identify the column you want to use as the ID, the Parent ID, and text that should appear on the nodes:
ID - Select the column to use as the ID.
Parent ID - Select the column to use as the parent ID.
Node Text - Select the text to appear on the tree nodes.
Start With - Select the column to be used to specify the root of the hierarchical tree query.
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.
Click Next.
For Where and Order by, specify the following:
Where Clause - Enter an optional WHERE
clause.
Order Siblings By - Select the columns by which siblings are ordered.
Click Next.
For Tree Attributes, specify the following:
Include Buttons - Select the buttons to include.
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.
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.
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
Click Next.
Confirm your selections and click Create Region.