Transitioning to Oracle Application Express 5.1

This tutorial relies on the tables installed as part of the Sample Database Application. By default this application is installed into a new workspace. You need to check if the Version 5.1 of this application was recently installed. If it was installed over a month ago then it is recommended to uninstall and re-install the application so that the data is refreshed.

1. In the Application Express login page, enter the following login credentials and click Sign In:

   • Workspace: obe

   • Username: obe

   • Password: oracle

   

2. In the Oracle Application Express home page, click Packaged Apps, and review if the Sample Database Application is installed and when it was installed.

   

3. If the Sample Database Application is installed, but more than one month ago, remove the application. To remove the application, click the Manage icon () under Sample Database Application, then click Remove, and click Remove Application.

   

4. If the Sample Database Application was not installed, or you just removed it, install the application. To install the application, click Packaged Apps Gallery, then click Sample Database Application. Click Install Application, click Next, and then click Install Application.

   

   

Import the Sample Database Application (V4.2) to your workspace. This application will use the tables, views, triggers and other database objects created in the previous section.

1. Click the Application Builder drop down and select Import.

   

2. Click Browse... and select the Sample DB App 4.2.sql file from your working directorythe files folder and click Open. Then, click Next.

   

3. Click Next to confirm the file import. Then, click Install Application.

   

4. Given the supporting objects (like tables) are already installed, change Upgrade Supporting Objects to No. Click Next.

   

5. The application is now installed. Click Run Application to review how the application looks prior to migrating it to the Universal Theme.

   

6. Enter your login credentials, and click Login.

   

7. Now you need to edit the application. Click Application xxx in the Developer Toolbar.

   

In this section, you install the Bookmarklet from the Universal Theme Migration Guide.

1. Open the Universal Theme Migration Guide in a new tab in your browser (link is in the "What Do You Need?" section). Then, click the Migration Guide > button.

   

2. Navigate to the Bookmarklet section and drag Universal Theme Migration Helper V1.1 to the bookmark bar for Firefox. Alternatively, you can bookmark the Universal Theme Migration Helper V1.1 page by right-clicking the link and selecting Bookmark This Link on Firefox.

   

   Note: The remainder of this tutorial will follow the guidance outlined in Steps to Migrate section of the Universal Theme Migration Guide.

In this section, you install the Universal Theme into your application and then switch your application theme.

1. The first step in migrating the theme is to install the Universal Theme into your application.

   In the browser, navigate to the Application Express tab. From the Application Builder, with your application loaded, click Shared Components.

   

2. Click Themes, and then click Create >.

   

3. Accept the default and click Next for the first three steps of the wizard (Method, User Interface, and Identify Theme). Then, click Create.

   

4. The next step is to switch your application theme. Click Switch Theme.

   

5. Enter the following details, and click Next >.

   • Current Active Theme: 25. Blue Responsive

   • Switch to Theme: 42. Universal Theme

   • Reset Grid: Reset fixed region positions

   • Match Template Classes: No

   

6. Click the Universal Theme Migration Helper V1.1 bookmark. The popup will display the number of templates corrected. Click Close on the popup dialog. Then, click Next >.

   

7. Click Switch Theme.

   

First, you will add icons to each of the menu options.

1. Click Shared Components, then click on Lists.

   

2. Select the Navigation Menu list.

   

3. Edit the Home list entry. Enter fa-home for Image/Class, then go the next list item.

   

4. Edit the Customer list entry. Enter fa-users for Image/Class, and Customers [&A01.] for List Entry Label, then go to the next list item.

   

5. Edit the Products list entry. Enter fa-shopping-cart for Image/Class, and Products [&A02.] for List Entry Label, then go to the next list item.

   

6. Edit the Orders list entry. Enter fa-list-alt for Image/Class, and Orders [&A03.] for List Entry Label, then go to the next list item.

   

7. Edit the Reports list entry. Enter fa-table for Image/Class , then go to the next list item.

   

8. Edit the Administration list entry. Select the LOV icon for Image/Class, select an appropriate icon, such as fa-gear, then click Apply Changes to save the list entry.

Now you will add the application items for the counters in the list.

1. Click Shared Components, then click Application Items.

   

2. Click Create.

3. Enter Name as A01, and then click Create Application Item.

   

4. Create two additional Applications Items - A02 and A03.

   

Next you need to define application computations to populate the application items.

1. Click Shared Components, then click Application Computations.

   

2. Click Create.

3. Enter the following details, and then click Create Computation.

   • Computation Item: A01

   • Computation Type: SQL Query (return single value)

   • Computation: select count(*) from demo_customers

   

4. Create two additional Application Computations -

   • Computation Item: A02, Computation Type: SQL Query (return single value), Computation: select count(*) from demo_product_info

   • Computation Item: A03, Computation Type: SQL Query (return single value), Computation: select count(*) from demo_orders

   

5. The navigation menu is now complete. Click Run Application to review how the navigation menu looks.

   

   

By default the menu is displayed on the left side of the page. If you wish to move the menu to the top of the page, as it was when using Tabs, then perform the following steps:

1. Click Shared Components, then click User Interface Attributes.

   

2. Click the Edit Desktop icon.

   

3. Under the Navigation Menu section, select Top for Position, and Top Navigation Menu for List Template. Then, click Apply Changes.

   

   Note: The icons are not displayed when the menu is at the top.

   

By default, the navigation bar still uses the classic implementation after migrating to the Universal Theme. You will now enter a list for the navigation bar and switch your application to use this new list.

1. Click Shared Components, then click Lists.

   

2. Click Create >.

3. Accept the default for Source and click Next >. Enter Navigation Bar for Name and click Next >.

   

4. Enter the following details in the respective fields and click Next >.

   • List Entry Name Mobile, Target Page ID or custom URL 200

   • List Entry Name Help, Target Page ID or custom URL 15

   • List Entry Name Feedback, Target Page ID or custom URL 102

   • List Entry Name &APP_USER., Target Page ID or custom URL #

   • List Entry Name Sign Out, Target Page ID or custom URL &LOGOUT_URL.

   

5. Click Create List.

6. From the Lists page, click the Navigation Bar list entry to edit it.

   

7. Edit the list entries and add the following Image/Class for each list entry:

   • Mobile: a-Icon icon-mobile

   • Help: a-Icon icon-help

   • Feedback: fa-bullhorn

   • &APP_USER.: a-Icon icon-user

8. Edit the Feedback list entry. Under the Conditions section, select PL/SQL Expression for Condition Type, enter nvl(:ENABLE_FEEDBACK, 'NO') = 'YES' for Expression 1, and then click Apply Changes.

   

9. Edit the Sign Out list entry. Select &APP_USER. for Parent List Entry, and then click Apply Changes.

   

10. Now you have created the list, you need to update the desktop user interface to use a list. Click Shared Components and then click User Interface Attributes.

    

11. Click the Edit Desktop icon.

    

12. Under the Navigation Bar section, select List for Implementation, select Navigation Bar for Navigation Bar List, and check Use Template Defaults, then click Apply Changes.

    

13. If you had changed to Top Navigation in the previous section, change back to side navigation. Click the Edit Desktop icon. Under the Navigation Menu section, select Side for Position and Side Navigation Menu for List Template, then click Apply Changes.

    

14. The navigation bar is now complete. Click Run Application to review how the navigation bar looks.