7.3.1 Working with Page Designer

Learn how to view pages in Page Desinger and manage the left, central, and right window panes.

• Searching for Pages
  Use the Page Selector to search for pages within the current application.
• Viewing a Page in Page Designer
  To view a page in Page Designer, select an application and then a page.
• Accessing Property Editor
  The Property Editor displays in the right pane of Page Designer and displays all attributes for currently selected components.
• Dragging and Dropping Tabs Between Panes
  Drag and drop tabs within a Page Designer pane.
• 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.
• About Adding Components Using Gallery Context Menus
  Add a component to a page by right-clicking a component in the Gallery to view a context menu.

7.3.1.1 Searching for Pages

Use the Page Selector to search for pages within the current application.

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.

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:

   • 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

• Managing Page Groups

7.3.1.2 Viewing a Page in Page Designer

To view a page in Page Designer, select an application and then a page.

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

7.3.1.3 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 APEX 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)

7.3.1.4 Dragging and Dropping Tabs Between Panes

Drag and drop tabs within a Page Designer pane.

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.

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

7.3.1.6 About Adding Components Using Gallery Context Menus

Add a component to a page by right-clicking a component in the Gallery to view a context menu.

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