6.6 Managing Pages in a Database Application

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

Tip:

You view and manage application pages in App Builder using either Page Designer or Component view. To learn more, see "Managing Pages in Page Designer" or "Managing Application Legacy Components."

Topics:

See Also:

"Using Application Utilities"

6.6.1 About Adding Pages to a Database Application

Developers add pages to an existing database application by running the Create Page Wizard. You can access this wizard as follows:

On Application home page — Click Create Page. See "Creating a Page from the Application Home Page."
Viewing a page in Page Designer — Click Create on the Page Designer Developer toolbar and select Page. See "Page Designer Toolbar"
Viewing a page in Component View — Click Create on the Component View navigation bar and select Page. See "Component View Navigation Bar."

6.6.2 Page Types When Running the Create Page Wizard

When you create an application, you choose a target user interface. The user interface you select determines the available page types. Not all page types are supported by all user interfaces.

Available Page Types for Desktop Applications

If you are creating a desktop application, the Create Page Wizard supports the following page types.

Table 6-19 Create Page Wizard — Page Types for Desktop Applications

Page Type	Description	To Learn More
Blank Page	Creates a page with no built-in functionality.	Not applicable
Report	A report is the formatted result of a SQL query. Report options: Interactive Report Interactive Grid Classic Report Report and Form on Table Report on Web Service	See: "Developing Reports" "Understanding Report Types" "Report Options When Running the Create Page Wizard"
Form	Forms enable users to update a single row or multiple rows in a table. Form options: Report with Form on Table Editable Interactive Grid Single Page Master Detail Two Page Master Detail Form on a Table Form on a Procedure Form on a SQL Query Form on a Web Service Report and Form on a Web Service	See: "Creating a Form" "Understanding Form Types" "Form Options When Running the Create Page Wizard"
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 "Importing a Plug-in from the Plug-in Page"
Chart	Enables you to create graphical charts.	See "Creating Charts"
Calendar	Generates a calendar with monthly, weekly, and daily views.	See "Creating Calendars"
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 "Creating Trees"
Wizard	Creates a wizard.	Not applicable
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 "Creating Applications with Data Loading Capability"
Feedback Page	Adds a feedback page. Feedback is the process of gathering real-time comments, enhancement requests, and bugs from your application users.	See "Managing Feedback"
Access Control	Creates a page containing an access control list, enabling developers to control access to an application, individual pages, or page components.	See "Controlling Access to Applications, Pages, and Page Components"
Global Page	A global page (previously referred to as Page 0) functions as a master page.	See "Creating a Global Page to Display Components on Every Page"
Legacy Page	Legacy pages contains components Oracle still supports but does not recommend using. Options include: Tabular Form Legacy Master Detail AnyChart Chart Summary Page Legacy Calendar	See "Managing Application Legacy Components"

Available Page Types for Mobile Applications

If you are creating a mobile application, the Create Page Wizard supports the following page types.

Table 6-20 Create Page Wizard — Page Types for Mobile Applications

Page Type	Description	To Learn More
Blank Page	Creates a page with no built-in functionality.	Not applicable
Report	A report is the formatted result of a SQL query. Available report options include: List View Column Toggle Report Reflow Report Report on Web Service	See: "Developing Reports" "Understanding Report Types" "Report Options When Running the Create Page Wizard"
Form	Forms enable users to update a single row or multiple rows in a table. Available form options include: Report with List View on Table Form on a Table Form on a Procedure Form on a SQL Query Form on a Web Service Report and Form on a Web Service	See: "Creating a Form" "Understanding Form Types" "Form Options When Running the Create Page Wizard"
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 "Importing a Plug-in from the Plug-in Page"
Chart	Enables you to create graphical charts.	See "Managing Legacy Charts"
Calendar	Generates a calendar with monthly, weekly, and daily views.	See "Creating Calendars"
Wizard	Create a wizard.	Not applicable
Feedback Page	Adds a feedback page. Feedback is the process of gathering real-time comments, enhancement requests, and bugs from your application users.	See "Managing Feedback"
Access Control	Creates a page containing an access control list, enabling developers to control access to an application, individual pages, or page components.	See "Controlling Access to Applications, Pages, and Page Components"
Legacy Page	Legacy pages contains components Oracle still supports but does not recommend usings. Options include: AnyChart Chart Summary Page Legacy Calendar	See "Managing Application Legacy Components"

6.6.3 Creating a Page from the Application Home Page

To create a page from the Application home page:

On the Workspace home page, click App Builder.
Select an application.
The Application home page appears.
Click the Create Page button.
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 "Page Types When Running the Create Page Wizard."
3. Click Next.
Follow the on-screen instructions.

See Also:

6.6.4 Creating Dialog Pages

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.

Topics:

6.6.4.1 About Supported Dialogs

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 page. 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.

6.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.

Topics:

6.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:

Copy the dialog page template from the Sample Database application:
1. On the Workspace home page, click the App 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.
Verify the dialog page template is active in the current theme. See "Selecting a Default Page Template."

6.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. When you create a dialog page template you must define these and other Dialog Page Templates attributes.

6.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:

Edit the page attributes. View the page in Component View.
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.
Define the page-level Dialog attributes.

6.6.4.4 Defining a Page as a Dialog in Page Designer

To define a page as a dialog in Page Designer:

View the page in Page Designer:
1. On the Workspace home page, click the App Builder icon.
2. Select an application.
3. Select a page.
Page Designer appears.
In Page Designer locate the Appearance.
For Page Mode, select one of the following:
- Modal Dialog - The page is presented as a modal dialog. A modal dialog is an overlay window positioned within the viewport, which remains active and focused until the end user dismisses (closes) it. The underlying page is grayed out and the end user is prevented from interacting with the rest of the page until the dialog is closed.
- Non-Modal Dialog - The page is presented as a non-modal dialog. A non-modal dialog is an overlay window positioned within the viewport, where the end user can interact with the dialog, and content on the page that launched the dialog. A non-modal dialog can be used when the requested information is not essential to continue, work can continue elsewhere while the window is still open.
Edit other Appearance attributes as needed.

Tip:

To learn more about an attribute, see field-level Help.
Under Dialog, edit the appropriate attributes:
1. Width - Enter the width of the dialog, in pixels or a percentage. The substitution string #DIALOG_WIDTH# in the dialog initialization code of the page template is replaced with the value entered in this item. For a page using a Desktop user interface, the value is set in pixels, such as 500. However, for a page using the jQuery Mobile Smartphone user interface, the value is set in percent, such as 80%.
2. Height - Enter the height of the dialog, in pixels, for example, 500. The substitution string #DIALOG_HEIGHT# in the dialog initialization code of the page template is replaced with the value entered.
3. Maximum Width - Enter the maximum width of the dialog in pixels. The substitution string #DIALOG_MAX_WIDTH# in the dialog initialization code of the page template is replaced with the value entered in this item.
4. Attributes - Dialog support varies depending on the user interface of the page. A subset of dialog attributes are declaratively supported: height, width, and maximum width. To define any additional attributes for the dialog, enter the name/value pairings in a comma separated list. The substitution string #DIALOG_ATTRIBUTES# in the dialog initialization code defined at page template level, is replaced by any value(s) entered in this item.
5. CSS Classes - Enter classes to add to this component. You may add multiple classes by separating them with spaces.
6. Chained - Select Yes if this dialog is opened by another dialog, and should reuse the same dialog window. For example, if this dialog is part of a multiple page dialog wizard and you wish to reuse the dialog window for each step of the wizard. Select No if this dialog is opened by another dialog and should be opened in a new dialog window. For example, when this dialog is modal, and you wish to open it within a parent modal dialog window.
To save your changes, click Save.

6.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.

See Also:

"Managing Dynamic Actions"

6.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.

See Also:

6.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 parent (or launching) page or another Normal page in an application.

6.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.

To see an example, go to the Products page in the Sample Database Application. On the Products page, the Create Product button has an associated dynamic action that launches the dialog. Closing 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.

See Also:

6.6.5 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.

6.6.6 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

6.6.7 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.