Oracle Application Express 18: Mobile App (2 of 3) - Adding Reports

Oracle by Example branding Oracle Application Express 18: Mobile App (2 of 3) - Adding Reports

section 0Before You Begin

This 10-minute tutorial shows you how to add a Column Toggle Report on a Milestones page and also add a Reflow Report on the Task page.

This is the second 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 tutorial in this series.

section 1Add Column Toggle in the Milestones Page

The Column Toggle report creates a responsive report for mobile applications. By default, column toggle reports are created with all columns set to the same priority. However, you can edit the report column attributes and rank columns by importance. 

To add Column Toggle :

  1. From the application (My_Mobile_Application) home page, select Create Page. Create Page Wizard appears.
  2. Select Report, and click Next. The Create Page page appears. Now, choose Column Toggle Report.

    milestones_create_page
    Description of the milestones_create_page.png
  3. On Create Page, Page Attributes page, enter the following attributes:
    • Click Next.
  4. On Create Page, Navigation Menu page, enter the following attributes:
    • Navigation Preference: Select Create a new navigation menu entry
    • New Navigation Menu Entry – Accept the default, Milestones
    • Parent Navigation Menu Entry – Select No Parent selected
    milestones_navigation_menu
    Description of the milestones_navigation_menu.png
    • Click Next.
  5. On Create Page - Source page, enter the following attributes:
    • Data Source – Select Local Database (default)
    • Source Type - Choose Table
    • Table/View Owner – Accept the default.
    • Table/View Name – Search for and select SAMPLE$PROJECT_MILESTONES (table)
    • Select Column(s) to be shown in Report – Select the columns to include in the report. Included columns display on the right. Include:
        • NAME (Varchar2);
        • DESCRIPTION (Varchar2);
        • CREATED
        • CREATED_BY
        • UPDATED
        • UPDATED_BY
      milestones_source
      Description of the milestones_source.png
    • Click Create and Save.

section 2Add Reflow Report in the Task Page

The Reflow Report creates a responsive report for mobile applications. When there is not enough space available to display the report horizontally, the report works by collapsing the table columns into a stacked presentation that looks like blocks of label and data pairs for each row.

To add Reflow Report:

  1. From the application home page, click Create Page.
  2. On Create a Page, select Report.
  3. Click Next. The Create Page Wizard appears.
  4. Choose Reflow Report
  5. The Create Page, Page Attributes page appears. For Page Attributes:
    • Page Name: Enter Tasks
    • Click Next.
  6. Under Create Page, Navigation Menu:
    • Navigation Preference: Select Create a new navigation menu entry
    • New Navigation Menu Entry – Accept the default, Tasks
    • Parent Navigation Menu Entry – Select No parent selected
    tasks_navigation_menu
    Description of the tasks_navigation_menu.png
    • Click Next.
  7. The Create Page, Source page appears. For Source:
    • Data Source – Select Local Database (default)
    • Source Type – Choose SQL Query
    • Enter Region Source: Enter the following script.txt.
    • Click Create.
    tasks_source_tab
    Description of the tasks_source_tab.png
  8. Click Save and Run page. Notice the ID column displays and the page looks crowded.
    tasks_with_column_id
    Description of the tasks_with_column_id.png
    You can hide the ID columns by editing the column attributes in Page Designer.
  9. Click Edit Page on the Runtime Developer toolbar. Page Designer appears.
  10. To hide a column:
    • In the Rendering tab, expand Columns and select the ID column.
    • In the Property Editor, edit the following:
      • Identification: Show - select No.
    tasks_hide_column_id
    Description of the tasks_hide_column_id.png
  11. Click Save and Run page. The ID Column disappears.
    tasks_without_column_id
    Description of the tasks_without_column_id.png

next stepNext Tutorial

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

more informationWant to Learn More?