Go to primary content
Oracle® Application Express Application Builder User's Guide
Release 5.0
E39147-04
  Go To Table Of Contents
Contents
Go To Index
Index

Previous
Previous
 
Next
Next
 

7.6 Managing Pages in a Database Application

A page is the basic building block of an application. When you build an application in Application Builder, you create pages that contain user interface elements, such as tabs, lists, buttons, items, and regions.

7.6.1 About Adding Pages to a Database Application

You add a page to an existing page in a database application by running the Create Page Wizard. You can access this wizard by:

7.6.2 Available Pages Types When Running the Create Page Wizard

Table 7-17, "Available Pages Types When Running the Create Page Wizard" lists the types of pages you can create when running the Create Page Wizard. The supported page types differ depending the selected user interface (for example, Desktop and jQuery Mobile Smartphone).

Table 7-17 Available Pages Types When Running the Create Page Wizard

Page Type Description Desktop jQuery Mobile Smartphone

Access Control

Creates a page containing an access control list, enabling developers to control access to an application, individual pages, or page components.

See Also: "Controlling Access to Applications, Pages, and Page Components"

Available

Available

Blank Page

Creates a page with no built-in functionality.

Available

Available

Calendar

Generates a calendar with monthly, weekly, and daily views.

See Also: "Creating Calendars"

Available

Available

Chart

Enables you to create HTML5 and Flash graphical charts.

See Also: "Creating Charts"

Available

Available

Data Loading

Creates a new data loading wizard allowing the end user to manage the loading of data into a table to all schemas for which the user has privileges

See Also: "Creating Applications with Data Loading Capability"

Available

Not available

Feedback Page

Adds a feedback page. Feedback is the process of gathering real-time comments, enhancement requests, and bugs from your application users.

See Also: "Managing Feedback"

Available

Available

Form, Form and Report on Web Service

Creates a page with items based on a Web service definition. This wizard creates a user input form, a process to call the Web service, a submit button, and displays the results returned in a report.

See Also: "Creating an Input Form and Report on a Web Service"

Available

Available

Form, Form on a Procedure

Builds a form based on stored procedure arguments. Use this approach when you have implemented logic or Data Manipulation Language (DML) in a stored procedure or package.

Available

Available

Form, Form on a SQL Query

Creates a form based on the columns returned by a SQL query such as an EQUIJOIN.

Available

Not available

Form, Form on a Table or View

Creates a form that enables users to update a single row in a database table. You can choose a table on which to build a form.

Available

Available

Form, Form on a Table with List View

Creates a form and list view that enables users to update a single row in a database table. You choose the table on which to build the form and select the column to be used for displaying text in the List View.

Note: Desktop applications do not support this report format.

Not available

Available

Form, Form on a Table with Report

Creates two pages. One page displays a report. Each row provides a link to the second page to enable users to update each record. You can select the table on which to build the report and form.

Note: This wizard does not support tables having more than 127 columns. Selecting more than 127 columns generates an error.

Available

Available

Form, Form on Web Service

Creates a page with items based on a Web service definition. This wizard creates a user input form, a process to call the Web service, and a submit button.

See Also: "Creating a Form on a Web Service"

Available

Available

Form, Master Detail Form

Builds a two page report and form combination. On the first page, users select a row to update. On the second page, users can update the selected table or view and its associated detail. You choose the tables on which to build the master report and detail form.

See Also: "Managing Master Detail Forms"

Available

Not available

Form, Summary Page

Creates a read-only version of a form. Typically used to provide a confirmation page at the end of a wizard.

Available

Available

Form, Tabular Form

Creates a form to perform update, insert, and delete operations on multiple rows in a database table. You choose a table on which to build the form.

See Also: "Managing Tabular Forms"

Available

Not available

Global Page

A global page (previously referred to as Page 0) functions as a master page.

See Also: "Creating a Global Page to Display Components on Every Page"

Available

Available

Login Page

Creates a login page.

See Also: "Creating a Login Page"

Available

Available

Map Chart

Creates a Flash map based on the AnyChart AnyMap Interactive Maps Component.

See Also: "Creating Maps"

Available

Not available

Plug-ins

Creates a new page based on a region type plug-in. Plug-ins enable developers to declaratively extend, share, and reuse the built-in types available with Oracle Application Express.

See Also: "Importing a Plug-in from the Plug-in Page"

Available

Available

Report, Classic Report

Formatted result of a SQL query. You can choose a table on which to build a report, or provide a custom SQL SELECT statement or a PL/SQL function returning a SQL SELECT statement. For assistance in writing the SQL query, click the Query Builder button.

See Also: "Understanding the Difference Between Interactive and Classic Reports" and "Editing Classic Reports in Component View"

Available

Not available

Report, Column Toggle Report

Creates a responsive report for mobile applications. By default, column toggle reports are created with all columns set to the same priority. However, the developer can edit the report column attributes and rank columns by importance. Columns with a lesser priority displays at narrower widths. The report includes a Columns button which enables end users to select which columns they want to view.

Note: Desktop applications do not support this report format.

See Also: "Developing Reports"

Not available

Available

Report, Interactive Report

Formatted result of a SQL query. Creates an interactive report based on a custom SQL SELECT statement you provide. For assistance in writing the SQL query, click the Query Builder button. Interactive reports are only supported on Desktop pages and you can only define one interactive report per page. End users can customize the report layout and data displayed by selecting options on the Actions menu.

Note: jQuery Mobile Smartphone does not support interactive reports.

See Also:"Understanding the Difference Between Interactive and Classic Reports," "Customizing Interactive Reports as an End User," and "Editing Interactive Reports in Component View"

Available

Not available

Report, List View

List View is optimized to display data and provide easy navigation on Smartphones.

Creates a page that contains the formatted result of a SQL query. You choose a table on which to build the List view and select a database column to be used for the List view entry.

Note: Desktop applications do not support this report format.

Not available

Available

Report, Reflow Report

Creates a responsive report for mobile applications. When there is not enough space available to display the report horizontally, the report works by collapsing the table columns into a stacked presentation that looks like blocks of label and data pairs for each row.

Note: Desktop applications do not support this report format.

See Also: "Developing Reports"

Not available

Available

Report, Report on Web Service

Creates a report on a Web Service result.

See Also: "Implementing Web Services"

Available

Available

Tree

Creates a tree to graphically communicate hierarchical or multiple level data and optionally navigating to a page or URL specific to each tree node.

See Also: "Creating Trees"

Available

Not available

Wizard

Create a wizard.

Available

Available


7.6.3 Creating a Page from the Application Home Page

To create a page from the Application home page:

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

  2. Select an application.

    The Application home page appears.

  3. Click the Create Page button.

  4. For Create a Page:

    1. User Interface - Select a user interface for the page.

    2. For Select a page type, select the type of page you want to create. See Table 7-17, "Available Pages Types When Running the Create Page Wizard".

    3. Click Next.

  5. Follow the on-screen instructions.

7.6.4 Creating Dialog Pages

This section describes how to create dialog pages.

7.6.4.1 About Supported Dialogs

Oracle Application Express includes support for dialog pages. Modal and non-modal dialog pages are only supported if the current application theme contains at least one page template of template type Dialog Page. When you create a new page, the wizard prompts you to select a Page Mode. The Page Mode determines if the page is a normal application page or a dialog (that is, a modal dialog, or a non-modal dialog). Oracle Application Express supports two types of dialog pages:

  • Modal Dialog - A modal dialog is an overlay window positioned within the within the same browser window. A modal dialog remains active and focused until the user has finished with it and closes it. While a modal dialog is active, the user is unable to interact with the rest of the page until the dialog is closed.

  • Non-modal Dialog - A non-modal dialog displays a separate popup browser window. A user can interact with a non-modal dialog and content on the page. Use a non-modal dialog when the requested information is not essential to continue. This type of window can be left open while work continues elsewhere.

7.6.4.2 Using a Dialog Page Template

Oracle Application Express includes dialog page templates in the Universal Theme - 42. When you set the Page Mode to either Modal or Non-Modal, Oracle Application Express automatically uses the default dialog page template. This section describes how to create a dialog template if your theme does not include one and how to edit dialog template attributes.

7.6.4.2.1 Creating a Dialog Page Template

If you are using an existing application and the theme does not contain such a dialog page template, then you must create one. While you can create one from scratch, the easiest option is to copy an existing dialog template.

To create a dialog page template:

  1. Copy the dialog page template from the Sample Database application:

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

    2. Select the application to which you want to copy the template.

    3. Click Shared Components.

    4. Under User Interface, select Templates.

    5. Click Create.

    6. In the Create Template Wizard:

      • Template Type - Select Page and click Next.

      • Creation Method - Select As a Copy of an Existing Template and click Next.

      • Copy From - Select Sample Database Application and click Next.

      • Identify Theme - Select the theme you are copying from and the theme you are copying to and click Next.

      • New Template - Locate the Modal Dialog template. Under Copy, select Yes.

      • Select Create Copy Page Templates.

  2. Verify the dialog page template is active in the current theme. See "Selecting a Default Page Template."

7.6.4.2.2 About Defining Dialog Page Template Attributes

The dialog page template contains JavaScript function calls that handle the initialization, closure, and cancellation of a dialog page. To learn more about configuring these template attributes, see "Required Dialog Page Template Attributes."

7.6.4.3 Defining a Page as a Dialog in Component View

To create a dialog page you must set the Page Mode to either Modal Dialog or Non-modal Dialog. You can configure the page mode when running the Create Page Wizard or by editing the page attributes.

To define a page as a dialog in Component View:

  1. Edit the page attributes. See "Viewing Page Attributes in Component View."

  2. Set Page Mode to Modal Dialog and Non-Modal Dialog.


    Tip:

    You can configure the Page Mode by editing the page attributes or when running the Create Page Wizard.

  3. Define the page-level Dialog attributes. See "Dialog."

7.6.4.4 Defining a Page as a Dialog in Page Designer

To define a page as a dialog in Page Designer:

  1. Edit the page attributes. See "Editing Page Attributes in Page Designer."

  2. Define the page-level Dialog attributes. See "Configuring Dialogs Attributes in Page Designer."

7.6.4.5 Generating a Cancel Dialog Dynamic Action on the Dialog Page

If your dialog page contains a Cancel button, then you must generate a dynamic action based upon the Click of that button, with its True Action event being set to Cancel Dialog. This dynamic action will use the cancellation JavaScript call contained in the page template (apex.navigation.dialog.cancel) to handle the cancelling the dialog.

7.6.4.6 Generating a Close Dialog Page Process on the Dialog Page

You close a dialog page in Oracle Application Express by creating a Close Dialog page process. In previous releases, this page process was referred to as a Close Popup Window. This dialog will use the closure JavaScript call contained in the page template (apex.navigation.dialog.close), to handle the closing of the dialog. The page process also supports the return of dialog page items, which you may wish to reference on the parent page. To view examples, edit any of the Dialog pages in the Sample Database Application.


Tip:

You can also close a dialog page with the Close Dialog dynamic action. Both the dynamic action and the process support returning dialog page items. Use the page process when the page needs to be submitted and use the dynamic action when the page does not need to be submitted. Both end up calling the closure JavaScript call. Alternatively, you can create a page branch, which will close a dialog page and redirect to the page specified in the branch.

7.6.4.7 About Branching with Dialog Pages

You can open dialog pages using buttons or links. Dialog pages support the following branching options:

  • Dialog page to dialog page.

    You can branch from one dialog page to another dialog page if:

    • Both pages have the same Page Mode, for example Modal Dialog and the dialog Chained attribute is set to Yes. Setting the Chained attribute to Yes enables support for chained or nested dialogs such as the dialogs that appear many internal Application Express wizards. Chained or nested dialogs enable you to re-use a dialog window to display each page.

  • Dialog page to Normal page.

    • When branching from a dialog page to a normal page, the dialog page is closed and the user navigates to a new page in the browser. The new page can be the parent (or launching) page or another Normal page in an application.

7.6.4.8 Handling Refresh Actions on Parent Page

If you have generated a Close Dialog page process on the dialog page, you must implement refresh actions on the parent page using the new Dialog Closed dynamic action event type. You can use the set type Dialog Return Item when creating a Set Value True Action, to set a single value, based on the return item of a dialog.

Consider the following example. Edit the Products in the Sample Database Application. (See "Products Page") On the Products page, the Create Product button has an associated dynamic action that launches the dialog. Closing of the dialog triggers the Dialog Closed dynamic action. You can use this type of dynamic action for whatever True Actions you wish to define. In this example, it refreshes the report on the parent page and submits the page.


Tip:

For a partial page refresh of a parent page, implement the close dialog with dynamic action (for example, for report and form pages where you want to edit data in a modal dialog form and only want the report refreshed on close). In contrast, branching is the best approach if you have a multi step modal wizard or if you have several possible target pages when closing the dialog.

7.6.5 About Managing Pages in Page Designer

Page Designer is a full featured Integrated Development Environment (IDE) designed to maximize developer productivity in maintaining application pages. The Page Designer window is divided into three main sections.

  • Tree Pane - The Tree pane displays in the left column and features the following tree views: Rendering, Dynamic Actions, Processing, and Shared Components.

  • Grid Layout - Grid Layout displays in the center column. Grid Layout is a visual representation of the regions, items, and buttons that define a page. You can edit the position of page components by dragging and dropping them. You can also add new regions, items, and button by dragging and dropping them from Gallery.

  • Property Editor - The Property Editor displays in the right column. Use the Property Editor to edit the properties of the component currently selected in the Tree Pane or Grid Layout.


Tip:

The Rendering tree and Grid Layout are two different representations of the regions, items, and buttons that define a page.

7.6.6 About Managing Pages in Component View

Unlike Page Designer, Component View does not offer a visual representation of a page or support the dragging and dropping of page components. To preview the position of components on a page, you must run it.

The Component View window is divided into the following sections:

  • Page Rendering. Page rendering is the process of generating a page from the database. Use the Page Rendering section to modify controls that impact the rendering of a page, including page attributes, regions, buttons, items, page rendering computations, and page processes.

  • Page Processing. Page processing is the process of submitting a page. A page is typically submitted when a user clicks a button. Use the Page Processing to specify application logic such as computations, validations, processes, and branches. In general, the Application Express engine runs this logic in the order it appears on the page.

  • Shared Components. The Shared Components section lists common components that can be used by one or more pages within an application.

7.6.7 About Copying Database Application Pages

You can copy a page from the current application or from another application. During the copy process, you can also copy shared components or change mappings to shared components in the target application.

7.6.8 About Copying Pages Between User Interfaces


Note:

Oracle does not support copying Desktop pages to jQuery Mobile Smartphone pages or copying jQuery Mobile Smartphone pages to Desktop pages.

The Copy Page Wizard enables you to copy a page to a different user interface. During the copying process, the user can select the user interface for the new page. If the application contains a Desktop and a Mobile theme, both user interface options display.

Oracle does not support copying Desktop pages to jQuery Mobile Smartphone pages or copying jQuery Mobile Smartphone pages to Desktop pages. Attempting to copy the following Desktop pages to a Mobile user interface results in an error:

  • Interactive report

  • Flash map

  • Flash chart

  • Tree region

7.6.9 About Deleting Database Application Pages

Deleting a page deletes the corresponding tabs, breadcrumbs, and list entries. You can only delete unlocked pages or pages that you have locked.