Oracle Application
Oracle Application
Oracle Application
Release 20.1
F24727-01
June 2020
Oracle Application Express Tutorial: Building an Application, Release 20.1
F24727-01
This software and related documentation are provided under a license agreement containing restrictions on
use and disclosure and are protected by intellectual property laws. Except as expressly permitted in your
license agreement or allowed by law, you may not use, copy, reproduce, translate, broadcast, modify,
license, transmit, distribute, exhibit, perform, publish, or display any part, in any form, or by any means.
Reverse engineering, disassembly, or decompilation of this software, unless required by law for
interoperability, is prohibited.
The information contained herein is subject to change without notice and is not warranted to be error-free. If
you find any errors, please report them to us in writing.
If this is software or related documentation that is delivered to the U.S. Government or anyone licensing it on
behalf of the U.S. Government, then the following notice is applicable:
U.S. GOVERNMENT END USERS: Oracle programs (including any operating system, integrated software,
any programs embedded, installed or activated on delivered hardware, and modifications of such programs)
and Oracle computer documentation or other Oracle data delivered to or accessed by U.S. Government end
users are "commercial computer software" or “commercial computer software documentation” pursuant to the
applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, the use,
reproduction, duplication, release, display, disclosure, modification, preparation of derivative works, and/or
adaptation of i) Oracle programs (including any operating system, integrated software, any programs
embedded, installed or activated on delivered hardware, and modifications of such programs), ii) Oracle
computer documentation and/or iii) other Oracle data, is subject to the rights and limitations specified in the
license contained in the applicable contract. The terms governing the U.S. Government’s use of Oracle cloud
services are defined by the applicable contract for such services. No other rights are granted to the U.S.
Government.
This software or hardware is developed for general use in a variety of information management applications.
It is not developed or intended for use in any inherently dangerous applications, including applications that
may create a risk of personal injury. If you use this software or hardware in dangerous applications, then you
shall be responsible to take all appropriate fail-safe, backup, redundancy, and other measures to ensure its
safe use. Oracle Corporation and its affiliates disclaim any liability for any damages caused by use of this
software or hardware in dangerous applications.
Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of
their respective owners.
Intel and Intel Inside are trademarks or registered trademarks of Intel Corporation. All SPARC trademarks are
used under license and are trademarks or registered trademarks of SPARC International, Inc. AMD, Epyc,
and the AMD logo are trademarks or registered trademarks of Advanced Micro Devices. UNIX is a registered
trademark of The Open Group.
This software or hardware and documentation may provide access to or information about content, products,
and services from third parties. Oracle Corporation and its affiliates are not responsible for and expressly
disclaim all warranties of any kind with respect to third-party content, products, and services unless otherwise
set forth in an applicable agreement between you and Oracle. Oracle Corporation and its affiliates will not be
responsible for any loss, costs, or damages incurred due to your access to or use of third-party content,
products, or services, except as set forth in an applicable agreement between you and Oracle.
Contents
Preface
Audience v
Documentation Accessibility v
Related Documents v
Conventions vi
iii
5.5 Creating a Dynamic Action 5-16
5.6 Adding Validations to Completed Date 5-19
Index
iv
Preface
Oracle Application Express Tutorial: Building an Application demonstrates how to build
a working application for managing projects and tasks using some of the latest
features of Oracle Application Express.
Audience
Oracle Application Express Tutorial: Building an Application is intended for workspace
administrators who want to set up an Oracle Application Express development
environment and application developers who want to learn how to build database-
centric web applications using Oracle Application Express.
To use this guide, you must have a general understanding of relational database
concepts and the operating system environment under which Oracle Application
Express is running.
Documentation Accessibility
For information about Oracle's commitment to accessibility, visit the Oracle
Accessibility Program website at http://www.oracle.com/pls/topic/lookup?
ctx=acc&id=docacc.
Related Documents
For more information, see these Oracle resources:
• Oracle Application Express Release Notes
• Oracle Application Express Installation Guide
• Oracle Application Express End User’s Guide
• Oracle Application Express App Builder User’s Guide
• Oracle Application Express Administration Guide
• Oracle Application Express SQL Workshop Guide
• Oracle Application Express API Reference
• Oracle Application Express Application Migration Guide
v
Preface
Conventions
The following text conventions are used in this document:
Convention Meaning
boldface Boldface type indicates graphical user interface elements associated
with an action, or terms defined in text or the glossary.
italic Italic type indicates book titles, emphasis, or placeholder variables for
which you supply particular values.
monospace Monospace type indicates commands within a paragraph, URLs, code
in examples, text that appears on the screen, or text that you enter.
vi
1
About Oracle Application Express
Oracle Application Express is an environment designed for rapid application
development and deployment.
You can develop professional applications that are both fast and secure using only a
web browser and limited programming experience. Oracle Application Express
accelerates the application development process with features such as user interface
themes, navigational controls, form handlers, and flexible reports. The deployed
applications require only a browser and access to an Oracle database running
Application Express.
This tutorial is intended to guide you through almost every step of creating an app with
a focused amount of context. For more in-depth information about Oracle Application
Express, see the "Quick Start" section of the Oracle Application Express App Builder
User’s Guide.
1-1
2
Before You Begin
For this tutorial, you must have access to an Oracle Application Express environment
and an account with development privileges.
2-1
3
Populating Your Workspace
To build an Oracle Application Express app, you need a complete set of tables and
data.
3-1
Chapter 3
Installing the Sample Datasets
Tip:
You can also click the down arrow icons to open the drop-down menus
on the tabs at the top of the screen to shortcut your way around your
workspace.
3. Find Project Data in the list and click the adjacent Install button.
3-2
Chapter 3
Installing the Sample Datasets
3-3
Chapter 3
Reviewing the Created Tables with Object Browser
Note:
The Create Application button is a shortcut to the Create Application
Wizard loaded with the sample data.
You have populated the sample tables and data in your workspace.
3-4
Chapter 3
Reviewing the Created Tables with Object Browser
Tip:
For quicker navigation, click the arrow next to SQL Workshop to display
a drop-down menu.
4. Click the Data tab. The Data tab displays the raw information of the EBA_PROJECTS
table.
3-5
Chapter 3
Reviewing the Created Tables with Object Browser
Note:
You can edit the data directly by clicking the Edit icon on the Data report.
However, leave the data unchanged for now.
5. When finished, click the Oracle logo in the top-left of the page to return to the
Workspace home page.
You have fully populated your workspace and are ready to create a new application.
Proceed to the next lesson.
3-6
4
Creating the Initial Application
About This Lesson
In this lesson, you use the Create Application Wizard to build the foundational pages
of your application based on the sample dataset.
After you build the foundation of your app, use Page Designer’s Create Page Wizard
to add a new page to an existing app and run the app for the first time.
WARNING:
It is important to complete this chapter in one sitting. You cannot save your
work until the end. If you stop before completion and your session times out,
all your progress will be lost, and you will have to start the chapter again.
Tip:
You can also click the down arrow icon on the tabs at the top of the
screen to view a list of shortcuts to wizard and other pages.
Note:
The Create Application wizard creates a Home page automatically.
4-1
Chapter 4
Adding a Cards Page
4-2
Chapter 4
Adding a Dashboard Page
Note:
A cards page consists of individual boxes, which resemble index cards, laid
out on a page. Each card holds up to three pieces of information.
4-3
Chapter 4
Adding a Dashboard Page
4. Click Chart 2.
5. Enter the following:
a. Chart Type - click Pie
b. Chart Name - enter Project Status
c. Table or View - select EBA_PROJECTS
d. Label Column - select STATUS_ID
e. Aggregate Type - click Count
4-4
Chapter 4
Moving Pages in the Create Application Wizard
2. Drag the Dashboard page above the Projects page and release the mouse.
4-5
Chapter 4
Configuring Features and Advanced Settings
4-6
Chapter 4
Configuring Features and Advanced Settings
Tip:
While sometimes more complicated, you can also add Features to an
existing app later with the Create Page Wizard.
4-7
Chapter 4
Completing the Create Application Wizard
4-8
Chapter 4
Running the Application for the First Time
Note:
Page 0 is a global page where you can define components to be
displayed on all pages. Page 9999 is the Sign In page where end users
authenticate when first accessing the application (enter their username
and password). Pages 1000 and greater are administrative pages
created for the features that you selected.
4-9
Chapter 4
Running the Application for the First Time
4-10
Chapter 4
Running the Application for the First Time
Memorize the location of the menu icon. You use it throughout the rest of the
tutorial to navigate the app.
4. Explore the application by clicking on menu items and navigating to different
pages in the navigation pane.
The sample tables and data display on various pages in a raw format. The rest of
this tutorial guides you through the development process to improve both the
presentation and functionality of this data for your end users.
Proceed to the next lesson.
4-11
5
Developing the Projects Page
Use the Create Page Wizard and Page Designer to add a sophisticated form page for
the Projects report.
You can use the Runtime Developer toolbar to quickly edit the page (and some
aspects of the entire application). This toolbar only displays for users with developer or
administrator privileges.
1. To view the Home page in Page Designer using the Runtime Developer toolbar:
1. In the top-left of the application runtime, do one of the following:
• Click the name of the app Demo Projects.
• Expand the navigation menu (click the menu icon) and click Home. (Do not
click Home on the Developer Toolbar.)
The runtime Home page displays.
2. On the Runtime Developer toolbar, click Edit Page 1.
Page Designer displays page 1.
5-1
Chapter 5
Creating a Form Page Using the Create Page Wizard
Tip:
The number in the Edit Page # button corresponds to its assigned page
number in Page Designer.
Tip:
Page Designer is the primary asset for Application Express developers. It's a
powerful IDE (integrated development environment) with a robust array of
tools for building, maintaining, and enhancing applications. Up to this point,
you have mainly experienced the Create Application Wizard and SQL
Workshop.
You rely primarily on Page Designer for the rest of this tutorial.
You can always learn more about Page Designer with the official Oracle
Application Express App Builder User’s Guide.
5-2
Chapter 5
Linking Project Cards to Maintain Project Form
a. Table / View name - click the List of Values icon and select
EBA_PROJECTS (table)
b. Click Next.
7. For Create Form - Columns and Primary Key, enter the following:
a. Primary Key Type - select Managed by Database (ROWID)
b. Click Create.
Page Designer reloads displaying Page 4: Maintain Project.
5-3
Chapter 5
Linking Project Cards to Maintain Project Form
• Click the Page Finder icon and select 3 from the list.
• Change the page number to 3 and press Enter.
• Click the Navigate to Previous Page icon (down arrow).
Page Designer loads Page 3: Projects.
2. To update the SQL of the Projects region:
3. Do one of the following to select the Projects region:
• In the Rendering tab (left pane), under Regions - Content Body, select
Projects.
• In the Layout tab (center pane), scroll down and click the Projects region.
4. In Property Editor (right pane), in the Source group, locate the SQL Query field.
5-4
Chapter 5
Linking Project Cards to Maintain Project Form
5. Click the Code Editor: SQL Query icon to read the code more easily.
Reviewing the SQL Query, you can see that the SQL uses alias names, such as
CARD_MODIFIERS and CARD_LINK. These specific aliases are required by the
Cards region to produce the correct output. The alias CARD_LINK can be updated
to link to the new page you just created.
6. In the SQL Query field, replace the contents with the following code:
5-5
Chapter 5
Linking Project Cards to Maintain Project Form
Tip:
You can also click the Save button and then Save and Run Page to
avoid this warning.
10. Click a project to view the Maintain Project form for that project.
5-6
Chapter 5
Updating the Maintain Project Form in Page Designer
Your users should not have unlimited access to several fields, either because the
field does not pertain to the task of updating project details (such as IDs) or the
access compromises data integrity and security (various timestamps).
3. To quickly return to Maintain Project form in Page Designer:
11. On the Runtime Developer toolbar at the bottom of the screen, click Edit Page 4.
5-7
Chapter 5
Updating the Maintain Project Form in Page Designer
Tip:
You can also use the mouse to drag and drop elements in the
Rendering tab and Layout tab.
5-8
Chapter 5
Updating the Maintain Project Form in Page Designer
4. Click Save:
select description d, id r
from EBA_PROJECT_STATUS
order by display_order
- Select Status -
5-9
Chapter 5
Updating the Maintain Project Form in Page Designer
The above SQL uses the base table EBA_PROJECT_STATUS which includes a
column called display_order to ensure the records display in the correct order.
7. Click Save.
4. To change multiple items simultaneously:
8. Press and hold the Ctrl key and click the following items to select both of them:
a. P4_NAME
b. P4_PROJECT_LEAD
9. In the Property Editor:
5-10
Chapter 5
Updating the Maintain Project Form in Page Designer
When selecting multiple elements, the Property Editor only displays the attributes
that all the selected elements have in common.
5. To create a collapsible sub region:
10. In the Rendering tab, right-click the Maintain Project region and select Create
Sub Region.
The New sub region appears within the Sub Regions folder.
5-11
Chapter 5
Updating the Maintain Project Form in Page Designer
5-12
Chapter 5
Updating the Maintain Project Form in Page Designer
5-13
Chapter 5
Updating the Maintain Project Form in Page Designer
d. Click OK.
The Template Options button reflects the current configuration: "Use Template
Defaults, Remember Collapsible State, Collapsed, Remove Borders, Scroll -
Default".
• P4_CREATED
• P4_CREATED_BY
• P4_UPDATED
• P4_UPDATED_BY
5-14
Chapter 5
Updating the Maintain Project Form in Page Designer
Note:
The double periods are a shortening device for the names of sub
regions in the interface. Think of it as actually reading "the sub
region Audit Details."
7. The Maintain Project form is a modal page. You cannot run a modal page directly
from Page Designer the way you can other pages. You must navigate to the
associated non-modal page in the runtime (in this case, page 3 - Projects), then
open the modal page from there.
To run the modal Maintain Project page:
18. Switch back to the runtime tab in your browser and reload the Projects page.
(Click your browser's refresh or reload button.)
19. Click a project card. Note the changed Status field and expandable Audit Details
region.
5-15
Chapter 5
Creating a Dynamic Action
5-16
Chapter 5
Creating a Dynamic Action
Dynamic Actions within Application Express are used to declaratively define client-side
behaviors without writing JavaScript or AJAX. Instead, the Application Express engine
implements the necessary code based on your declaration.
1. To create a Dynamic Action:
1. In the Rendering tab, right-click the P4_STATUS_ID item and select Create
Dynamic Action.
A Dynamic Actions element populates as a child to P4_STATUS.
Note:
Entering 3 in the Value field (status_ID=3) targets the third item in
the select list, which in this case is the "Completed" status.
3. In the Rendering tab, under the Show Completed Date dynamic action, select the
Show element.
5-17
Chapter 5
Creating a Dynamic Action
5-18
Chapter 5
Adding Validations to Completed Date
5-19
Chapter 5
Adding Validations to Completed Date
5-20
Chapter 5
Adding Validations to Completed Date
Note:
The label from the associated item replaces the #LABEL# text within
the Error Message. If you update the item label, the error message
also updates automatically. This improves consistency and ensures
that messages have current label references.
Tip:
When you click within an attribute in Property Editor, you can view
examples of content (such as error messages) for that attribute by
clicking the Help tab at the top of the Layout tab.
i. Click Save.
2. To copy a validation:
4. In the Processing tab, right-click Completed Date is NOT NULL and select
Duplicate.
The item "Completed Date is NOT NULL_1" populates, selected.
5. In the Property Editor:
a. Identification: Name - enter Completed Date is not Forward Dated
b. Validation: Type - select PL/SQL Expression
c. Validation: PL/SQL Expression - enter :P4_COMPLETED_DATE <= SYSDATE
Tip:
Ensure you include the colon ( : ) . To reference a page item in PL/
SQL, you use the :ITEM_NAME syntax. SYSDATE returns the current
date from the Oracle Database.
5-21
Chapter 5
Adding Validations to Completed Date
6. Click Save.
7. In the runtime, reload the Projects page (reload the browser tab) and click a
project card to display Maintain Project.
The form is complete.
5-22
Chapter 5
Adding Validations to Completed Date
5-23
6
Developing the Milestones Page
Use the Create Page Wizard and Page Designer to add an interactive grid page to the
application so that users can manage project Milestones.
In this lesson, you use the Create Page Wizard to add a new interactive grid page.
Similar to the older interactive report, interactive grids do not require a paired form
page to change the content displayed on the page.
In addition to the EBA_PROJECTS table, the app also contains the
EBA_PROJECT_MILESTONES and EBA_PROJECT_TASKS tables. These two tables contain
data for incremental milestones and tasks that help to track the progress of an entire
project more precisely.
Currently, your app only supports changes to the status of entire projects. Develop the
Milestones interactive grid so that your users can view and change the status of these
tasks and milestones.
Add and configure a Milestones entry in the Desktop Navigation Menu so it displays
across the entire app.
Use Dynamic LOVs (or lookups) to intelligently substitute information from another
table by checking against the ID of the content in the original table.
Repeat some familiar tasks to clean up the interactive grid in Page Designer and in the
runtime to make it more user-friendly.
6-1
Chapter 6
Updating the Navigation Menu for Milestones
c. Click Create.
The new Milestones page loads in Page Designer.
8. Click Save and Run Page.
The Milestones report displays in the runtime.
6-2
Chapter 6
Updating the Navigation Menu for Milestones
• Near the Save button, click the Shared Components icon ( ). Under
Navigation, click Navigation Menu, and click Desktop Navigation Menu.
2. Update the sequence and the icon from the blank default for Milestones.
To update the Milestones list entry:
3. Click Milestones.
4. Enter the following:
a. Sequence - enter 50
Use 50 to stay in sync with the page number (5).
b. Image/Class - click the LOV icon and select fa-table-pointer
Tip:
Use the search function in your browser to find the icon easily (Ctrl +
F or Cmd + F).
6-3
Chapter 6
Hiding Columns in the Application Runtime
5. Click the Run icon ( ) in the top-right corner to run the app. Note the
changes to the navigation sidebar.
Tip:
Oracle recommends hiding columns rather than deleting them in case you
need them in the future.
1. In the runtime, you can hide columns using the Column Heading menu or the
Actions menu.
To quickly hide a column in an interactive grid:
1. Click the Id column heading and select Hide.
6-4
Chapter 6
Hiding Columns in the Application Runtime
3. In the list of columns on the left, click the check boxes adjacent to the following
columns to deselect them:
• Created
• Created By
• Updated
• Updated By
6-5
Chapter 6
Hiding Columns in the Application Runtime
4. Click Save.
3. Rearrange the columns in the interactive grid to prioritize the Due Date over other
information.
5. To move a column, do one of the following:
• Drag and Drop Column Heading
a. Hover the mouse over the Due Date column heading. Note the thin dotted
columns that display at the start of the heading. These are the grip handle.
b. Click and hold the grip handle and drag and drop the Due Date column
between Project Id and Name.
6-6
Chapter 6
Adding Project Names to the Milestones Interactive Grid
Then use Page Designer to convert the PROJECT_ID column to a Select List, and
choose the Dynamic LOV / lookup to display the alphanumerical name of the
referenced project instead of the numerical ID.
1. To return to Page Designer:
1. Click Edit Page 5 on the Runtime Developer Toolbar.
2. To create a new Dynamic LOV lookup:
6-7
Chapter 6
Adding Project Names to the Milestones Interactive Grid
select NAME d, ID r
from EBA_PROJECTS
order by NAME
9. Click Next.
10. Click Create.
The Lists of Values screen redisplays with the Project Name LOV present.
11. Click the Edit Page 5 icon in the top-right to return to the Milestones page in Page
Designer.
13. In the Rendering tab, under Milestones, expand Columns and select
PROJECT_ID.
14. In Property Editor:
- Select Project -
6-8
Chapter 6
Changing the Appearance of an Interactive Grid in Page Designer
16. Review your changes to the Project column in the Runtime. When finished, click
Edit Page 5 to return to Page Designer.
6-9
Chapter 6
Finalizing the Milestones Interactive Grid in the Runtime
d. UPDATED_BY
5. In Property Editor:
6-10
Chapter 6
Finalizing the Milestones Interactive Grid in the Runtime
6-11
7
Developing the Tasks Page
Use the Create Page Wizard to create a new Report with Form for end users to
manage their project tasks.
7-1
Chapter 7
Updating the Tasks Page in the Runtime
In the runtime, note that as you scroll right, the report displays numerical identifiers in
several columns as well as audit detail columns.
Perform the same tasks as you did for Milestones to update the Tasks page.
7-2
Chapter 7
Updating the Tasks Page in the Runtime
7-3
Chapter 7
Applying Lookups to the Tasks Interactive Report
Then apply the two lookups to the PROJECT_ID and MILESTONE_ID columns.
1. To copy an LOV:
1. Click Edit Page 6 on the Runtime Developer toolbar to return to Page Designer.
2. Click the Shared Components icon.
3. Under Other Components, click List of Values.
4. Click Copy.
5. For Copy List of Values:
a. Copy List of Values - select PROJECT NAME - Dynamic
b. New List of Values Name - enter Milestone Name
c. Click Copy.
The Lists of Values screen redisplays with the MILESTONE NAME item.
6. Click MILESTONE NAME.
7. Under Query, delete the contents then copy and paste the following code:
select NAME d, ID r
from EBA_PROJECT_MILESTONES
order by NAME
7-4
Chapter 7
Updating the Remaining Columns in the Tasks Report
16. Scroll down the report to review the Project and Milestone columns in the Runtime.
When finished, click Edit Page 6 to return to Page Designer.
Tip:
You can also enter DD-MON-YYYY in the field without opening the list.
c. Click Save.
3. To apply a dollar amount format mask to a column:
5. In the Rendering tab, select COST.
7-5
Chapter 7
Updating the Remaining Columns in the Tasks Report
6. In Property Editor:
a. Appearance: Format Mask - click the LOV icon
b. Scroll down and select $5,234.10.
c. Click Save.
4. To configure an interactive report with a _YN column to display "Yes" and "No"
(instead of Y or N):
7. In the Rendering tab, select IS_COMPLETE_YN.
8. In Property Editor:
a. Heading: Heading - enter Complete
b. Click Save.
9. Click the Tasks report region (under Content Body in the Rendering tab).
10. In Property Editor:
select ID,
PROJECT_ID,
MILESTONE_ID,
NAME,
DESCRIPTION,
ASSIGNEE,
START_DATE,
END_DATE,
COST,
decode(is_complete_yn, 'Y', 'Yes', 'No') IS_COMPLETE_YN,
CREATED,
CREATED_BY,
UPDATED,
UPDATED_BY
from EBA_PROJECT_TASKS
The decode statement is used to compare the column value against the first value
("Y") and replace it with the next value ("Yes"), and otherwise replace it with the
final value ("No").
11. Click Save and Run Page.
7-6
Chapter 7
Updating the Project and Milestone Fields in the Update Task Form
12. Review your changes to the report in the runtime. When finished, proceed to the
next section.
7-7
Chapter 7
Updating the Project and Milestone Fields in the Update Task Form
7-8
Chapter 7
Updating the Project and Milestone Fields in the Update Task Form
You enter Quick Edit mode. The screen darkens and when you mouse over
different elements a wrench icon displays.
3. In Quick Edit mode, click the Project Id field (do not click the wrench icon).
7-9
Chapter 7
Updating the Remaining Fields in the Update Task Form
9. Note the changed Project and Milestone fields. Click each to see how they
behave.
10. When finished, click Edit Page 7 on the Runtime Developer toolbar.
d. Click Save.
3. To update the P7_START_DATE and P7_END_DATE fields:
5. Hold Shift or Ctrl and click P7_START_DATE and P7_END_DATE to select them
both.
6. In Property Editor:
a. Settings: Show - select Both.
b. Appearance: Format Mask - click the LOV icon.
c. Select 12-JAN-2004.
7. Click P7_END_DATE to only select it.
8. In Property Editor:
7-10
Chapter 7
Updating the Remaining Fields in the Update Task Form
• P7_CREATED
• P7_CREATED_BY
• P7_UPDATED
• P7_UPDATED_BY
14. In Property Editor:
7-11
Chapter 7
Updating the Remaining Fields in the Update Task Form
17. Review your changes. Try clicking around the form to explore the new interface.
When finished, click Application ##### on the Runtime Developer toolbar to
return to the Application home page.
The Tasks report with form is complete. Proceed to the next lesson.
7-12
8
Developing the Dashboard Page
Update and add new regions to the Dashboard page with Page Designer.
8-1
Chapter 8
Deleting Regions in Page Designer
Start by deleting the charts you no longer want, then update the remaining chart
with another series to display more budget information.
To delete multiple regions in Page Designer:
3. Click Edit Page 2 on the Runtime Developer toolbar.
4. In Page Designer, hold Ctrl and click the three following items to select them:
• Project Status
• Chart 3
• Chart 4
8-2
Chapter 8
Updating the Series in the Project Costs Chart
8-3
Chapter 8
Updating the Series in the Project Costs Chart
d. Click OK.
An error message displays under Column Mapping: Value.
Note:
The above SQL is a significant update to the old code. This revised
SQL joins the EBA_PROJECT_TASKS and EBA_PROJECTS tables so the
chart displays the project name instead of the project ID. This
requires including the where condition to link the primary key column
from Projects (p.id) with the foreign key column from Tasks
(t.project_id). Finally, the group by clause was updated because
the specified column (PROJECT_ID) no longer displays (changed to
p.name).
8-4
Chapter 8
Updating the Appearance of the Dashboard Chart
8. Click Save and Run Page. Review the changes to the labels along the X-axis and
the new columns for each project. You can also mouse over each column for more
details.
8-5
Chapter 8
Updating the Live Template Options for the Dashboard Chart
The runtime reloads, but you must scroll down within the region to see your
changes to the chart.
8-6
Chapter 8
Adding a Classic Report Region from Gallery
8-7
Chapter 8
Adding a Classic Report Region from Gallery
Tip:
You can also add elements from the Gallery with the mouse using drag
and drop.
4. In Property Editor:
a. Identification: Title - enter Incomplete Tasks
b. Source: Type - select SQL Query
c. Source: SQL Query - copy and paste the following code:
8-8
Chapter 8
Adding a Classic Report Region from Gallery
5. Click Save and Run Page. Scroll down to view the report in the runtime.
2. The report displays an appropriate amount of information and columns, but it has
some residual layout problems. You can change this value in Live Template
Options.
To open Live Template Options in the runtime:
6. On the Runtime Developer toolbar, click Quick Edit.
7. Mouse over the Incomplete Tasks region and click the wrench icon (top-right).
8. In Live Template Options:
a. General - check Remove Body Padding
b. Click the Attributes tab (top).
c. General - check Stretch Report
d. Click Save.
9. Click Application ##### on the Runtime Developer toolbar to return to the
Application home page.
The report is finished and the Dashboard is complete.
Proceed to the next lesson.
8-9
9
Developing the Task Overview Page
Create a Faceted Search page based on the EBA_PROJECT_TASKS table that provides a
broad, easily sortable overview of all project work tracked in the app.
9-1
Chapter 9
Creating a Faceted Search Page
Note:
The Create Page Wizard uses the Data Dictionary Cache to discover
valid facets. To learn more about this process, see "About Creating
Facet Search Reports" in the Oracle Application Express App Builder
User’s Guide.
d. Click Create.
When the wizard completes, Application Express loads the Task Overview page in
Page Designer automatically.
7. Click Save and Run Page to view the page in the runtime.
9-2
Chapter 9
Updating the Task Overview Search Results
8. When finished, click Edit Page 8 on the Runtime Developer toolbar to return to
Page Designer.
select ID,
PROJECT_ID,
9-3
Chapter 9
Updating the Task Overview Search Results
MILESTONE_ID,
NAME,
DESCRIPTION,
ASSIGNEE,
START_DATE,
END_DATE,
COST,
decode(is_complete_yn, 'Y', 'Yes', 'No') IS_COMPLETE_YN,
CREATED,
CREATED_BY,
UPDATED,
UPDATED_BY
from EBA_PROJECT_TASKS
c. Click Save.
2. To apply a format mask to COST:
6. In the Rendering tab, select the COST column.
7. In Property Editor:
a. Appearance: Format Mask - click the LOV icon.
b. Scroll down and select $5,234.10.
c. Click Save.
3. To update the Navigation Menu entry for the Task Overview page:
8. Click the Shared Components icon.
9. Under Navigation, click Navigation Menu.
10. Click Desktop Navigation Menu.
16. In the runtime, click the menu icon (top-left) to expand the navigation menu.
9-4
Chapter 9
Updating the Task Overview Facets
The faceted search page is useful for quickly sorting through the contents of a
table. Interact with the facets to learn how they affect the results:
• Select and deselect facets on the left to narrow the scope of the display.
• Select multiple facets in the same category.
• Click Clear to deselect all facets in a category.
17. When finished, click Edit Page 8 on the Runtime Developer toolbar to return to
Page Designer.
9-5
Chapter 9
Updating the Task Overview Facets
9-6
Chapter 9
Updating the Task Overview Facets
If you select the Configure Web Environment project, the Milestone facet group
does not display because this Project does not contain any Milestones.
5. When finished, click Edit Page 8 on the Runtime Developer toolbar.
3. To add a search field to the Project facet group:
6. In the Rendering tab, under Search, select P8_PROJECT_ID.
7. In Property Editor:
a. List Entries: Zero Count Entries - select Show Last.
b. List Entries: Client-Side Filtering - click to enable.
Enabling Client-Side Filtering adds the text search field to the region. "Zero
Count Entries - Show Last" moves facets with no results for the selected
facets to the bottom of the list. They display as null.
c. Click Save and Run Page.
9-7
Chapter 9
Updating the Task Overview Facets
9-8
Index
A list of values (LOV), 5-7
Live Template Options, 8-6
alias (SQL), 5-3 lookup, 6-7, 7-4
App Gallery, 8-7
Appearance Template, 6-9
application runtime, 4-8, 4-9
N
Navigation Menu, 6-2, 7-2
C
Cards page, 4-2
O
Classic Report, 8-7 opposite action, 5-16
Create Application wizard
Advanced Settings, 4-6
Features, 4-6 P
Settings, 4-6 Processing tab, 5-19
Create Application Wizard, 4-1 projects page, 5-2
Add Page function, 4-1
Q
D
Quick Edit
Dashboard page, 4-3 Live Template Options, 8-6
Developer Toolbar, 5-1
Display Only, 6-9
dynamic action, 5-16 R
Dynamic LOV, 6-7, 7-4
region, 5-7
runtime, 4-8, 4-9, 5-1
F
form page, 5-2 S
Format Mask, 7-5
Save and Run Page, 4-8, 4-9
Select List, 6-7
H Shared Components
Navigation Menu, 6-2, 7-2
hidden column, 5-7 sub region, 5-7
I T
interactive grid, 6-1 Template
interactive report Appearance, 6-9
column heading, 7-5 Template Options, 5-7
L V
link (SQL), 5-3 validation, 5-19
Index-1