Oracle by Example brandingOracle Application Express 18: Customizing an Interactive Report as a Developer

section 0Before You Begin

This 15-minute tutorial demonstrates you how to edit the region attributes, report Attributes, and the column attributes on Tasks interactive report page you created in the OBE, Oracle Application Express 18: Create Application Wizard.

Background

In this tutorial, you learn how to customize an interactive report by editing an updating the region Attributes, report Attributes, and column Attributes in Page Designer. You also learn how to customize the report layout and data displayed by selecting options on the Actions menu.

What Do You Need?

Accessing Your Development Environment

How you sign in and access Oracle Application Express release 18.1 depends upon where Oracle Application Express resides. Oracle Application Express may reside in a local on-premises Oracle Database or in a hosted environment, such as the Oracle Cloud. The sign in credentials you use to sign in differ depending upon the installation type.

  • Free Workspace: Give Oracle Application Express a test run by signing up for a free workspace. To request an evaluation workspace, go to apex.oracle.com, and click Get Started for Free.
  • Oracle Cloud: Develop and deploy applications without worrying about infrastructure, repair, and downtime. Oracle Application Express is available in Exadata Express Cloud Service and Database Cloud Service. However, you need to manually customize your databases to install and enable Oracle Application Express. To learn more, see Oracle Database Cloud Service.
  • Oracle Application Express On-premises: Install Oracle Application Express directly within any Oracle Database and then sign in to your workspace using your sign in credentials. For details on your sign in credentials, contact your administrator or see Oracle Application Express Installation Guide.
  • Oracle Application Express Pre-Built VM: Install a Pre-Built Virtual Machine (VM) which includes an Oracle Database and Oracle Application Express 18.1. To learn more, see Hands-On Labs.
    Once the VM is installed, start the VM:
    • Click the big red circle labeled Start.
    • Click the APEX shortcut, or enter the following URL : http://localhost:8080/ords/f?p=4550:1
    • When prompted to sign in, enter the sign in credentials (unless given other credentials to use):
      • Workspace : obe
      • Username : obe
      • Password : oracle

Note your Application ID may be different when compared to the screenshots in this tutorial. Your Application ID is assigned automatically when you create the application.

section 1Update Region Attributes

In this topic , you edit and update the region attributes on the Tasks interactive report page you created in the OBE, Using the Create Application Wizard.

In this section, you select the Sample Projects Tasks region and update the SQL query IS_COMPLETE_YN column to replace "Y" and "N" with "Yes" and "No". You also update Template Options to include Maximize button and remove existing borders.

Perform the following steps to update region attributes:

  1. Sign in to your development environment.
  2. From the Workspace home page, click the App Builder icon.
  3. Find the Create App Wizard application.
    4. Create App Wizard
    Description of the illustration app_wizard.png
  4. Select the Create App Wizard application.

    5. The Application home page appears displaying all pages in the application.

    Create App Wizard Application Page
    Description of the illustration app_wizard_app.png
  5. Click the Tasks page.

    6. Page Designer displays the Tasks page.

    Tasks page
    Description of the illustration app_wizard_tasks.png
  6. In the Rendering tab, select the Sample Project Tasks region.
    7. Sample Prject Tasks
    Description of the illustration sample_tasks_region.png
  7. Update the SQL Query to replace "Y" and "N" in the IS_COMPLETE_YN column with "Yes" and "No":

    8. In the Property Editor, find Source and update the SQL Query for the report.

  8. Click the Code Editor icon.
    9. Query Editor icon
    Description of the illustration query_editor_icon.png

    The Code Editor appears.

  9. Replace the line IS_COMPLETE_YN, with the following: 
    decode(is_complete_yn, 'Y', 'Yes', 'No') IS_COMPLETE_YN,
    sql query new.
    Description of the illustration sql_query.png

    10. This SQL query changes, replaces "Y" and "N" in the IS_COMPLETE_YN column with "Yes" and "No".

  10. Click OK to exit the Code Editor.
  11. Click Save.
  12. Update the Template Options to include a Maximize button and remove borders:
    • In the Property Editor, find Appearance and then Template Options.
    • Click Use Template Defaults.
    Template options
    Description of the illustration template_options.png
  13. In the Template Options dialog, enable Use Template Defaults, Remove Borders, and Show Maximize Button.
    14. Template options dialog page
    Description of the illustration template_options_dialog.png
  14. Click OK.
  15. Click Save.
  16. Click Save and Run Page to run the report.
    17. Tasks Report page
    Description of the illustration tasks_report.png

    Notice the borders are removed, the Is Complete column now displays "Yes" and "No" instead of "Y" and "N," and a Maximize button appears in the upper right corner.

  17. Return to Page Designer.

section 2Update Report Attributes

In this topic, you update the attributes for null values, pagination, and the search label.

Perform the following steps to update report attributes:

  1. In the Rendering tab under Content Body, locate the Sample Projects Tasks region.
  2. Under the Sample Projects Tasks, select the Attributes node.

    3. The Property Editor displays the report attributes. Attributes are organized in groups.

  3. Under Actions Menu, find Subscription - select No.
    4. subscription attribute window
    Description of the illustration subscription.png
  4. Under Appearance, find Show Null Values as - Enter N/A
    5. Show null value window
    Description of the illustration show_null_value.png
  5. Under Pagination, find Display Position - select Top and Bottom Right.
    6. pagination window
    Description of the illustration pagination.png
  6. Under Search Bar, find Search Button Label - Enter Search.
    7. Search bar window
    Description of the illustration search_bar.png
  7. Click Save.
  8. Click Save and Run Page to run the report.

section 2Update Column Attributes

In this topic, you update the report heading names, date format, and currency format. 

Perform the following steps to update column attributes:

  1. In the Rendering tab under Content Body, locate the Sample Projects Tasks region.
  2. Under the Sample Projects Tasks, select the Columns node. Also, expand the Columns node.
  3. Under Columns, select PROJECT_ID_L$1.

    4. The Property Editor displays the column attributes. Attributes are organized in groups.

  4. Update the Heading attributes:
    • Heading - Enter Project
    • Alignment - Select Start left alignment .
    heading attribute window
    Description of the illustration heading_attribute.png
  5. In the Rendering tab, under Columns, select MILESTONE_ID_L$2.
  6. Update the Heading attributes:
    • Heading - Enter Milestone
    • Alignment - Select Start left alignment .
    heading attribute window
    Description of the illustration milestone_attribute.png
  7. In the Rendering tab, under Columns, select NAME.
  8. Update the Heading attributes:
    • Heading - Enter Tasks
    • Alignment - Select Start left alignment .
    heading attribute window
    Description of the illustration name_attribute.png
  9. Update the Format Mask for START_DATE and END_DATE:

    10. You can update the Start Date and End Date by selecting and pressing CTRL in the rendering tab and then select the new Format Mask for the selected columns.

    • In the Rendering tab under Columns, press CTRL and select START_DATE and END_DATE.
    • In the Property Editor, find Appearance.
    • For Format Mask, select 12-Jan-2004.
    start and end date attribute window
    Description of the illustration start_and_end_date_attributes.png

    DD-MON-YYYY appears in the Format Mask attribute.

  10. In the Rendering tab, under Columns, select COST.
    • In the Property Editor, find Appearance.
    • For Format Mask - select $5,234.10 from the Pick Format Mask dialog.
    cost attribute window
    Description of the illustration cost_attributes.png
  11. Click Save.
  12. Click Save and Run Page to run the report.
    13. tasks_report1 window
    Description of the illustration tasks_report1.png

    Notice the report heading names, date format, and currency format changes in the report.

section 2Update Column Order and Sorting

In this topic, you update column ordering and sorting.

Perform the following steps to update column order and sorting:

  1. Click the Actions menu and select Columns.
    2. column order sorting
    Description of the illustration column_order_sorting.png
  2. In the Select Columns dialog, click the arrow keys to change the order in which columns display. Change the order to the following:
    • Project
    • Milestone
    • Tasks
    • Start Date
    • End Date
    • Assignee
    • Cost
    • Description
    • Is Complete
    3. column sorting
    Description of the illustration sorting.png
  3. Click Apply.
    4. column order sorting completed
    Description of the illustration column_order_sorting_completed.png

    Notice the column order changes in the report.

section 2Save a New Primary Default Report

Only developers can save the Primary Default report which displays to all users.

The Primary Default report is the report that initially displays and cannot be renamed or deleted. Alternative reports enables you to create multiple report layouts. Only the person who creates an Alternative report can save, rename, or delete it.

Perform the following steps to save a new Primary Default report:

  1. Click the Actions menu and then select Report, and then Save Report* .

    2. The Save Report dialog appears.

  2. From Save, select As Default Report Settings.

    3. The Save Default Report dialog appears.

    save report
    Description of the illustration save_report.png
  3. From Save Default Report, select Primary.
  4. Click Apply.

more informationWant to Learn More?