Oracle Application Express 18: Mobile App (3 of 3) - Improving Navigation

Oracle by Example branding Oracle Application Express 18: Mobile App (3 of 3) - Improving Navigation

section 0Before You Begin

This 15-minute tutorial shows you how to add navigation with images to a mobile application using Oracle Application Express 18.

This is the last tutorial in the series Oracle Application Express 18: Mobile App Series. Read the tutorials in sequence:

Background

Mobile applications developed with Oracle Application Express are browser-based applications that run inside the browser on the mobile device. Therefore, these applications must have a connection in order to communicate with the Oracle Database and cannot operate in a disconnected environment.

What Do You Need?

To complete this tutorial you need to:

  • Complete the preceding tutorials in this series.

section 1Add the List View to the Home Page

The List View displays data in an easy to navigate list. You can also enhance the List View by incorporating numerous features.

To add List View to the Home page :

  1. From the application (My_Mobile_Application) home page, select the Home page. The Page Designer opens. You add new components in Page Designer by selecting them from Gallery at the bottom on the central pane.
  2. To add a List View report:
    • In the Gallery, select the Regions tab.
    • Find and select List View.
    • Right-click List View and select Add To, and then Content Body.
    A new List View region appears in red in both the Rendering tab and central tab. When you create a new component in Page Designer, the Messages tab displays a red or yellow badge indicating the number of messages you need to address. Clicking on a message changes the focus within Property Editor to the corresponding attribute associated with the error or warning.
    error_message_in_content_body
    Description of the error_message_in_content_body.png
    To view Help, click the Help tab and then select an attribute within the Property Editor located in the right pane.
    help_message
    Description of the help_message.png
  3. To edit the List View:
    • In the Property Editor, update the following:
      • Identification: Title – Enter List View
      • Source – Type – Select SQL Query
      • Source – SQL Query – Enter the script.txt to add labels.
  4. To add the links:
    • In the Rendering tab, click the Attributes region .
    •  In Property Editor, update the following:
      • Settings: Text Column - Select Label.
      • Settings: Link Target - Select No Link Defined
    • Click Link Target field again and Link Builder – Link Target window appears. Under Target, select the following:
  5. Save and Run page and click the links. Each link will open the corresponding page.
    run_the_page_and_check_links
    Description of the run_the_page_and_check_links.png

section 2Add Images to the Navigation Menu

  1. From the application home page, click Shared Components.
  2. Click Navigation Menu under Navigation.
  3. Click Desktop Navigation Menu.
    navigation_menu
    Description of the navigation_menu.png
  4. Edit each of the following list items by selecting a new image. Note that you must edit each list entry one at a time.
  5. For adding icon to Projects Navigation Menu:
  6. For adding icon to Milestones Navigation Menu:
  7. For adding icon to Tasks Navigation Menu:
  8. Save and Run page. You can see the new icons in the Application Wizard.
    add_icons
    Description of the add_icons.png

more informationWant to Learn More?