1. App Builder User's Guide
  2. Creating Applications
  3. Creating Applications for Mobile Devices
  4. Forms Optimized for Mobile Environments

5.8.3 Forms Optimized for Mobile Environments

Learn about forms optimized for mobile environments.

Parent topic: Creating Applications for Mobile Devices

5.8.3.1 Mobile Friendly Forms

Oracle APEX includes three mobile friendly reports and forms: List View, Column Toggle, and Reflow Report.

Although the Universal Theme is optimized to work well on mobile devices, not all components are mobile friendly. For example, interactive reports and interactive grids do not work well in mobile environments.

The following mobile friendly reports are optimized for mobile environments:

  • List View - A List view report features a responsive design to display data and provide easy navigation on Smartphones. A list view report contains the formatted result of a SQL query based on the data source (local or external) you specify and the table or SQL query you provide. Developers edit the report Attributes to determine the database columns that display, including the column used for List view entry.

  • Column Toggle Report - A column toggle report contains the formatted result of a SQL query based on the data source (local or external) you specify and the table or SQL query you provide. A column toggle report includes a Columns button which enables end users to select which columns they want to view.

  • Reflow Report - A reflow report contains the formatted result of a SQL query based on the data source (local or external) you specify and the table or SQL query you provide. When there is not enough space available to display the report horizontally, the report responds by collapsing the table columns into a vertical value pairs layout where each column displays on a separate row.

Parent topic: Forms Optimized for Mobile Environments

5.8.3.2 Creating a Column Toggle Report

Create a column toggle report in Page Designer.

A column toggle report contains the formatted result of a SQL query based on the data source (local or external) you specify and the table or SQL query you provide. A column toggle report includes a Columns button which enables end users to select which columns they want to view.

By default, column toggle reports are created with all columns set to the same priority. However, the developer can edit the report column attributes and rank columns by importance. Columns with a lesser priority (larger number) are hidden at narrower screen widths. The report includes a Columns button which enables end users to select which columns they want to view.

To create a column toggle report.

  1. Create a Blank page using the Create Page Wizard.
  2. View the page in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  3. Click the Layout tab in the central pane.
  4. In the Gallery, click the Regions tab. Right-click Column Toggle and select Add To, and select the appropriate location (for example, Body).

    Tip:

    You can also select the Column Toggle region in the Gallery and drag it to the appropriate location in the Layout tab.
  5. Page Designer indicates what to do next. If there are errors, the Show Messages icon displays in the Page Developer toolbar.
    1. Click the Show Messages icon on the Page Designer toolbar.
      The Messages dialog displays errors that must be addressed.
    2. Select an error to highlight the associated attribute in the Property Editor.
  6. Select the New region (if not already selected).

    Next, edit the Region attributes in the Property Editor (or right pane).

  7. Identification, Title - Enter a region title. The region title only displays when it is defined in the region template.
  8. Source - Configure the Data Source for the region:

    What appears next depends upon the attributes you select. For this example, the report is built on a local database on EBA_PROJECTS table.

    Tip:

    To learn more about an attribute and view examples, select the attribute in the Property Editor and click the Help tab in the central pane.
    1. Location - Select the location of the data. For example, select Local Database.
    2. Type - Select how the data is queried. For example, select Table/View.
    3. Table Name - Enter the case-sensitive table or view name. You can type in the name or pick from the list. For example, select EBA_PROJECTS.
  9. Edit any additional attributes as needed.
  10. View the page, click Save and Run Page.

    The toggle columns report appears.

    End users can control what columns display by clicking the Columns button.

Parent topic: Forms Optimized for Mobile Environments

5.8.3.3 Creating a List View Report

Create a list view report in Page Designer.

List view reports feature a responsive design to display data and provide easy navigation on Smartphones. A list view report contains the formatted result of a SQL query based on the data source (local or external) you specify and the table or SQL query you provide. Developers edit the report Attributes to determine the database columns that display, including the column used for List view entry.

The example in this topic builds a report on the EBA_PROJECTS table available in the sample dataset, Project Data.

To create a list view report.

  1. If needed, create a Blank page using the Create Page Wizard.
  2. View the page in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  3. In the Gallery, click the Regions tab. Right-click List View and select Add To, and select the appropriate location (for example, Body).

    Tip:

    You can also select the List View region in the Gallery and drag it to the appropriate location in the Layout tab.
  4. Page Designer indicates what to do next. If there are errors, the Show Messages icon displays in the Page Developer toolbar.
    1. Click the Show Messages icon on the Page Designer toolbar.
      The Messages dialog displays errors that must be addressed.
    2. Select an error to highlight the associated attribute in the Property Editor.
  5. Select the New region (if not already selected).

    Next, edit the Region attributes in the Property Editor (or right pane).

  6. Identification, Title - Enter a region title. The region title only displays when it is defined in the region template.
  7. Source - Configure the Data Source for the region:

    What appears next depends upon the attributes you select. For this example, the report is built on a local database on EBA_PROJECTS table.

    Tip:

    To learn more about an attribute and view examples, select the attribute in the Property Editor and click the Help tab in the central pane.
    1. Location - Select the location of the data. For example, select Local Database.
    2. Type - Select how the data is queried. For example, select Table/View.
    3. Table Name - Enter the case-sensitive table or view name. You can type in the name or pick from the list. For example, select EBA_PROJECTS.
  8. Configure the report Attributes:
    1. In the Property Editor, click the Attributes tab.
    2. Settings - Configure the attributes such as the following:

      • Features - Select the features to include with list view report. Depending upon what you select additional attributes may appear. For example, select Enable Search.

      • Text Column - Select the database column that contains the main content for the list view entry. For example, select NAME (required).

      • Supplemental Information Column - -Select the database column that contains supplemental information for the list view entry. For example, select DESCRIPTION.

      • Counter Column - Select the database column that contains the value to display in the count bubble. For example, select BUDGET.

  9. Edit any additional attributes as needed.
  10. View the page, click Save and Run Page.

    The list view report appears.

Parent topic: Forms Optimized for Mobile Environments

5.8.3.4 Creating a Reflow Report

Create a reflow report in Page Designer.

A reflow report contains the formatted result of a SQL query based on the data source (local or external) you specify and the table or SQL query you provide. When there is not enough space available to display the report horizontally, the report responds by collapsing the table columns into a vertical value pairs layout where each column displays on a separate row.

The example in this topic builds a report on the EBA_PROJECTS table available in the sample dataset, Project Data.

To create a reflow report.

  1. If needed, create a Blank page using the Create Page Wizard.
  2. View the page in Page Designer:
    1. On the Workspace home page, click the App Builder icon.
    2. Select an application.
    3. Select a page.
    Page Designer appears.
  3. In the Gallery, click the Regions tab. Right-click Reflow Report and select Add To, and select the appropriate location (for example, Body).

    Tip:

    You can also select the Reflow Report region in the Gallery and drag it to the appropriate location in the Layout tab.
  4. Page Designer indicates what to do next. If there are errors, the Show Messages icon displays in the Page Developer toolbar.
    1. Click the Show Messages icon on the Page Designer toolbar.
      The Messages dialog displays errors that must be addressed.
    2. Select an error to highlight the associated attribute in the Property Editor.
  5. Select the New region (if not already selected).

    Next, edit the Region attributes in the Property Editor (or right pane).

  6. Identification, Title - Enter a region title. The region title only displays when it is defined in the region template.
  7. Source - Configure the Data Source for the region:

    What appears next depends upon the attributes you select. For this example, the report is built on a local database on EBA_PROJECTS table.

    Tip:

    To learn more about an attribute and view examples, select the attribute in the Property Editor and click the Help tab in the central pane.
    1. Location - Select the location of the data. For example, select Local Database.
    2. Type - Select how the data is queried. For example, select Table/View.
    3. Table Name - Enter the case-sensitive table or view name. You can type in the name or pick from the list. For example, select EBA_PROJECTS.
  8. Edit any additional attributes as needed.
    For example, to facilitate a better display in a smaller window, you may want to edit the Column attributes, Heading, Alignment and Layout, Column Alignment attributes.
  9. View the page, click Save and Run Page.

    The reflow report appears.

    When there is not enough space available to display the report horizontally, the report responds by collapsing the table columns into a vertical value pairs layout where each column displays on a separate row as shown in the following example.

Parent topic: Forms Optimized for Mobile Environments