Oracle Application Express 18: Universal Theme Migration (3 of 4) - Updating Navigation, Items, and Computations

Oracle by Example brandingOracle Application Express 18: Universal Theme Migration (3 of 4) - Updating Navigation, Items, and Computations

section 0Before You Begin

This 20-minute tutorial demonstrates steps to enhance the Navigation Menu and also the Navigation Bar. In this tutorial, you will be adding icons to Navigation Menu, creating Application Items, defining Application Computations, and creating and using list for Navigation.

This is the third tutorial in Oracle Application Express 18: Universal Theme Migration Series. Read the tutorials in sequence:

Background

Navigation is an important part of your application and can determine how your users navigate within your application. There are two navigation concepts that are key for Universal Theme: Navigation Menus and Navigation Bar. The primary navigation structure for your application is defined as a Navigation Menu and is based on the List component in Oracle Application Express. The Navigation Bar is positioned near the end of the application's header, and typically contains links for user authentication, help, feedback, and other global items. Navigation Bars are also based on the List component in Oracle Application Express.

When you build an application, you can include different types of navigation controls, such as navigation bar entries, tabs, breadcrumbs, lists, and trees. Navigation controls such as navigation bar entries, tabs, breadcrumbs, and lists are shared components. Shared components enable you to create a specific type of navigation control at the application level on the Shared Components page. Once created, you can add them to any page within your application.

What Do You Need?

To complete this tutorial you need to:

  • Complete the preceding tutorials in this series.

section 1Add Icons to Navigation Menu

A navigation menu is a list with hierarchical list entries. When you create an application, the Create Application Wizard automatically creates a navigation menu for you and populates it with list entries linking to the application pages you have created.

In this section you add icons to each of the menu options.

  1. Select the Sample Database Application you worked on in the previous tutorial.
  2. Click Shared Components.
  3. Click Lists. Select the Navigation Menu list.
    4. choose_navigation_menu
    Description of the illustration choose_navigation_menu.png
  4. The List Details page appears with Home, Customers, Products, Orders, Reports, and Administration list entries. You click each of these entries to add the corresponding icons.
    5. list_details_page
    Description of the illustration list_details_page.png
  5. To edit the Home list entry:
    • Click Home. The List Entry page opens.
    • Image/Class: Select fa-home.
    • List Entry Label: Accept the default Home.
    • Click Apply Changes.
    6. list_entry_home
    Description of the illustration list_entry_home.png
  6. To edit the Customers list entry:
  7. To edit the Products list entry:
  8. To edit the Orders list entry:
  9. To edit the Reports list entry:
  10. To edit the Administration list entry:

section 2Create Application Items

Application-level items do not get displayed, but are used as global variables to the application. You can use an application item as a global variable. Once you create an application item, it appears on the Application Items page. You can customize the appearance of a page by using the Search bar at the top of the page. You can view a list of where application items are used by clicking the Utilization tab at the top of the Application Items page.

In this section you add the application items for the counters in the list.

  1. Click Shared Components in the breadcrumb at the top of the page.
  2. Under Application Logic, click Application Items.
    3. application_items
    Description of the illustration application_items.png

    The create application items page appears.

  3. On the Application Items page, click Create.
    4. create_app_items
    Description of the illustration create_app_items.png
    The Create/Edit: Application Item page appears.
    create_edit_page
    Description of the illustration create_edit_page.png
  4. To create an application item:
    • Name: Enter A01
    • Click Create Application Item.
    a01_application_item
    Description of the illustration A01_application_item.png
  5. Create two additional applications items:
    6. The following application items are created.
    application_item_list
    Description of the illustration application_item_list.png

section 3Define Application Computations

Application Computations are units of logic that set the value of a single page or application-level item and are run at the same point across multiple pages in an application. Like page-level computation, application computations can be based on static values, item values, PL/SQL, or SQL.

Once you create an application computation, you can view the Application Computation History report. The Application Computation History report displays a history of recently changed application computations by date.

In this section you define application computations to populate the application items.

  1. Click Shared Components in the breadcrumb at the top of the page.
  2. On the Shared Component page under Application Logic, click Application Computations.
  3. Click Create.
  4. Enter the following details, and then click Create Computation.
    • Computation Item: Enter A01
    • Computation Type: Select SQL Query (return single value)
    • Computation: Enter: 
       select count(*)from demo_customers
    5. a01_app_computation
    Description of the illustration A01_app_computation.png
  5. Create two additional application computations:
    • Enter the following details, and then click Create Computation.
      • Computation Item: Enter A02
      • Computation Type: Select SQL Query (return single value)
      • Computation: Enter: 
         select count(*)from demo_product_info
    • Enter the following details, and then click Create Computation.
      • Computation Item: Enter A03
      • Computation Type: Select SQL Query (return single value)
      • Computation: Enter: 
         select count(*)from demo_orders
      • The application computations are created.
      app_computations
      Description of the illustration app_computations.png
  6. The navigation menu is now complete. Click Run Application run_application to review how the navigation menu looks.
    7. sample_db_application
    Description of the illustration sample_db_application.png

section 4Change to Top Navigation (optional)

By default the navigation 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 Application ID in the Runtime Developer Toolbar.
  2. Click Shared Components, then click User Interface Attributes.
  3. Click the Edit Desktop icon.
    4. edit_desktop
    Description of the illustration edit_desktop.png
  4. Under the Navigation Menu section:
    • Position: Select Top
    • List Template: Select Top Navigation Menu
    • Click Apply Changes.
    5. user_interface
    Description of the illustration user_interface.png
  5. Click Run Page. Note that the icons are not displayed when the menu is at the top.
    6. top_navigation
    Description of the illustration top_navigation.png

section 5Create and Use List for Navigation

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 Application ID in the Runtime Developer Toolbar.
  2. From the application page, click Shared Components.
  3. Click Lists and the click Create.
  4. Accept the default for Source and click Next .
    5. create_list_source
    Description of the illustration create_list_source.png
  5. On the Create/Edit List: Name and Type page, enter the following details:
    • Name: Enter Navigation Bar
    • Click Next.
  6. On the Create List: Query or Static Values page, enter the following details:
    • List Entry Label: Enter Mobile, Target Page ID or custom URL: Enter 200
    • List Entry Label: Enter Help, Target Page ID or custom URL: Enter 15
    • List Entry Label: Enter Feedback, Target Page ID or custom URL: Enter 102
    • List Entry Label: Enter &APP_USER., Target Page ID or custom URL: Enter #
    • List Entry Label: Enter Sign Out, Target Page ID or custom URL: Enter &LOGOUT_URL.
    • Click Next.
    7. query_static_values
    Description of the illustration query_static_values.png
  7. Click Create List.
    8. create_list
    Description of the illustration create_list.png
  8. From the Lists page, click the Navigation Bar list entry to edit it. From this page you can choose each list item (that is, Mobile, Help, Feedback, App_User, and Sign-out) to edit it.
    9. edit_list
    Description of the illustration edit_list.png
  9. Click Mobile. Update the following:
    • Image/Class: Select fa-mobile
    • List Entry Label: Accept the default, Mobile.
    • Click Apply Changes.
    10. list_entry_mobile
    Description of the illustration list_entry_mobile.png
  10. Add the following Image/Class for the other list entries and click Apply Changes:
    • Help: Select fa-question-circle-o
    • Feedback: Select fa-bullhorn
    • &APP_USER.: Select fa-user
  11. To enable user feedback, you edit the Feedback list entry:
    • On the List Details page, click Feedback list entry.
    • Conditions: Condition Type - Select PL/SQL Expression
    • Expression 1: Enter: 
        nvl(:ENABLE_FEEDBACK, 'NO') = 'YES'
    • Click Apply Changes.
    12. feedback_conditions
    Description of the illustration feedback_conditions.png
  12. Edit the Sign Out list entry.
    • Parent List Entry: Select &APP_USER.
    • Click Apply Changes.
    13. parent_list_entry
    Description of the illustration parent_list_entry.png
  13. Now that you have created the list, you need to update the desktop user interface to use the list.
    • Click Shared Components breadcrumb.
    • Click User Interface Attributes.
    • Click the Edit Desktop icon.
    • Navigation Bar: Implementation - Select List
    • Navigation Bar List: Select Navigation Bar
    • Template Options: Select the check box for Use Template Defaults
    • Click Apply Changes.
    14. user_interface_details
    Description of the illustration user_interface_details.png
  14. 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:
      • Position: Select Side
      • List Template: Select Side Navigation Menu
    • Click Apply Changes.
  15. The navigation bar is now complete. To review how the navigation bar looks like, click Run Page.
    16. new_navigation_bar
    Description of the illustration new_navigation_bar.png

next stepNext Tutorial

Oracle Application Express 18: Universal Theme Migration (4 of 4) - Improving Pages

more informationWant to Learn More?