Creating Dialog Pages
Oracle Application Express includes support for modal and non-modal 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.
- About Supported Dialogs
- Using a Dialog Page Template
- Defining a Dialog Page as a in Page Designer
- Generating a Cancel Dialog Dynamic Action on the Dialog Page
- Generating a Close Dialog Page Process on the Dialog Page
- About Branching with Dialog Pages
- Handling Refresh Actions on Parent Page
Parent topic: Managing Pages in a Database Application
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.
Parent topic: Creating Dialog Pages
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.
Parent topic: Creating Dialog Pages
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:
-
On the Workspace home page, click the App Builder icon.
-
Select the application to which you want to copy the template.
-
Click Shared Components.
-
Under User Interface, select Templates.
-
Click Create.
-
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."
Parent topic: Using a Dialog Page Template
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.
See Also:
Parent topic: Using a Dialog Page Template
Defining a Dialog Page as a in Page Designer
To define a page as a dialog in Page Designer:
See Also:
Parent topic: Creating Dialog Pages
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:
Parent topic: Creating Dialog Pages
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:
Parent topic: Creating Dialog Pages
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.
-
Parent topic: Creating Dialog Pages
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.