Oracle Application Express 18: Customizing an Interactive Grid as a Developer

Before You Begin

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

Background

In this tutorial, you learn how to customize the report layout and change how data displays on the Milestones interactive grid page in the Create Application Wizard app. You update the SQL query so that only incomplete projects are updatable. Then you edit columns by updating the Type attribute. Finally, you hide columns, use options on the Action menu to resize the columns at runtime, change the column sort order, and then save a new Primary report.

What Do You Need?

Prerequisite : Complete the OBE series, Oracle Application Express 18: Create Application Wizard.
Access to Oracle Application Express 18.1 or later.

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 ODDHands OnLabs.html to start the browser.
- 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):

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.

Edit the SQL Query

Perform the following steps to edit the SQL Query:

Sign in to your development environment.
From the Workspace home page, click the App Builder icon.
Find the Create App Wizard application.

Note: If you can not find the Create App Wizard application then go through the Oracle By Example listed in the prerequisites to create the application before proceeding.

Select the Create App Wizard application.

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

Create App Wizard Application Page — Description of the illustration app_wizard_app.png

Click the Milestones page.

The Milestones page appears in Page Designer.

Milestone page — Description of the illustration app_wizard_milestone.png

In the Rendering tab, select the Milestones region.

Milestones region — Description of the illustration sample_milestones_region.png

In the Property Editor, find Source and in SQL Query replace the existing query.
Click the Code Editor icon.

The Code Editor appears.

Replace the query with the following: Click here to copy the query.

Description of the illustration sql_query.png

This new query creates a column to use for a row operation.
Click OK to exit the Code Editor.
Click Save.

Edit the Allowed Row Operation Column Attribute

In this topic, you update the Attribute, Allowed Row Operation Column, and select the column that determines whether the row can be updated.

Perform the following steps to set the Allowed Row Operation Column attribute to OPERATIONS:

In the Rendering tab, select Attributes under Content Body.

attribute window — Description of the illustration attributes.png

In the Property Editor, update the following:

Update the Edit attribute:

Allowed Row Operations Column - Select OPERATION

edit attribute window — Description of the illustration attributes_edit_node.png

Hide the OPERATION Column

Perform the following steps to hide the OPERATIONS column:

In the Rendering Tab under Content Body, expand the Columns node and select the OPERATION column.

operations window — Description of the illustration operations_node.png

Update the Identification attribute:

Type - Select Hidden.

operation column attribute window — Description of the illustration operation_column_attribute.png

Click Save.
Click Save and Run page to view your changes.
If a Sign In dialog appears, enter your workspace username and password and click Sign In.

A rendered version of the Milestones page appears.

Click Edit.
Scroll through the report.

milestones report — Description of the illustration milestones_report.png

Notice that inactive projects appear slightly grayed out and you can only edit incomplete projects.

Return to Page Designer.

Change the PROJECT_ID Column to a Select List

Perform the following steps to change the PROJECT_ID column to a select list:

In the Rendering Tab under Content Body, expand the Columns node and select the PROJECT_ID column.

Project ID window — Description of the illustration project_id.png

In the Property Editor, update the following:

Identification : Type - Select Select List.

Identification : Heading - Change to Project.

List of Values : Type - Select Shared Component.

List of Values : List of Values - Select SAMPLE$PROJECT_TASKS.PROJECT_ID.LOOKUP.

project id attributes — Description of the illustration project_id_column_attributes.png

Click Save.
Click Save and Run page to view your changes.
If a Sign In dialog appears, enter your workspace username and password and click Sign In.

A rendered version of the Milestones page appears.

milestones report updated — Description of the illustration milestones_report1.png

Notice that active projects now display as a select list.

Return to Page Designer.

Update the Name Column

Perform the following steps to change the Name column to a text field and alter the display:

In the Rendering Tab under Content Body, expand the Columns node and select the NAME column .

name column window — Description of the illustration name_column.png

In the Property Editor, update the following:

Identification : Type - Change to Text Field.

Heading : Heading - Change to Milestone.
Heading : Alignment- Select Start .

name column attributes window — Description of the illustration name_column_attributes.png

Click Save.
Click Save and Run page to view your changes.

milestone report name change window — Description of the illustration milestones_report_2.png

Notice the Name column has changed to Milestone.

Hide the CREATED, CREATED_BY, UPDATED_BY Columns

You can hide CREATED, CREATED_BY, UPDATED_BY Columns from displaying in an interactive grid by changing the column Type or by using the Hide option on the Actions menu.

To hide columns using the Actions menu:

In the rendered version of the application, select the Actions menu and then Columns.

hide column action — Description of the illustration hide_columns.png

The Columns dialog appears.

Under Displayed, deselect the columns CREATED, CREATED_BY,UPDATED_BY .

Click Save.

Change the Columns Using the Mouse

You can resize the columns in an interactive grid by selecting them with your mouse.

To resize the interactive grid columns:

Hover your mouse cursor over the edge of column heading until the cursor changes to .
Click and hold the mouse.
Move the mouse left and right to achieve the desired width.
Release the mouse.

column resizing cursor — Description of the illustration column_resizing_cursor.png

Change the Sort Order of Projects and Due Date

You can change the sort order of projects and due date.

To change the sort order of the Projects and Due Date columns:

Hover the mouse in the Projects column heading.

The Sort Ascending and Sort Descending buttons display ascend and descend order .

ascending descending buttons option — Description of the illustration ascending_descending.png

Click the Sort Ascending button .

sort ascending option — Description of the illustration sort_ascending.png

Sort the Due Date column in ascending order:

Hover the mouse in the Due Date column heading.

The Sort Ascending and Sort Descending buttons display ascend and descend order .

Click the Sort Ascending button .

The columns now display in ascending order.

due date ascending — Description of the illustration due_date_ascending.png

Return to Page Designer.

Enable Users to Save a Public Report

Update Attributes to enable users to save a public report. By default, this option is disabled.

Perform the following steps to enable users to save a public report:

In the Rendering Tab under Content Body, select Attributes .

attributes rendering tab — Description of the illustration attributes_rendering_tab.png

In the Property Editor:

Find Enable Users To .
For Save Public Report - Select Yes.

enable users to attribute — Description of the illustration enable_users_to_attribute.png

Click Save.

Update the Primary Report

A Primary interactive report displays to all users. Only developers can save Primary reports or add Alternative reports. It is impossible to delete a primary report.