9.3 Using Page Designer

Use Page Designer to view and edit database application pages.

Tip:

To view a list of keyboard shortcuts, click Alt+Shift+F1. Alternately, click the Help menu at the top of the page and select Shortcuts.

• Viewing a Page in Page Designer
  
• Searching for Pages
  
• Dragging and Dropping Tabs Between Panes
  
• Switching Between Three Pane and Two Pane Mode
  
• Accessing Property Editor
  
• Adding a Region, Item, or Button by Dragging and Dropping
  
• About Adding Components Using Gallery Context Menus
  
• Adding a Region, Item, or Button from the Rendering Tab
  
• Adding a Region, Item, or Button from the Component View Tab
  
• Copying a Region, Item, or Button
  
• Creating Pre-Rendering Branches, Computations, and Processes
  
• Creating Page Submission Branches, Validations, Computations, and Processes
  

See Also:

"Understanding Page Designer UI Elements" and "Viewing Help in Page Designer"

9.3.1 Viewing a Page in Page Designer

To view a page in Page Designer:

1. Navigate to the Workspace home page.
2. Click the App Builder icon.
3. Select an application.
4. Select a page.

   The default view, Page Designer appears.

   You preview a page by running it. Running an application page displays the rendered version as end users would see it.

See Also:

"Running a Page from Page Designer"

9.3.2 Searching for Pages

Description of the illustration pd_toolbar.png

The Page Selector is the first control in the Page Designer toolbar and displays the current page number. Use the Page Selector to search for pages within the current application.

To search for pages within an application:

1. 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.
2. On the Page Designer toolbar, click the Page Selector.

   The Page Finder appears.

3. Click the tabs at the top of the window to change the view:

   • Current User Interface - Displays pages in the current user interface.

   • Current Group - If the current page is associated with a group, this tab displays the pages associated with the current group.

   • All Pages - Displays all pages in the current application.

   • Recently Edited - Displays recently edited pages.

4. Enter search terms in the Search field and press ENTER or click Go.

   Search for page numbers, page names, user interface, or group names. The search is not case sensitive and supports regular expressions.

See Also:

"Running a Page from Page Designer" and "Creating Page Groups"

9.3.3 Dragging and Dropping Tabs Between Panes

By default, Page Designer displays three panes which contain one or more tabs. You can drag and drop tabs within a pane or between panes by selecting the pane heading (or icon) and then dragging and dropping it to a new location. To return to the default display, click Utilities on the Page Designer toolbar and select Layout and then Reset Layout.

To drag and drop tabs in Page Designer:

1. 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.
2. Select a tab heading (or icon) and then drag and drop it to a new location.

   In the following example, the Page Shared Components tab is selected and being moved within the left pane.

   
   Description of the illustration drag_drop_tabs.png
3. To return to the default display:
   1. On the Page Designer toolbar, click Utilities.
   2. Select Layout and then Reset Layout.

See Also:

"Understanding Page Designer UI Elements"

9.3.4 Switching Between Three Pane and Two Pane Mode

Use the Layout options on the Utilities menu on the Page Designer toolbar to switch between pane modes. Three Pane Mode (the default) displays the left pane, central pane, and the right pane. Two Pane Mode displays just the central pane and the right pane. A typical use case for accessing Two Pane Mode, is when you want to view just the Rendering tree and the Property Editor. To return to the default display, click Utilities on the Page Designer toolbar and then select Layout and then Reset Layout.

To hide and show Page Designer panes:

1. 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.
2. To select a page mode:
   1. On the Page Designer toolbar, click Utilities and then Layout.
      
      Description of the illustration pg_layout_menu.png

      The Layout menu has three options: Two Pane Mode, Three Pane Mode, and Reset Layout.

   2. From Layout, select one of the following:

      • Two Pane Mode - Displays just the central pane and the right pane.

      • Three Pane Mode (the default) - Displays the left pane, central pane, and the right pane.

3. To return to the default display:
   1. On the Page Designer toolbar, click Utilities.
   2. Select Layout and then Reset Layout.

9.3.5 Accessing Property Editor

The Property Editor displays in the right pane of Page Designer and displays all attributes for currently selected components.

To access Property Editor:

1. 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.
2. In either the left pane or the Layout tab, select components or controls to edit. Passing the cursor over a control or component, displays a tooltip that describes it.

   Tip:

   Once you select a component, press ALT+6 to navigate directly to the Property Editor. To learn more, see Oracle Application Express Accessibility Guide

   The Property Editor displays attributes for the selected component or control. As you select different components in either the left pane or the Layout tab, the Property Editor automatically updates to reflect the selected component. When you select multiple components, the Property Editor only displays common attributes. Updating a common attribute updates that attribute for all of the selected components.

   Tip:

   To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

See Also:

"Right Pane of Page Designer (Property Editor)"

9.3.6 Adding a Region, Item, or Button by Dragging and Dropping

Each application page can have buttons and fields (called items) which are grouped into containers called regions. You can add regions, items, and buttons to a page by dragging and dropping them from the Gallery.

To add a region, item, or button by dragging and dropping from the Gallery:

1. 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.
2. If needed, select the Layout tab in the central pane.
3. In the Gallery at the bottom of the central pane, locate the component or control you want to create.

   The Gallery lists all controls or components you can add to a page. Passing the cursor over a control or component displays a tooltip that describes it.

   Tip:

   In addition to dragging and dropping components from the Gallery, you can also right-click a component in the Gallery to view a context menu. Select Add To and then the location where you want to add the component.

4. Click and hold the mouse on the component to be created and drag it the desired location in the Layout tab.

   When the mouse is over the appropriate location, the Layout tab displays as a darkened yellow tile. Release the mouse to drop the component. You can only drop components into appropriate drop positions, as determined by the component type.

   Based on the type of component you add, Page Designer indicates what actions are required next. If there is an error, the Show Messages icon displays next to the Save button. Click the Show Messages icon to view a dialog listing all the errors. Select an error to highlight the associated attribute in the Property Editor. The following example shows a new interactive report region with an error message indicating that you need to select a table name.

   
   Description of the illustration pd_add_eg.png
5. Edit the appropriate attributes in the Property Editor.

   Tip:

   To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

6. Click Save or Save and Run Page.

See Also:

• "Running a Page from Page Designer"

• "About Adding Components Using Gallery Context Menus"

9.3.7 About Adding Components Using Gallery Context Menus

In addition to dragging and dropping components from the Gallery, you can also right-click a component in the Gallery to view a context menu. Each context menu features an Add To option which displays the actual locations where you can add the component. In this example, the developer is adding a new report to before the Content Body region.

Description of the illustration pd_context_menu.png

See Also:

"Adding a Region, Item, or Button by Dragging and Dropping"

9.3.8 Adding a Region, Item, or Button from the Rendering Tab

To create new components within the Rendering tab:

1. 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.
2. In the left pane, select the Rendering tab.
3. Locate and select the appropriate region, item, or region button.
4. Right-click an existing component or container to display the context menu for that component type.
5. Select a command (for example, Create Region, Create Sub Region, Create Page Item, Create Button and so on). The options available depend upon the node you select.
6. Edit the appropriate attributes in the Property Editor.

   Tip:

   To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

7. Click Save or Save and Run Page.

See Also:

• "Right Pane of Page Designer (Property Editor)"

• "Managing Regions"

• "Viewing Page-Level Items"

• "Creating a Button"

9.3.9 Adding a Region, Item, or Button from the Component View Tab

Tip:

The Component View tab was added in Oracle Application Express release 5.1 to assist developers with the transition from Legacy Component View to Page Designer. Legacy Component View was desupported in release 18.1.

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.

To create new components from the Component View tab:

1. View the page in Page Designer. See "Viewing a Page in Page Designer."

   Page Designer appears.

2. If not displayed, display the Component View tab:
   1. Click Utilities menu on the Page Developer toolbar.
   2. Select Show, Component View.
   If a dialog appears asking to reload the page, click Ok.
3. In the central pane, select the Component View tab.
4. Under the appropriate component type, click the Create icon.
   Page Designer identifies the new component as “New” in the left pane and in the central pane.
5. Edit the appropriate attributes in the Property Editor.

   Tip:

   To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

6. Click Save or Save and Run Page.

See Also:

• "Component View Tab"

• "Right Pane of Page Designer (Property Editor)"

• "Managing Buttons"

• "Managing Regions,"

• "Viewing Page-Level Items,"

9.3.10 Copying a Region, Item, or Button

Each application page can have buttons and fields (called items) which are grouped into containers called regions. Developers can copy regions, items, and buttons by using context menus or pressing CTRL and dragging and dropping with the mouse.

Copying a Region, Item, or Button Using Context Menus

To copy a region, item, or button using context menus:

1. In the central pane, select the Layout tab.

2. Locate and select the appropriate region, item, or region button.

3. Right-click to display the context menu.

4. From the context menu, select Copy To and then select the location.

5. Edit the component attributes.

Copying a Region, Item, or Button by Dragging and Dropping

To copy a region, item, or button by dragging and dropping:

1. In the left pane, select the Rendering tab.

2. Locate and select the appropriate region, item, or region button.

3. Press CTRL and then use the mouse to drag and drop the component to the new location.

   A copy of the component appears in the new location.

4. Edit the component attributes.

Copying a Region, Item, or Button to Another Page

To copy a region, item, or button to another page:

1. In the left pane, select the Rendering tab.

2. Locate and select the appropriate region, item, or region button.

3. Right-click the component, and select Copy to other Page.

   The appropriate wizard appears.

4. Follow the on-screen instructions.

9.3.11 Creating Pre-Rendering Branches, Computations, and Processes

To create branches, computations, and processes that execute before rendering the page:

1. 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.
2. In the left pane, select the Rendering tab.
3. Expand the Pre-Rending node at the top of the Rendering tab.
4. Determine the processing point. Right-click Before Header, After Header, or Before Regions to display the context menu for that processing point.
5. Select the appropriate option:Create Branch, Create Computation, or Create Process.
6. Edit the appropriate attributes in the Property Editor.

   Tip:

   To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

7. Click Save or Save and Run Page.

Tip:

If you have changed the default display to group components by component type, then you must to navigate to the Processing tab to maintain pre-rendering components.

See Also:

"Managing Computations, Validations, and Processes"

9.3.12 Creating Page Submission Branches, Validations, Computations, and Processes

To create branches, validations, computations, and processes that execute when the page is submitted:

1. 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.
2. In the left pane, select the Processing tab.
3. Navigate to After Submit, Validating, Processing, or After Processing as appropriate within the processing tree.
4. Right-click the identifier or an existing component to display the context menu for that processing point.
5. Select Create Branch, Create Validation, Create Computation, or Create Process.
6. Edit the appropriate attributes in the Property Editor.

   Tip:

   To view help for an attribute, select the attribute in the Property Editor and click the Help tab in the central pane.

7. Click Save or Save and Run Page.

Tip:

You can use context menus to duplicate, delete, and copy a component to other pages.

See Also:

"Managing Computations, Validations, and Processes"