Working with Page Designer in APEX 5.0: main components & Navigation

Ilya Dergunov

Ilya Dergunov

The author of the article. IT specialist with 20 years of experience, author of a large number of publications on specialized topics (software development, administration, news items). More details.

Main components in APEX 5.0 Page Designer The Page Designer in APEX 5.0 is one of the main new features and a major improvement for APEX developers. It changes the way you build your application pages and also the way you think about application development. It is also close to what you probably know from Oracle Forms. The Page Designer provides these new features:

  • Drag-and-drop functionality
  • Tree view and context menus
  • Seamless adjustment of the Component View and Property Editor panels


Main Components

The Page Designer has four main components (Figure 1-1).

  • Navigation toolbar
  • Component View on the left side of the screen
  • Grid Layout for drag-and-drop functionality in the middle
  • Property Editor on the right side of the screen

 Apex Page Designer components


Figure 1. Page Designer components



The navigation toolbar has lots of new options compared to previous versions of APEX. Some of them have been reworked, and their functionality is now different. Also, there are some new options that I will describe in detail.


Page Finder Icon

The Page Finder icon works differently compared to the old one. It will lead you to a page you type in directly or will open a modal window if you click the pop-up list of values (see Figure 2 and Figure 1-3).

 Page Finder icon in Apex

Figure 2. Page Finder icon

Page Finder list of pages in Apex

Figure 3. Page Finder list of pages

The Page Finder will also show a warning via a pop-up if you are leaving a page with unsaved changes (Figure 1-4).

Page Finder unsaved changes prompt 

 Figure 4. Page Finder unsaved changes prompt

One of the things missing in the navigation within the Page Finder is the old feature to go to the previous or next page. Even if you want to go to the previous or next page, you will be forced to do a couple of clicks to open the modal window and then search for the page number in the list.


Lock Pages and Undo and Redo Icons

The icon for locking pages (Figure 5) has the same functionality as it had before. The Redo and Undo icons allow you to undo and redo the unsaved changes similar to what you know from other programs (such as Microsoft Office). This feature is useful, but it works only for unsaved changes.

 Icon for locking pages and the Undo and Redo icons

Figure 5. Icon for locking pages and the Undo and Redo icons


Create, Utilities, and Component View Icons

This section will cover the main set of icons in the Page Designer. You will use these icons frequently.


Create Icon

The icon for Create (Figure 6 and 7) offers a couple of options.

  • Create a page
  • Create a page as a copy of an existing page
  • Wizards to create different complex page components such as forms and reports
  • Access to the shared components
  • Access to the page group
  • Access to the Team Development features
  • Add comments to the application

 Create, Utilities, and Component View icons in Apex

Figure 6. Create, Utilities, and Component View icons

 Create menu items


Figure 7. Create menu items

When you click to create a Form or Report region, you will see the corresponding wizard as a modal dialog (Figure 8).

Apex Create Form Wizard

 Figure 8. Create Form Wizard

Utilities Icon

The icon for Utilities (Figure 6 and 9) offers lots of options.

  • Delete a page
  • Create a page as a copy of an existing page
  • Access the Caching, Attribute Dictionary, History, and Export options
  • Access the Cross Page Utilities, Application Utilities, and Page Groups options
  • Access the Upgrade Application option

 Oracle Apex Utilities options

Figure 9. Utilities options


Component View Icon

The icon for the Component View (Figure 6 and Figure 10) shows the old HTML view of the Page Designer. This view option could be useful in these cases:

  • When making mass changes of column names in a classic report
  • When making mass changes of column names in an interactive report
  • When making mass changes of item labels in a form region

Apex Old HTML Page Designer layout 

Figure 10. Old HTML Page Designer layout

The reason is for the old view’s sefuleness is simple. If you use the new Page Designer interface for the purposes just listed, you will have to do lots of clicks and mouse moves to first click the corresponding column on the left side tree menu and then move the cursor to the label attribute to change it. Using the old view, it is possible to move faster from column to column using the Tab key.

You can always switch back to the new interface using the icon shown in Figure 10.

Other Navigation Bar Icons

The other icons on the navigation toolbar (Figure 11) are used to access the Team Development, Developer Comments, and Shared Components features.

 Apex Other navigation toolbar icons

Figure 11. Other navigation toolbar icons


Team Development Icon

Using this icon, you can access Team Development features.


Developer Comments Icon

Using this icon, you create a developer comment, add a bug, or add a to-do task.


Shared Components Icon

Using this icon, you can access application shared components.


Save and Save and Run Application Icons

The next set of icons is used to save the changes or save and run the application.


Save Icon

The Save icon will save the outstanding changes for the corresponding page.


Save and Run Icon

The Save icon will save the outstanding changes for the corresponding page and run the application in a new tab.

In earlier versions of APEX, you could run the application by right-clicking and opening the application in a new tab or in a new window. In APEX 5.0, this has changed; there is no right-click option anymore. The button is an image running JavaScript. The consequence is that the behavior will be different depending on the browser used and your browser settings. To see how to optimize the settings for Firefox, refer to this blog posting.



Вас заинтересует / Intresting for you:

What Is APEX?
What Is APEX? 1197 views Stas Belkov Thu, 10 May 2018, 12:28:55
Oracle Apex and jQuery integra...
Oracle Apex and jQuery integra... 1966 views Гвен Sun, 03 Jun 2018, 12:02:47
Third-Party Reporting Applicat...
Third-Party Reporting Applicat... 1209 views Akmaral Wed, 18 Jul 2018, 08:06:36
Business Intelligence for Smal...
Business Intelligence for Smal... 703 views Stepan Ushakov Tue, 17 Sep 2019, 05:40:59