Oracle by Example brandingOracle Application Express 18.1: Creating a Web Source Module (2 of 2)

section 0Before You Begin

This 10-minute tutorial shows you how to consume the RESTful Web Source by creating an interactive report that uses a remote database reference. Here you use the Web Source Module USGS_Earthquake_WS that you created in your previous tutorial Oracle Application Express 18.1: Creating a Web Source Module (1 of 2), to produce a report that displays the place, magnitude, and time of the earthquakes. 
This is the last tutorial in the Oracle Application Express 18.1: Creating a Web Source Module Series. Read the tutorials in sequence:

Background

Web Source Modules enable developers to access Representational State Transfer (REST) services or generic JSON data feeds in applications and use the data in Application Express components such as reports, interactive reports, etc. After creating the Web Source Modules, you can build a report by running a wizard and selecting the Web Source.

In Oracle Application Express, a report is the formatted result of a SQL query. You can generate the SQL query by selecting a table or view in a wizard, or by defining the SQL query manually.

What Do You Need?

  • Access to an Oracle Database
  • Access to Oracle Application Express 18.1

section 1Add an Interactive Report

An interactive report is the formatted result of a SQL query that is only supported on Desktop pages. End users can customize the report layout and data displayed by selecting options on the Actions menu.

This section describes how to create a report by running the Create Page wizard from the Application home page. You can also run this wizard in Page Designer by clicking the Create menu and selecting Page.

To add an interactive report:

  1. Select the application, USGS Earthquake.
  2. On the application home page, select the Calendar Page Latest_Earthquakes.  Page Designer opens.
  3. In the Rendering tab under Content Body, select the region, Latest_Earthquakes.
  4. In the Gallery (directly below the Grid Layout), click Regions, and select Interactive Report.
    select_interactive_report
    Description of the illustration select_interactive_report.png
  5. Right-click Interactive Report and select Add To, and then Content Body. It should appear under the existing report Latest_Earthquakes.
    drag_and_drop_interactive_report
    Description of the illustration drag_and_drop_interactive_report.png
  6. To change the Region Attributes:  
  7. You can arrange the columns as per your preference. Click Actions and select Columns.
  8. Choose the columns you would like to display in your report. Select the columns: Time As Date, Mag, Place, and Url.
    select_columns
    Description of the illustration select_columns.png
  9. Click Apply. The new columns that you chose in the step above are displayed.
    new_columns
    Description of the illustration new_columns.png

section 2Edit and Save Report

This section describes how you can edit the report by adding a date and time format, and then save the report.

  1. Return to the Page Designer.
  2. To display time component in the report:
    • In the Rendering tab, expand Columns, select Time_As_Date.
    • In the Property Editor, update the following: 
    • Click Save and Run page.
    • Scroll down and view the interactive report again. Note the Time as Date column displays in the new format DD-MON-YYYY HH24:MI.
    time_as_date-time
    Description of the illustration time_as_date-time.png
  3. Click the Time As Date heading. The following dialog appears.
    filter
    Description of the illustration filter.png
    Note that you can view the report in any order you want to.
  4. Save the report:
    • Select the Actions menu.
    • Select Report and then Save Report.
  5. Make the report the default report for the page:
    • In the Save Report dialog, select As Default Report Settings.
    • Select Apply.
    • In Save Default Report dialog, select Primary.
    • Click Apply.
    primary_report
    Description of the illustration primary_report.png

next stepNext Tutorial

...

more informationWant to Learn More?