Customizing an Interactive Grid APEX 18

https://docs.oracle.com/en/database/oracle/application-express/18/ig_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
U ovom tutorialu ćete naučiti da prilagodite izgled izvještaja i promijenite način prikazivanja
podataka na stranici Milestones interaktivne stranice Grida u Create Application Wizardu. Ažurirate
SQL upit tako da se ažuriraju samo nepotpuni projekti. Zatim uređivati kolone ažuriranjem atributa
Type. Konačno, sakriti kolone, koristiti opcije na meniju Action da promijenite širinu kolone tokom
izvršavanja, promijenite redoslijed sortiranja kolona i pohranite novi Primarni izvještaj.

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:
o Click the big red circle labeled Start.
o Click ODDHands OnLabs.html to start the browser.
o Click the APEX shortcut, or enter the following URL :
http://localhost:8080/ords/f?p=4550:1
o When prompted to sign in, enter the sign in credentials (unless given other
credentials to use):
 Workspace : obe
 Username : obe
 Password : oracle
 2

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.

1. Edit the SQL Query

Perform the following steps to edit the SQL Query:
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.
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.

app_wizard

4. Select the Create App Wizard application.

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

app_wizard_app

5. Click the Milestones page.

The Milestones page appears in Page Designer.

app_wizard_milestone
 4

6. In the Rendering tab, select the Milestones region.

sample_milestones_region

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

The Code Editor appears. query_editor_icon

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

sql_query

This new query creates a column to use for a row operation.

 5

10. Click OK to exit the Code Editor.

11. Click Save.

2. 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:
1. In the Rendering tab, select Attributes under Content Body.

illustration attributes

In the Property Editor, update the following:

2. Update the Edit attribute:

o Allowed Row Operations Column - Select OPERATION
 6

attributes_edit_node

3. Hide the OPERATION Column

Perform the following steps to hide the OPERATIONS column:
1. In the Rendering Tab under Content Body, expand the Columns node and select the
OPERATION column.
 7

operations_node

2. Update the Identification attribute:

o Type - Select Hidden.
 8

operation_column_attribute

3. Click Save.
4. Click Save and Run page to view your changes.
5. If a Sign In dialog appears, enter your workspace username and password and click Sign In.
A rendered version of the Milestones page appears.
6. Click Edit.
7. Scroll through the report.
 9

milestones_report

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

8. Return to Page Designer.

4. Change the PROJECT_ID Column to a Select List

Perform the following steps to change the PROJECT_ID column to a select list:
1. In the Rendering Tab under Content Body, expand the Columns node and select the
PROJECT_ID column.

illustration project_id
 10

2. In the Property Editor, update the following:

o Identification : Type - Select Select List.
o Identification : Heading - Change to Project.
o List of Values : Type - Select Shared Component.
o List of Values : List of Values - Select
SAMPLE$PROJECT_TASKS.PROJECT_ID.LOOKUP.

project_id_column_attributes

3. Click Save.
4. Click Save and Run page to view your changes.
5. If a Sign In dialog appears, enter your workspace username and password and click Sign In.
A rendered version of the Milestones page appears.
 11

milestones_report1

Notice that active projects now display as a select list.

6. Return to Page Designer.

5. Update the Name Column

Perform the following steps to change the Name column to a text field and alter the display:
1. In the Rendering Tab under Content Body, expand the Columns node and select the
NAME column .
 12

name_column

2. In the Property Editor, update the following:

o Identification : Type - Change to Text Field.
o Heading : Heading - Change to Milestone.
o Heading : Alignment- Select Start .

name_column_attributes
 13

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

milestones_report_2

Notice the Name column has changed to Milestone.

6. 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:

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

hide_columns

The Columns dialog appears.

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

columns_dialog

3. Click Save.
 15

7. 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:
1. Hover your mouse cursor over the edge of column heading until the cursor changes to .
2. Click and hold the mouse.
3. Move the mouse left and right to achieve the desired width.
4. Release the mouse.

column_resizing_cursor

8. Change the Sort Order of Projects and Due Date

You can change the sort order of projects and due date.
1. To change the sort order of the Projects and Due Date columns:
o Hover the mouse in the Projects column heading.

The Sort Ascending and Sort Descending buttons display .

ascending_descending

o Click the Sort Ascending button .

 16

sort_ascending

2. Sort the Due Date column in ascending order:

o Hover the mouse in the Due Date column heading.

The Sort Ascending and Sort Descending buttons display .

o Click the Sort Ascending button .
The columns now display in ascending order.

due_date_ascending

3. Return to Page Designer.

9. 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:
1. In the Rendering Tab under Content Body, select Attributes .
 17

attributes_rendering_tab

2. In the Property Editor:

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

enable_users_to_attribute

3. Click Save.
 18

10. 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.
Perform the following steps to save a new primary interactive grid:
1. Run the page. Click Save and Run Page.
2. Click the Actions menu.
3. Select Report and then Save.
The following message displays: Default report saved for all users.