Oracle APEX Developer Professional - Activity Guide
Oracle APEX Developer Professional - Activity Guide
D107336GC10
Activity Guide
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
Disclaimer
This document contains proprietary information and is protected by copyright and other intellectual property laws.
The document may not be modified or altered in any way. Except where your use constitutes "fair use" under
copyright law, you may not use, share, download, upload, copy, print, display, perform, reproduce, publish, license,
post, transmit, or distribute this document in whole or in part without the express authorization of Oracle.
The information contained in this document 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.
a
Restricted Rights Notice
as
If this documentation is delivered to the United States Government or anyone using the documentation on behalf of
h
the United States Government, the following notice is applicable:
. m)
U.S. GOVERNMENT END USERS: Oracle programs (including any operating system, integrated software, any
ide .co
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
Gu ail
"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,
is m
duplication, release, display, disclosure, modification, preparation of derivative works, and/or adaptation of i) Oracle
th g
programs (including any operating system, integrated software, any programs embedded, installed or activated on
e @
delivered hardware, and modifications of such programs), ii) Oracle computer documentation and/or iii) other
us ne
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
to dha
services. No other rights are granted to the U.S. Government.
se ar
Trademark Notice
en nd
Oracle and Java are registered trademarks of Oracle and/or its affiliates. Other names may be trademarks of their
lic .na
respective owners.
ble r.p
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
ra i
fe am
logo are trademarks or registered trademarks of Advanced Micro Devices. UNIX is a registered trademark of The
Open Group.
ns (s
This 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
no ard
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
nd
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.
Na
1006302023
ir
m
Sa
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Table of Contents
Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database ................. 5
Practice 1: Provision an APEX Workspace ...................................................................................... 6
Practice 2: Install and Run a Sample Application Overview ........................................................... 14
a
as
Practice: Use SQL Workshop ......................................................................................................... 23
h
Practice 1: Install a Sample Data Set ............................................................................................... 24
. m)
Practice 2: Add Columns to the PRODUCTS Table.......................................................................... 27
ide .co
Practice 3: Create a Database Package for Business Logic ........................................................... 42
Gu ail
Practice 4: Create Database Objects Using Quick SQL .................................................................. 51
is m
Practice: Creating a Database Application.................................................................................... 63
th g
e @
Get Started ..................................................................................................................................... 64
us ne
Practice 1: Create an Application Based on Existing Tables .......................................................... 65
to dha
Practice 2: Create an Application from a Spreadsheet .................................................................. 81
se ar
Practice: Enhancing your application using Computations, Processes and Validations ........ 229
Practice 1: Add Branches, Validations, and Processes to the Shopping Cart Page ....................... 230
Practice: Creating and using Dynamic Actions ............................................................................ 239
Practice 1: Add Dynamic Actions, Computations, and Processes.................................................. 240
Practice: Managing Cards, Faceted Search, and Smart Filters................................................... 259
Practice 1: Improve Smart Filters Page ........................................................................................... 260
Practice 2: Improve and Customize the Faceted Search and Cards Regions ................................ 265
a
Practice: Extending Application Capabilities................................................................................ 315
as
Practice 1: Manage Approvals Component .................................................................................... 316
h
. m)
Practice: Managing Application Data ............................................................................................. 359
Practice 1: Manage Application Data .............................................................................................. 360
ide .co
Gu ail
Practice: Implement Security in your Application ........................................................................ 375
Practice 1: Create Authentication and Authorization Schemes ..................................................... 376
is m
th g
Practice: Adding Additional Pages to your Application .............................................................. 397
e @
Practice 1: Adding Additional Pages to Your Application .............................................................. 398
us ne
Practice 2: Add Map to Your Application ....................................................................................... 415
to dha
Practice: Migrate Application Development Between Environments ......................................... 421
se ar
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
Database
e @
th g
is m
Gu ail
ide .co
. m)
h
Oracle Autonomous
as
a
with Oracle APEX on the
Practice: Getting Started
Practice 1: Provision an APEX Workspace
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Introduction
Oracle APEX is a low-code application platform for Oracle Database. APEX Application
Development, Autonomous Data Warehouse (ADW), and Autonomous Transaction Processing
(ATP) are fully managed services, pre-integrated and pre-configured with APEX, for rapidly
a
building and deploying modern data-driven applications in Oracle Cloud. Business users,
as
citizens, and application developers can create enterprise apps 20X faster with 100X less code
h
— without having to learn complex web technologies with just a browser. To start, you will
. m)
need to decide on the service you are going to use for this workshop and then create an APEX
ide .co
workspace accordingly.
Gu ail
What is an APEX Workspace?
is m
th g
e @
An APEX Workspace is a logical domain where you define APEX applications. Each workspace
us ne
is associated with one or more database schemas (database users) which are used to store the
database objects, such as tables, views, packages, and more. APEX applications are built on
to dha
top of these database objects.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
6 Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database
How do I find my APEX release version?
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
To determine which release of Oracle APEX you are currently running, do one of the following:
• View the release number on the Workspace home page:
o Sign in to Oracle APEX. The Workspace home page appears. The current
release version is displayed in the bottom right corner.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database 7
• View the About APEX page:
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
o Click the Help menu at the top of the page and select About. The About APEX
page appears.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
You can run this lab in any Oracle Database with APEX 23.1 installed. This includes the APEX
ns (s
Application Development Service, the free, "Development Only" apex.oracle.com service, your
tra ne
on-premises Oracle Database (providing APEX 23.1 is installed), on a third-party cloud provider
n - ha
where APEX 23.1 is installed, or even on your laptop by installing Oracle XE or Oracle VirtualBox
no ard
For this course, we will use the free, “Development Only” apex.oracle.com service.
Na
ir
Signing up for apex.oracle.com is simply a matter of providing details on the workspace you
wish to create and then waiting for the approval email.
1. Go to https://apex.oracle.com
8 Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database
2. Click Get Started for Free.
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
3. Scroll down and you will see details for apex.oracle.com. Click Request a Free
is m
Workspace.
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database 9
4. On the Request a Workspace dialog, enter your identification details – First Name, Last
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
10 Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database
5. Check your email. You should get an email from apexext-noreply@ociapp-
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Note: If you don’t get an email go back to Step 3 and make sure to enter your email
correctly.
Within the email body, click Create Workspace.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database 11
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
12
7.
6.
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
Click Continue to Sign In Screen.
fe am
ra i
ble r.p
lic .na
en nd
se ar
Enter your password, and click Change Password.
to dha
us ne
e @
Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database
8. On the APEX Workspace login page, enter your password, select the Remember
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
9. You should now be in the APEX Builder.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Summary
At this point, you know how to create an APEX Workspace and you are ready to start building
amazing apps, fast. You may now proceed to the next practice.
Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database 13
Practice 2: Install and Run a Sample Application Overview
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
In this lab, you will navigate through the major components of Oracle APEX. This lab also
covers installing and running a sample application.
a
• Install and run a packaged application
h as
Tasks
. m)
ide .co
Major Components of APEX
Gu ail
To log in to Oracle APEX, you need a Workspace Name, username, and the password created
is m
for that Workspace. In this hands-on lab, you log in to your Oracle APEX Workspace.
th g
e @
us ne
1. Log in to Oracle APEX Workspace. Perform the following steps:
to dha
a. Open your browser and enter the URL to sign in to the APEX development
environment.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
14 Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database
b. The login page appears. Enter the workspace name, username, and password.
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database 15
3. You do not have any applications listed right now. You can create a new app or install
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
The SQL Workshop home page appears. Review each of the SQL Workshop components.
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
16 Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
5. Click Gallery.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
6. The Gallery page displays a collection of starter applications, sample applications and
lic .na
Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database 17
Install a Sample Application
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
2. to dha
Now that you are in Sample Apps, search for apps by typing "Reporting" into the "Search
Apps" search box and navigate to Sample Reporting and click the Install button.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
18 Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
3.
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database
us ne
e @
ide .co
. m)
h as
a
19
4. You can now see that the application is installed. Run the application by selecting Run
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Application.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
6. Enter your Username and Password (Same as your Workspace credentials) and click Sign
ns (s
In.
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
20 Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database
7. You now see the Sample Reporting application home page. In your Runtime environment
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
under Developer Toolbar, click Home to return to the home page of the APEX
development environment.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database 21
9. Toggle between the View Icons and the View Reports buttons. You see that applications
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Summary
You now know how to navigate through the major components of Oracle APEX and install and
run a packaged application. You may now proceed to the next practice.
22 Practice: Getting Started with Oracle APEX on the Oracle Autonomous Database
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
th g
is m
Gu ail
ide .co
. m)
h as
a
Practice: Use SQL Workshop
Practice 1: Install a Sample Data Set
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
In this practice, you learn to install sample tables and views from Sample Datasets. This
particular sample dataset is a collection of customers, stores, products, and orders used to
manage the shopping cart.
a
as
In this practice, you will:
h
• Install a sample dataset into your Oracle APEX Workspace
. m)
Task
ide .co
Gu ail
1. Log in to your workspace. If you are already logged in, click the APEX Logo in the upper
is m
left-hand corner of the page to return to the APEX workspace home page.
th g
e @
us ne
Create Customer Order Tables
to dha
2. From the APEX workspace home page, select the down arrow to the right of SQL
se ar
Workshop, then select Utilities to display the options and choose Sample Datasets.
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
4. Leave the settings to default and then click Next.
th g
e @
The schema name defaults to your current schema and hence will be different from the
us ne
schema name shown below. to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
6. Click Exit.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
You now know how to install sample tables and views from Sample Datasets. You may
now proceed to the next practice.
Overview
The PRODUCTS table includes some columns such as image, price, and details. But there are
other characteristics that customers would appreciate knowing about a product, such as color,
type of clothing, and department. In this practice, you will add these columns to the
a
PRODUCTS table.
h as
Since many products share the same colors, clothing type, and department, to avoid data
. m)
redundancy it is a best practice to create three additional tables to store the unique values of
ide .co
color, type, and department data. Instead of creating these three tables for yourself, you'll use
the Create Lookup Table feature.
Gu ail
is m
In this practice, you learn how to add these three new columns to the PRODUCTS table and
th g
e @
then create lookup tables for those new columns.
us ne
In this practice, you will: to dha
• Add new columns to the existing PRODUCTS table
se ar
en nd
Tasks
ns (s
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
Click Apply.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
Click Apply.
nd
Na
ir
m
Sa
7.
30
Sa
m
ir
Na
nd
no ard
n - ha
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
3. Click Create.
to dha
se ar
en nd
lic .na
ble r.p
UPDATE
n - ha
(
no ard
SELECT p.product_id,
nd
p.product_name,
Na
p.clothing,
p.color,
ir
m
p.department,
Sa
p.product_details
FROM products p ) p
SET p.clothing = Substr(product_name, Instr(product_name, '
',1,1)+1, Instr(product_name, ' ',1, 2)+1 - Instr(product_name,
' ',1,1)- 2),
p.color =
(
SELECT c.color
This script inserts the unique product type values (e.g. Shirt, Jacket, Skirt, etc.) into the
a
CLOTHING column in the PRODUCTS table. Similarly, it inserts the unique department
as
names (e.g. Boys’, Girls’, Men's, Women's) and color names into the DEPARTMENT and
h
. m)
COLOR columns, respectively, based on information found in the JSON product details
column in the PRODUCTS table.
ide .co
Gu ail
6. Click Run.
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
34
8.
7.
errors.
Sa
m
Click Run Now.
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
Commands.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
10. Copy the following SQL query.
us ne
SELECT p.product_name,
p.unit_price, to dha
p.color,
se ar
p.department,
en nd
p.clothing
lic .na
FROM products p;
ble r.p
Since multiple products may have the same values for Color, Department, and Clothing, to
avoid repetition and make updates easy, you can create a lookup table for each. A lookup table
stores the value of the available colors, departments, or clothing in a single place, and then
each product can reference the value from the lookup table.
lookup table, this allows the PRODUCTS table to reference the new color, clothing type, and
department lookup value by its new numeric primary key value in the lookup table.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
Note: Click the Create Lookup Table button only once. Then you will find the new table
no ard
38
6.
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
Click More and Select Create Lookup Table button.
to dha
us ne
e @
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
Note: Click the Create Lookup Table button only once. Then you will find the new table listed in
nd
8. To create Clothing lookup table, navigate back to the Products table and Click More and
ir
9.
40
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
ide .co
. m)
h as
a
10. The columns COLOR, DEPARTMENT, and CLOTHING in the Products table are renamed
to COLOR_ID, DEPARTMENT_ID, and CLOTHING_ID respectively, and their data type
changed to NUMBER. Also, there are new tables containing the values of the products:
• COLOR_LOOKUP
• DEPARTMENT_LOOKUP
a
as
• CLOTHING_LOOKUP
h
. m)
The numeric value of the COLOR_ID column will now store a reference to the system
ide .co
assigned unique ID of a particular color, whose name is stored in the new
COLOR_LOOKUP table. Similarly, the DEPARTMENT_ID column references the ID of a row
Gu ail
in the DEPARTMENT_LOOKUP table and CLOTHING_ID references the ID of a row in the
is m
th g
CLOTHING_LOOKUP table.
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
You now know how to add new columns to your existing tables, how to create lookup tables
for reference information, and how to create and run a SQL script to populate your tables. You
may now proceed to the next practice.
Overview
In this practice, you learn to create database objects to use in your APEX application. This
package contains functions and procedures to add products to the cart, remove products,
create an order, clear the cart, and more.
a
as
To manage items in the cart, you use collections, which enable you to temporarily store
h
products currently in session state so they can be accessed, manipulated, or processed during
. m)
a user's specific session.
ide .co
Business logic in APEX applications can be written using PL/SQL, Oracle's procedural
Gu ail
language extension to SQL. PL/SQL offers a handy program unit called a "package" that
is m
allows you to cleanly separate the API signatures for a set of reusable procedures and
th g
e @
functions, from their implementation.
us ne
In this practice, you will: to dha
• Create a package to manage the Shopping Cart
se ar
en nd
lic .na
Task
ble r.p
ra i
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
3. For Package Name, enter MANAGE_ORDERS and click Create Package.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
--------------------------------------------------------------
as
-- create procedure for remove a product temporarily
h
PROCEDURE remove_product (
. m)
p_product IN NUMBER);
ide .co
--------------------------------------------------------------
Gu ail
-- create function to get the number of items in the shopping
cart
is m
th g
FUNCTION Get_quantity
e @
RETURN NUMBER;
us ne
--------------------------------------------------------------
to dha
-- create procedure for validate if a product exists in the
shopping cart
se ar
FUNCTION Product_exists(
en nd
p_product IN NUMBER)
lic .na
RETURN NUMBER;
--------------------------------------------------------------
ble r.p
PROCEDURE clear_cart;
ns (s
--------------------------------------------------------------
-- create function to validate a customer
tra ne
FUNCTION Customer_exists(
n - ha
p_customer_email IN VARCHAR2)
no ard
RETURN NUMBER;
nd
--------------------------------------------------------------
Na
p_customer_email IN VARCHAR2,
p_store IN NUMBER,
p_order_id OUT orders.order_id%TYPE,
p_customer_id OUT NUMBER );
END manage_orders;
5.
Sa
m
ir
en nd
se ar
to dha
us ne
e @
45
6. Navigate to the body part of the package by clicking the Body tab and replace the
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
IF NOT apex_collection.collection_exists
as
(p_collection_name => 'PRODUCTS')
h
THEN
. m)
apex_collection.create_collection(p_collection_name =>
ide .co
'PRODUCTS');
END IF;
Gu ail
is m
apex_collection.add_member(p_collection_name =>
th g
e @
'PRODUCTS',
us ne
p_n001 => p_product,
p_n002 => p_quantity); to dha
END add_product;
se ar
en nd
IS
l_id NUMBER;
ble r.p
BEGIN
ra i
fe am
THEN
tra ne
SELECT seq_id
n - ha
INTO l_id
no ard
FROM apex_collections a
WHERE collection_name = 'PRODUCTS'
nd
apex_collection.delete_member(p_collection_name =>
m
'PRODUCTS',
Sa
FUNCTION get_quantity
RETURN NUMBER
IS
BEGIN
IF apex_collection.collection_exists (p_collection_name =>
'PRODUCTS')
THEN
SELECT SUM(n002)
INTO l_items
FROM apex_collections a
WHERE collection_name = 'PRODUCTS';
a
as
END IF;
h
. m)
RETURN l_items;
END get_quantity;
ide .co
Gu ail
FUNCTION product_exists(p_product IN NUMBER)
is m
RETURN NUMBER
th g
e @
IS
us ne
l_quantity NUMBER;
BEGIN to dha
IF apex_collection.collection_exists (p_collection_name =>
se ar
'PRODUCTS')
en nd
THEN
SELECT a.n002
lic .na
INTO l_quantity
ble r.p
FROM apex_collections a
ra i
fe am
RETURN l_quantity;
n - ha
ELSE
no ard
RETURN 0;
END IF;
nd
EXCEPTION
Na
RETURN 0;
m
END product_exists;
Sa
PROCEDURE clear_cart
IS
BEGIN
IF apex_collection.collection_exists (p_collection_name =>
'PRODUCTS')
THEN
'PRODUCTS');
END IF;
END clear_cart;
a
as
BEGIN
SELECT customer_id
h
. m)
INTO l_customer
FROM customers
ide .co
WHERE email_address = p_customer_email;
Gu ail
is m
RETURN l_customer;
th g
e @
EXCEPTION
us ne
WHEN no_data_found THEN
RETURN 0; to dha
END customer_exists;
se ar
en nd
p_customer_email IN VARCHAR2,
p_store IN NUMBER,
ble r.p
p_order_id OUT
ra i
fe am
orders.order_id%TYPE,
p_customer_id OUT NUMBER)
ns (s
IS
tra ne
BEGIN
n - ha
p_customer_id := customer_exists(p_customer_email);
no ard
IF p_customer_id = 0 THEN
nd
(full_name,
ir
email_address)
m
VALUES (p_customer,
Sa
p_customer_email)
returning customer_id INTO p_customer_id;
END IF;
order_status)
VALUES (SYSDATE,
p_customer_id,
p_store,
'OPEN')
returning order_id INTO p_order_id;
a
IF apex_collection.collection_exists (p_collection_name =>
as
'PRODUCTS')
THEN
h
. m)
INSERT INTO order_items
(order_id,
ide .co
line_item_id,
Gu ail
product_id,
is m
unit_price,
th g
e @
quantity)
us ne
SELECT p_order_id,
seq_id, to dha
p.product_id,
se ar
p.unit_price,
en nd
n002
lic .na
FROM apex_collections a,
products p
ble r.p
apex_collection.delete_collection(p_collection_name =>
n - ha
'PRODUCTS');
no ard
END create_order;
END manage_orders;
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
While you don't have to understand the code to complete the workshop successfully, know
that the functions and procedures you've defined in this practice are using a built-in feature of
se ar
Oracle APEX to handle the user's shopping cart by managing a collection of product id and
en nd
quantity values specific to the current user, and automatically create a new row in
lic .na
the Customers table during order creation if it's the first time the user is placing an order.
ble r.p
ra i
You now know how to create a package to manage the shopping cart. In the following
fe am
practices, you will call these procedures and functions when it is required. You may
ns (s
Overview
Memorizing the SQL to create and maintain database objects can be difficult. However, there
are tools that can generate the code for you based on a shorthand syntax or a graphical user
interface. In this practice, you will create database objects using Quick SQL and then view the
a
objects in Database Actions. Then you will then use the Data Workshop page to load data from
as
a file into your workspace.
h
. m)
In this practice, you’ll:
ide .co
• Create database objects using Quick SQL
Gu ail
• Load data using the Data Workshop page
is m
th g
Tasks
e @
us ne
Create database objects using Quick SQL to dha
1. Return to your APEX Workspace and click '⌄' next to the SQL Workshop tab, click
se ar
departments /insert 4
name /nn
location
country
employees /insert 14
name /nn vc50
email /lower
a
cost center num
as
date hired
h
job vc255
. m)
ide .co
view emp_v departments employees
Gu ail
is m
Note that the Indentation from the code you copied should be similar to the one we have in the
th g
following screenshot.
e @
us ne
3. Review the shorthand code. How many tables will be created and how are they related?
to dha
What types of columns and constraints will be created for the tables? Note that
the Help button provides details on the shorthand syntax along with several examples of
se ar
its usage.
en nd
lic .na
When ready, in the Quick SQL (left pane) toolbar, click Generate SQL.
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
It is important to save the SQL Shorthand as a script so that it can be run in your database.
In the SQL (right pane) toolbar, click Save SQL Script.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
5. In the Save Script dialog, for Script Name enter Employee Department Details, and
se ar
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
7. In the Script Editor page toolbar, click Run.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
9. The Results page shows the results of running the script. Scroll to the bottom to see a
summary. You should not see any errors.
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
11. Select the EMPLOYEES table and review its columns.
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
Load Data Using the Data Workshop Utility
to dha
In this step, you will learn how to create a table and Load data using the Data Workshop utility.
se ar
en nd
1. On the Workspace home page, click the '⌄' next to SQL Workshop tab, click Utilities, and
lic .na
58
3.
2.
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ide .co
. m)
h as
a
a
h as
. m)
Note: If the uploaded XLSX file contains multiple worksheets, the Load Data wizard picks
ide .co
the first sheet by default. To load another sheet, pick it from the Select Sheet select list.
Gu ail
The First lines contains headers checkbox works similar to CSV files. The same is true for
is m
the Configure dialog, the behavior is the same as it is for CSV files. Uploading XLSX files is
th g
e @
limited to 20 MB for each file.
us ne
5. Under Load Data, edit the Table Name field and provide an appropriate name. In this
to dha
practice, you will set the Table Name as Projects. Then click Load Data.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
loaded to the target table, they will be stored to the error table and error table is displayed.
Then click View Table.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
7. Select the PROJECTS table and review its columns.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
This completes the practice. At this point, you know how to use Quick SQL to generate
database objects using a SQL shorthand. You also know how to use Data Workshop utility to
se ar
load data.
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
62
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
th g
is m
Gu ail
ide .co
. m)
h
Practice: Creating a
as
a
Database Application
Get Started
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
In this lab, you will create a database application based on existing tables. You will also learn
how to create an APEX application using data imported from a spreadsheet.
a
as
1. Create an application using the tables and data that you already have installed
h
. m)
2. Create a database application from a file
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Overview
In this practice, you will create a database application based on existing tables.
a
• Create an application using the tables and data that you already have installed
h as
• Create a database application from a file
. m)
ide .co
Tasks
Gu ail
Sign in to the Oracle APEX Console using your workspace, username, and password.
is m
th g
e @
Create an Application Based on Existing Tables
us ne
1. In the App Builder menu, click App Builder. to dha
se ar
2. Click Create.
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
Name the Application to dha
se ar
1. In the Create Application wizard, for “Name,” enter Online Shopping Application. Note
en nd
that in the Create an Application wizard, the icon and color of the icon will be a random
lic .na
selection, so it most likely will not be the same color or icon that you see in the screenshot.
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
A Dashboard page is a great way to show important information using various charts. When you
installed the Sample Dataset, it also created a number of views, which join data from various
tables. These views are ideal as the basis for the dashboard charts.
2. Click Dashboard.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
Sa
m
ir
Na
nd
no ard
71
7. Click Advanced and check Set as Administration Page.
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
2. Click the arrow to the left of Additional Pages to see additional page types.
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
• CLOTHING_LOOKUP
• COLOR_LOOKUP
nd
• CUSTOMERS
Na
• DEPARTMENT_LOOKUP
ir
m
• PRODUCT_REVIEWS
Sa
• STORES
74
5.
Sa
m
ir
Click Add Pages.
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
a
• PRODUCT_REVIEWS
as
• STORES
h
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
2. For each page you edit, click Advanced and check Set as Administration Page.
Na
ir
m
Sa
76
3.
Sa
m
ir
Na
Click Save Changes.
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
Set Features
n - ha
no ard
Features are a set of optional application capabilities in Oracle APEX that you can include in your
new application. Access Control enables role-based user authorization with a single click.
nd
Na
1. Under the Features section, check Install Progressive Web App and Access Control.
ir
m
Sa
Now that you have added all the pages, it is time to generate the app and review it.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
2. Once the application is created, you will find the new app on the application home page.
tra ne
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
The new application will be displayed. Explore the pages that you just created by clicking the
ble r.p
navigation menu.
ra i
fe am
You now know how to create an application with a number of different page types based on
ns (s
existing database objects. You may now proceed to the next lab.
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
In this lab, you will learn how to create an APEX application using data imported from a
spreadsheet.
Overview
In this lab, you build a simple application based on a spreadsheet. Keep in mind that APEX is
a
as
great for a variety of apps, from simple ones like this to large, sophisticated apps based on local
h
database objects, REST-enabled SQL objects, and even REST APIs.
. m)
While APEX developers spend the majority of their time in the App Builder, you should also
ide .co
investigate the SQL Workshop, where you can create and maintain database objects, Team
Gu ail
Development, where you can track large APEX development projects, and the App Gallery,
is m
which contains numerous productivity and sample apps that can be installed within minutes.
th g
e @
Tasks
us ne
to dha
Load Projects data
se ar
en nd
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
When creating an application from a file, APEX allows you to upload CSV, XLSX, XML, or JSON
lic .na
files and then build apps based on their data. Alternatively, you can also copy and paste CSV
ble r.p
4. Within the Load Data wizard, click the Choose File button.
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
5. Download and select the demo_projects.csv file from your local System
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
After clicking Load Data, you will see a spinner until the wizard finishes loading the data.
us ne
Continue to Task 2 at this point. to dha
Create an application
se ar
en nd
The Data Load wizard has created a new table and populated that table with the records from
lic .na
the sample data. Now you can create an app based on this new table.
ble r.p
ra i
1. In the Load Data dialog, verify that 70 rows have been loaded into the DEMO_PROJECTS
fe am
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
When the wizard finishes creating the application, you will be redirected to the application's
ble r.p
1. Navigate to the Edit Application Definition page. From the Application home page, you can
n - ha
a
h as
. m)
ide .co
Gu ail
3. Now, navigate to Progressive Web App and set Installable to Yes. Click Apply Changes.
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
1. Navigate back to DEMO_PROJECTS application and then click Run Application. This will
open the runtime application in a new browser tab, allowing you to see how end users will
view the app.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
2. Enter your user credentials and click Sign In.
se ar
en nd
Note: Use the same Username and Password you used to sign in to the APEX Workspace.
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
system.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
You now know how to create an application from a spreadsheet by either dragging and
us ne
dropping a file or loading sample data for training purposes.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
90
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
th g
is m
Gu ail
ide .co
. m)
h
Pages and Regions
as
a
Practice: Working with
Practice 1: Create Pages, Regions, and Items
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
In this lab, you open the home page in page designer, and navigate through and review the
page designer panes. Then, you create a new page that allows customers to view the details of
their recent order. Customers will find the following details of the order:
a
• Order number
as
• Order date
h
. m)
• Status
ide .co
• Total price
• Quantity and price of the items.
Gu ail
is m
In this lab, you will:
th g
e @
1. Navigate and review the Page Designer panes
us ne
2. Create a page to review the items that customer just bought
to dha
se ar
Downloads:
en nd
• Did you miss out trying the previous labs? Don’t worry! You can download the application
lic .na
from here and import it into your workspace. To run the app, please run the steps
ble r.p
described in Get Started with Oracle APEX and Using SQL Workshop workshops.
ra i
fe am
Tasks
ns (s
tra ne
Open the home page in page designer, and navigate through and review the page designer
nd
panes.
Na
1. In the App Builder, run the Online Shopping Application. You are now in the application
ir
runtime environment. Use the application menu to navigate to the Home page. In the
m
Sa
Note: If you are not on the Home page then the Developer Toolbar will show the current
page number, and clicking Edit Page xx will navigate to that page, instead of Page n.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
2. The Page Designer is displayed for Page 1. There are three main panes within Page
us ne
Designer: Left Pane, Central Pane, and Right Pane. You can change the size of each pane
to dha
by selecting the dividers and sliding them left or right. Change the size of Grid Layout and
se ar
Select a component and then select an attribute in the Property Editor to display help on
that attribute.
For example, in this screenshot, you select Online Shopping Application in the Rendering
tree on the left, and then select Sequence > Layout in the Property Editor on the right. The
help text for Sequence is displayed.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
4. In the page designer, click Create (the + icon) and select Page.
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Create a Normal Page to review the order that the customer has made.
1. In the Create a Page dialog, select Blank Page and click Next.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
• Breadcrumb - Set to No
• Navigation - Set to Yes. Click Create Page.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
Add a Region
ns (s
tra ne
1. On the new page created, navigate to the Gallery Menu at the bottom of the page
no ard
showing Regions, Items, and Buttons categories and ensure that Regions is selected.
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
3. In the Property Editor, enter the following:
us ne
• For Title - enter Thank you for your order!
to dha
• For Template - select Content Block
se ar
• For Template Options - Click the rectangular area next to the Template Options label
en nd
to open the Template Options dialog. On the Dialog page, select Show Region
lic .na
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
Add a hidden item to store the order ID without the user being able to see it.
n - ha
no ard
1. In the Rendering tree (left pane), click the Thank you for your order! region to select it.
nd
Na
ir
m
Sa
2.
Sa
m
ir
Na
nd
no ard
to dha
us ne
e @
99
3. In the property editor, set the name and type as follows:
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Table 1: Work with Pages and Regions | Lab 1: Create Pages, Regions and Items
Name Type
P15_ORDER Hidden
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
1. In the Rendering tree (left pane), click the Thank you for your order! region.
no ard
nd
Na
ir
m
Sa
2.
Sa
m
ir
Na
nd
no ard
to dha
us ne
e @
101
3. In the Property Editor, enter the following:
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
• For Title - enter the expression (including the period) Order: &P15_ORDER.
• For Type - select Static Content
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
1. In the Rendering tree (left pane), navigate to the Order: &P15_ORDER. region.
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
3. In the Property Editor, enter the following:
se ar
SELECT o.order_id,
n - ha
o.order_datetime,
no ard
o.customer_id,
nd
o.order_status,
o.store_id,
Na
FROM order_items i
m
FROM orders o
WHERE order_id = :P15_ORDER
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
4. Click Attributes.
lic .na
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
1. In the Rendering tree (left pane), navigate to the Order: &P15_ORDER. region.
ra i
fe am
ns (s
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
For SQL Query - enter the following SQL Query:
nd
p.product_name Product,
ir
o.unit_price,
m
o.quantity,
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
• Under Card:
to dha
o
se ar
5. Click Save.
Sa
You now know how to add a new page to your existing APEX Application and add regions to
define the page's content using the Page Designer. You may now proceed to the next lab.
110
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
th g
is m
Gu ail
ide .co
. m)
h as
a
Practice: Developing Reports
Practice 1: Create an Interactive Grid and Smart Filters
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
In this practice, you navigate to the Demo Projects application and create an Interactive
Grid page and a Smart Filters page, which will help you search for and edit projects and tasks.
Downloads
a
as
• Did you miss out on trying the previous practices? Don’t worry! You can download the
h
application from here and import it into your workspace. To run the app, follow the
. m)
steps described in the Get Started with Oracle APEX and Using SQL
ide .co
Workshop workshops.
Gu ail
Tasks
is m
th g
e @
Add an Interactive Grid to the Demo Projects Application
us ne
to dha
In this practice, you create an Interactive Grid page on the DEMO_PROJECTS table in the Demo
Projects application. You already created the Demo Projects application in HOL-3.
se ar
en nd
1. On the Workspace home page, click App Builder. Select the Demo Projects application.
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
3.
2.
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
as
a
113
4. For Page Attributes, enter/select the following:
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
Under Navigation:
. m)
• Use Breadcrumb: No
ide .co
Gu ail
Click Create Page.
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
5.
Sa
m
ir
115
Add Smart Filters to the Demo Projects Application
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
In this practice, you create a Smart Filters report on the DEMO_PROJECTS table in the Demo
Projects application. You already created the Demo Projects application in HOL-3.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
• Page Number: 8
no ard
Under Navigation:
• Use Breadcrumb: No
118
Click Next.
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
4.
•
•
Sa
m
ir
no ard
n - ha
tra ne
On the Select the Filters page:
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
Leave the remaining details to the defaults
to dha
us ne
e @
119
5. Now that you have created a Smart Filters page, you can view it by clicking Save and Run
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Page.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
You now know how to create an Interactive Grid page and a Smart Filters page. You may
ble r.p
Overview
a
Cart application
as
• A Faceted Search page to view Products
h
. m)
Tasks
ide .co
Gu ail
Create Application Items
is m
th g
This is needed to count the number of items in the shopping cart and the icon to display in the
e @
navigation bar.
us ne
to dha
1. Navigate to Online Shopping Application and click Shared Components.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
3.
2.
122
Sa
Click Create.
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
Under Application Logic, click Application Items.
to dha
us ne
e @
Table 1: Develop Reports | Practice 2: Create Cards Regions and Faceted Search
Name Scope
SHOPPING_CART_ICON Application
a
SHOPPING_CART_ITEMS Application
h as
. m)
ide .co
5. Click Create Application Item and create the second item.
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
This process is needed to refresh the number of items in the shopping cart, which will be shown
in the navigation bar.
a
h as
. m)
2. Under Application Logic, click Application Processes.
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
4. Click Next.
ra i
fe am
DECLARE
no ard
:SHOPPING_CART_ITEMS := l_cnt;
ir
:SHOPPING_CART_ICON := 'fa-cart-full';
m
ELSE
Sa
:SHOPPING_CART_ITEMS := '';
:SHOPPING_CART_ICON := 'fa-cart-empty';
END IF;
END;
6.
126
Click Next.
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
The shopping cart page allows users to review and edit the products in the cart. Users can also
n - ha
3.
2.
128
Sa
m
ir
Click Create Page.
Na
nd
no ard
n - ha
tra ne
ns (s
fe am Select Blank Page and click Next.
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
• Page Number: 16
• Name: Shopping Cart
Under Navigation:
a
• Use Breadcrumb: No
h as
• Use Navigation: No
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
This region will list the items that have been added temporarily to the shopping cart.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
3. In the Property Editor, enter/select the following:
to dha
Under Identification:
se ar
en nd
Under Source:
ble r.p
ra i
• SQL Query:
ns (s
p.product_image,
n - ha
p.product_id,
no ard
p.product_name name,
p.unit_price,
nd
n002 quantity,
Na
b.brand
m
FROM apex_collections a,
Sa
products p,
json_table (p.product_details, '$' columns ( brand
varchar2(4000) path '$.brand') ) b
WHERE collection_name = 'PRODUCTS'
AND p.product_id = a.n001
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
Under Appearance:
ns (s
Under Title:
n - ha
• Column: NAME
no ard
Under Subtitle:
nd
• Column: BRAND
Na
Under Body:
ir
m
• Advanced Formatting: On
Sa
• HTML Expression:
Quantity: &QUANTITY.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
• Advanced Formatting: On
ns (s
• HTML Expression:
tra ne
Under Media:
nd
•
•
•
Sa
Under Card:
m
ir
133
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
This action allows customers to open a page to edit a particular item in the shopping cart.
1. In the Rendering tree (left pane), navigate to Actions under Shopping Cart.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
Table 2: Develop Reports | Practice 2: Create Cards Regions and Faceted Search
nd
Name Value
Na
ir
P17_PRODUCT_ID &PRODUCT_ID.
m
Sa
• Click OK.
• For Display Type, select Text with Icon.
• For Icon, select fa-cart-edit.
Click Save.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
This configures the (Edit) button to open page 17, passing the value of the PRODUCT_ID column
to dha
of the current card as the value for the P17_PRODUCT_ID page item in the called page.
se ar
en nd
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
• Page Number: 17
Na
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
This region allows users to review the details of a product, such as brand, price, description, and
no ard
more.
nd
Na
2. Drag a Cards region and drop it into the Content Body section.
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
3. In the Property Editor, enter/select the following:
e @
us ne
• Title: Product
Under Source: to dha
• Type: SQL Query
se ar
en nd
• SQL Query:
lic .na
SELECT product_id,
product_name,
ble r.p
unit_price,
ra i
fe am
product_details,
product_image,
ns (s
image_mime_type,
tra ne
image_filename,
n - ha
image_charset,
no ard
image_last_updated,
nd
color_id,
department_id,
Na
clothing_id,
ir
d.description,
m
b.brand
Sa
FROM products p,
json_table (p.product_details, '$' columns (
description varchar2(4000) path '$.description') ) d,
json_table (p.product_details, '$' columns ( brand
varchar2(4000) path '$.brand') ) b
WHERE product_id = :p17_product_id
140
•
•
•
Sa
m
Click OK.
ir
Style: Style C
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
142
•
1)
Sa
m
ir
Na
nd
no ard
n - ha
Under Secondary Body:
Price: &UNIT_PRICE.
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
Add a Cards Region for Customer Reviews
us ne
to dha
This region lets users read the customer reviews for a product.
se ar
2. Drag a Cards region and drop it into the Content Body section under the Product region.
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
WHERE p.product_name = m.product_name
as
AND p.product_id = :p17_product_id
h
order by m.rating desc
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
4. Click Attributes and enter/select the following:
e @
us ne
Under Appearance:
• Layout: Horizontal (Row)
to dha
Under Title:
se ar
en nd
• Advanced Formatting: On
lic .na
• HTML Expression:
ble r.p
a
as
5. Click Save.
h
. m)
Add the Products Page
ide .co
1.
Gu ail
Navigate to the Create button (+) and click Page.
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
• Page Number: 19
Na
• Name: Products
Under Data Source:
ir
m
Under Navigation:
• Use Breadcrumb: No
148
Click Next.
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
• Select Grid
Na
• Body Column: - Select Column - (to deselect the default column chosen)
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
You now know how to create an application item, an application process, a Faceted Search page,
n - ha
and a Cards page. You may now proceed to the next practice.
no ard
nd
Na
ir
m
Sa
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
Reports
us ne
e @
th g
is m
Gu ail
ide .co
. m)
h as
a
Practice: Managing and
Customizing Interactive
Practice 1: Customize an Interactive Report as a Developer
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
In this practice, you will manage and customize the Interactive Report page in the Sample
Reports application as a Developer.
a
Downloads
as
• Did you miss out on trying the previous practices? Don’t worry! You can download the
h
. m)
application from here and import it into your workspace. To run the app, follow the
steps described in the Get Started with Oracle APEX and Using SQL
ide .co
Workshop workshops.
Gu ail
is m
th g
e @
Tasks
us ne
Customize an Interactive Report as a Developerto dha
se ar
1. In this practice, you edit an interactive report in page designer and customize it for end
en nd
users. First, view the Interactive Report in page designer. In the Developer Toolbar,
lic .na
that shows the column values for that row. The interactive report currently has a link
column to a form page. Modify your interactive report to have a link to a single row view.
a. Under Rendering, navigate to the Projects interactive report and then on the
Property Editor, select Attributes. Under Link, for Link Column, select Link to Single
Row View. Click Save and Run Page.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
b. In the report, ensure that you have selected 1. Primary Report in the report toolbar.
ble r.p
to the report.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
3. The current pagination type of the interactive report is Row Ranges X to Y. Assume you
ra i
fe am
want to always show your end users the total number of rows in the report as part of the
pagination display. In the Developer Toolbar, click Edit Page.
ns (s
tra ne
a. Under Rendering, navigate to the Projects interactive report and select Attributes in
n - ha
Ranges X to Y of Z.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
4. to dha
You want to customize the display of the Search Bar. End users should be able to select the
display of the desired number of rows per page.
se ar
en nd
In the Property Editor, locate Search Bar under Attributes. Perform the following:
lic .na
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
6. You want to enable Excel and PDF formats in the Download option of the Actions menu. In
lic .na
the Property Editor, navigate to Download. Select the Excel and PDF download formats.
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
8. Notice that the row selector and the new pagination type are available in the report.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
9. Select Actions > Report > Save Report.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
10. The Save Report dialog box is displayed. Notice that the Public check box is now available.
Sa
a
h as
. m)
ide .co
Gu ail
11. This report is now saved as a public report for all users and is available in the Reports drop-
is m
down list.
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
13. Notice that the Excel and PDF formats are available. Click the Close icon.
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
You now know how to manage and customize the interactive report as a developer. You
no ard
Overview
In this practice, you will manage and customize the Interactive Report page in the Sample
Reports application as an End User.
Tasks
a
as
Customize an Interactive Report as an End User
h
. m)
1. To start, run the Sample Reporting application. Click App Builder.
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
a
h as
. m)
ide .co
Gu ail
is m
3. In the navigation menu or in the Cards Region, click Interactive Report.
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
4. Assume that you do not want to display the Start Date and End Date columns in the report.
nd
Also, you want the Status column to display just after the Assigned To column. Perform
Na
a
h as
. m)
ide .co
Gu ail
is m
th g
b.
e @
The Select Columns dialog box appears. The columns on the right are displayed, and
us ne
the columns on the left are hidden. Select Start Date and End Date in the Display in
Report group, and move the selected columns into the Do Not Display list by clicking
to dha
the left arrow (<).
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Select Status in the Display in Report group and click the down arrow once. Then,
click Apply.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
5. Next, let's say you want to filter the report results. First, you want to filter the report to
to dha
display rows that meet the criteria Cost <= 2000. Within these filtered results, you then
create another filter to display rows with Project is Bug Tracker. Perform the following
se ar
steps:
en nd
lic .na
• Column: Cost
• Operator: <=
• Expression: 2000
Then, click Apply.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
c. Next, add the second filter on the Project column. Click the Actions menu and
select Filter.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
e. Notice that two filters are applied. Fewer rows are displayed because only the rows that
se ar
meet both the filter criteria are displayed. You can remove each filter by clicking the
en nd
a
h as
. m)
ide .co
Gu ail
is m
th g
b. Remove the existing sort columns under Column by using the select list in rows 2 and
e @
3 of Column to restore the value to the default, Select Column.
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
d. The report is now sorted in Descending order of Cost.
us ne
7. to dha
Create an aggregation against the Available Budget column. You want to display the sum
of the Available Budget.
se ar
en nd
Column. Click Apply to add the aggregation at the end of the last column of the report.
a
h as
. m)
ide .co
c.
Gu ail
The aggregate function is applied on the column. Notice that the sum of Available
is m
Budget is displayed at the end of the report under the column. Navigate until the last
th g
page to view the sum.
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
8. In the report, assume you want to include Cost calculated with tax. The computation you
ns (s
want to make is Cost * 1.05. You create a computed column in the interactive report.
tra ne
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
9. Create a control break on the Project column.
th g
e @
a. Select Actions > Format > Control Break.
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
click Apply.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
c. The control break is now applied. Notice that the aggregation you created in a previous
to dha
step appears at the end of each control break.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
highlights to rows while continuing with the control break that you created in the previous
step.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
b. In the Highlight dialog box, for Name, enter Cost less than or equals 500. For
en nd
Background Color, select Green and for Text Color, select Black. Under Highlight
lic .na
Condition, for Column, select Cost and for Operator, select <=. For Expression,
ble r.p
enter 500.
ra i
fe am
Click Apply.
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
11. Now, you want to control the number of rows to display on your Interactive Report page.
e @
us ne
a. Select Actions > Format > Rows Per Page > 5.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
b. Notice that Rows Per Page in your interactive report is now 1-5.
no ard
nd
Na
ir
m
Sa
each Project. Your interactive report should include both the Report and Chart views to
toggle.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
b.
to dha
In the Chart dialog box, select/enter the following:
se ar
• Label: Project
lic .na
• Value: Cost
ble r.p
• Function: Average
ra i
fe am
Click Apply.
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
c. The chart is created. Toggle between the Chart view and the Report view.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
13. Create a Group By report to display each Project with the Total Budget.
m
Sa
a
h as
. m)
ide .co
c. In the Group By dialog box, enter/select the following:
Gu ail
• Group By Column: Project
is m
• Function: Sum
th g
e @
• Column: Budget
us ne
• Label: Total Budget to dha
• Format Mask: $5,324.10
se ar
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
e. Click the X to the right of Edit Group By to remove the filter.
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
b. In the Pivot dialog box, enter/select the following:
•
to dha
Pivot Columns: Assigned To
se ar
• Functions: Sum
lic .na
• Sum: Yes
ns (s
Click Apply.
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
180
c.
Sa
button.
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
b. Under Name, enter My Private Report and click Apply.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
16. A drop-down list automatically appears, with the report you just created being selected. You
m
Sa
can view the default primary report. You want to reset the Primary Report back to the
default settings and remove any customizations that you have made so far.
a. Select Primary Report from the Reports drop-down list. The primary report is now
displayed. You can make any changes to this report, and it will not be reflected in the
My Private Report private report you just created.
a
h as
. m)
ide .co
Gu ail
b. To restore the primary report to its default settings, select Actions > Report > Reset.
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
a
h as
. m)
ide .co
Gu ail
is m
th g
17. You want to download the customized report as a CSV.
e @
us ne
a. Select Actions > Download.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
c. The report is now downloaded as a CSV.
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
You now know how to manage and customize an interactive report as an end user. You may
now proceed to the next practice.
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
Grids
to dha
us ne
e @
th g
is m
Gu ail
ide .co
. m)
h as
a
Practice: Managing and
Customizing Interactive
Practice 1: Customize an Interactive Grid as a Developer
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
In this practice, you customize the Interactive Grid page you created in the Demo
Projects application as a Developer.
a
Downloads
as
• Did you miss out on trying the previous practices? Don’t worry! You can download the
h
. m)
application from here and import it into your workspace. To run the app, follow the
steps described in Practice-01 and Practice-02.
ide .co
Gu ail
is m
Tasks
th g
e @
us ne
Manage and Customize the Interactive Grid as a Developer
to dha
This practice uses the Demo Projects application. In this practice, you customize
se ar
the Interactive Grid for end users. You create column groups, set the pagination type, and set
en nd
the report downloadable formats that should be available to end users. You also enable end
lic .na
users to save the report as Public interactive grids and convert a read-only interactive grid to
ble r.p
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
2. In the navigation menu, click Project Tasks. You want to customize the display of this
lic .na
interactive grid for your end users. In the Developer Toolbar, click Edit Page 4.
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a. In the Page Designer, under Components > Body, navigate to the Project
Tasks Interactive Grid region and right-click Column Groups. Select Create Column
a
Group.
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
c. Repeat steps a and b to create the Schedule and Project Financing column groups.
e. In the Property Editor, under Layout, for Group, select Project Breakdown.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
f. Then, select the StartDate and EndDate columns. In the Property Editor,
en nd
g. Finally, select the Cost and Budget columns. In the Property Editor, under Layout, for
Group, select Project Financing.
a
h as
. m)
ide .co
Gu ail
is m
h. The interactive grid now displays column groups.
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
4. Rearrange the columns in the interactive grid. You want to ensure the Project Breakdown,
Sa
Schedule, and Project Financing column groups display in order, followed by Status and
Assigned To.
a. Hover your mouse over the Project Financing column group header to display the drag
handle. Your cursor also changes when it comes into contact with the drag handle. Click
and hold the drag handle.
place in the row. The Project Financing column group should be followed by the Status
column. Release the mouse. The Project Financing column group drops into place.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
the Primary Key. This will help you make the interactive grid editable.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
6. You want to ensure that end users are able to save Public interactive grids. You also want
to dha
to exclude HTML from the download formats available to end users.
se ar
Click Save Public Report to enable the feature. Under Download, deselect
the HTML check box.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
7. Convert this read-only interactive grid into an editable interactive grid. Then, reset the
no ard
to turn on the feature. Also, under Pagination, for Type, select Page.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Interactive Grid > Column Groups, select Schedule, Project Breakdown, and Project
Financing, right-click and select Delete.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
9. Assume you want to display the ID column and exclude the ID column from DML
fe am
operations. Under Page Rendering > Project Tasks interactive grid, expand Columns and
ns (s
select ID.
tra ne
n - ha
Navigate to Identification and set Type to Display Only. Then, navigate to Source and
no ard
click Query Only to enable it. Click Save and Run Page.
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
You now know how to manage and customize the interactive grid as a developer. You
Gu ail
may now proceed to the next practice.
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Overview
In this practice, you customize the Interactive Grid page you created in the Demo
Projects application as an End User.
a
as
Tasks
h
. m)
Customize an Interactive Grid as an End User
ide .co
In this practice, you use and customize the display of your interactive grid. You also edit an
Gu ail
editable interactive grid.
is m
th g
e @
1. Notice that the interactive grid is now editable. You see the Edit, Save, and Add Row
us ne
buttons. Also, the pagination type that you have set is displayed. Perform a non-case-
to dha
sensitive search for server on the entire interactive grid.
se ar
To do this, enter server in the search bar text area and click Go.
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Now, in the search bar, click the magnifying glass and select the Task Name column.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
3. Enter server in the text area and click Go. Notice that the search is now restricted
en nd
1. Click the field and replace the existing value with 500.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
5. The changes are not saved yet. Click the Save button. The changes are now saved.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
the row for the project with ID 2 and select Single Row View.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
7. You are now in the single row view of the project with ID 2. Replace the existing value for
ble r.p
Budget with 9000 and click Save. Then, click Report View.
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Break.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
9. In the Control Break dialog box, for Column, enter Project and click Save.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
11. In the Highlight dialog box, enter/select the following:
se ar
• Column: Cost
ra i
fe am
• Value: 800
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
12. Notice the rows with a cost greater than 800 are highlighted.
is m
Gu ail
ide .co
. m)
h as
a
203
13. You want to save the changes made to the interactive grid. Select Actions > Report > Save
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
As.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
14. In the Report – Save As dialog box, for Type, select Private. Under Name, enter My Private
se ar
You want to return to the Primary interactive grid. Click Primary Report in the Reports
drop-down list.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
16. You want to make few more customizations and save the interactive grid as another Private
report. You do not want the Start Date, End Date, and Assigned To columns to be
ble r.p
displayed in the report. Click the Start Date column header and then click Hide.
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Similarly, perform the same steps for the End Date and Assigned To columns.
a
h as
. m)
ide .co
Gu ail
is m
th g
18. In the Chart dialog box, select:
e @
us ne
• Type: Bar
• Label: Project to dha
• Value: Cost
se ar
en nd
• Aggregation: Sum
lic .na
ble r.p
Click Save.
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
20. In the Report – Save As dialog box, for Type, select Private. Under Name, enter My
Custom Report. Then, click Save. to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
22. You want to download the report. Select Actions > Download.
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
click Download.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
You now know how to manage and customize an interactive report as an end user. You may
now proceed to the next practice.
210
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
th g
is m
Gu ail
ide .co
. m)
Practice: Creating
h as
a
Application Page Controls
Practice 1: Add Items and Buttons to a Page
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
In this practice, you create new page items and buttons on the Shopping Cart and Add to Cart
pages created in Practice 2 of the Developing Reports workshop.
a
as
• Review items in the shopping cart
h
• Edit the quantity of the items
. m)
• Remove an item
ide .co
• Clear the shopping cart
Gu ail
• Proceed to checkout
is m
th g
e @
Downloads
us ne
• Did you miss out on trying the previous practices? Don’t worry! You can download the
to dha
application from here and import it into your workspace. To run the app, follow the
se ar
steps described in the Get Started with Oracle APEX and Using SQL
en nd
Workshop workshops.
lic .na
ble r.p
Tasks
ra i
fe am
ns (s
2.
Sa
m
ir
Na
nd
no ard
213
3. Drag a Static Content region and drop it to the right of the Shopping Cart region to create
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
4. In the Property Editor, for Title, enter Order Information.
to dha
5. Navigate to the Order Information (left pane) region.
se ar
6. Right-click the Order Information region and select Create Page Item.
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
• Name: P16_CUSTOMER_EMAIL
• Type: Text Field
• Label: Email Address
• Value Required: Off
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
Table 1: Create Application Page Controls | Practice 1: Add Items and Buttons to a Page
nd
Na
Value
Name Type Label Template
Required
ir
m
Sa
Optional -
P16_CUSTOMER_FULLNAME Text Field Full Name Off
Floating
P16_ORDER_ID Hidden
P16_CUSTOMER_ID Hidden
Optional -
P16_STORE Select List Store Off
Floating
For the P16_STORE item, in the list of values section, configure the type as follows:
• Type: Select SQL Query
• SQL Query: Enter the following SQL Query:
select STORES.STORE_NAME as STORE_NAME,
a
as
STORES.STORE_ID as STORE_ID
h
from STORES
. m)
ide .co
• Set Display Extra Values to Off
Gu ail
• Null Display Value: Enter - Select a Store -
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
9. Navigate to the Order Information (left pane) region.
us ne
to dha
10. Right-click the Order Information region and select Create Button.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Table 2: Create Application Page Controls | Practice 1: Add Items and Buttons to a Page
Proceed to
Proceed Create Text On
a
Checkout
h as
Clear Shopping fa-cart-
. m)
Clear Change Text with Icon Off
Cart empty
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
Table 3: Create Application Page Controls | Practice 1: Add Items and Buttons to a Page
ns (s
tra ne
a
h as
. m)
ide .co
Gu ail
is m
Add Items and Buttons
th g
e @
us ne
In this task, you will create four page items:
• PRODUCT_ID: To get the product ID to dha
• ACTION: To identify the action (Add/Edit/Delete) made for the customer
se ar
en nd
• QUANTITY: To permit customers to select the number of items to add or edit in the
lic .na
shopping cart
• SHOPPING_CART_ITEMS: To get the total number of items in the shopping cart after
ble r.p
an action is made
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
2. Drag a Static Content region and drop it into the Dialog Footer.
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
4. In the Rendering tree (left pane), navigate to the Buttons Bar region.
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
Table 4: Create Application Page Controls | Practice 1: Add Items and Buttons to a Page
ns (s
P17_ACTION Hidden
no ard
nd
P17_PRODUCT_ID Hidden
Na
P17_SHOPPING_CART_ITEMS Hidden
ir
m
Sa
b) For Static Values , click Display1, Display2 and enter the following:
to a Page
1 1
2 2
a
as
3 3
h
. m)
4 4
ide .co
Gu ail
5 5
is m
th g
e @
• Click OK.
us ne
• Set Display Extra Values to Off. to dha
• Set Display Null Value to Off.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
Table 6: Create Application Page Controls | Practice 1: Add Items and Buttons to a Page
no ard
Button
nd
Update
Edit Create Text On
Quantity
Remove from
Delete Edit Text Off
Cart
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
next practice.
Sa
m
Click Save.
ir
Na
nd
no ard
227
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
228
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
th g
is m
Gu ail
and Validations
ide .co
application using
. m)
h as
a
Computations, Processes
Practice: Enhancing your
Practice 1: Add Branches, Validations, and Processes to the
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
This Hands-on Lab is a collection of six tasks. After completing this lab, your application will
enable customers to:
a
• Review the items in the shopping cart
h as
• Edit the quantity of the items
. m)
• Remove an item
ide .co
• Clear the shopping cart
Gu ail
• Proceed to checkout
is m
th g
In this lab, you will:
e @
us ne
• Create Validations, Processes, and Branches to manage the Shopping Cart
Downloads to dha
• Did you miss out on trying the previous labs? Don’t worry! You can download the
se ar
application from here and import it into your workspace. To run the app, please run the
en nd
steps described in Get Started with Oracle APEX and Using SQL Workshop workshops.
lic .na
Tasks
ble r.p
ra i
fe am
230 Practice: Enhancing your application using Computations, Processes and Validations
2. Now, you select Shopping Cart under Page Icons.
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
3. In the Rendering tree (left pane), click the Processing tab.
is m
th g
4. Over Validating, right-click Create Validation.
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Practice: Enhancing your application using Computations, Processes and Validations 231
5. Create three validations for the following items: Name, Email, and Store
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
Table 1: Enhance your application using Computations, Processes, and Validations | Lab 1:
fe am
232 Practice: Enhancing your application using Computations, Processes and Validations
Under Error:
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Table 2: Enhance your application using Computations, Processes, and Validations | Lab 1:
Add Branches, Validations, and Processes to the Shopping Cart Page
a
Notification
h as
Please enter your email Inline with Field and in
. m)
P16_CUSTOMER_EMAIL
address Notification
ide .co
Gu ail
Inline with Field and in
Please select a store P16_STORE
is m
Notification
th g
e @
Because these validations only apply when the user proceeds to checkout, let's create that
us ne
condition. Under Server-side Conditions, set the following:
to dha
Table 3: Enhance your application using Computations, Processes, and Validations | Lab 1: Add
se ar
en nd
Practice: Enhancing your application using Computations, Processes and Validations 233
Add a Process to Create the Order
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
1. On the Processing tab (left pane), right-click Processing and click Create Process.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
234 Practice: Enhancing your application using Computations, Processes and Validations
BEGIN
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
MANAGE_ORDERS.create_order (
p_customer =>
:P16_CUSTOMER_FULLNAME,
p_customer_email =>
:P16_CUSTOMER_EMAIL,
p_store => :P16_STORE,
p_order_id =>
:P16_ORDER_ID,
a
p_customer_id =>
as
:P16_CUSTOMER_ID);
h
END;
. m)
ide .co
• For Success Message, enter Order successfully created: &P16_ORDER_ID.
Gu ail
• Under Server-side Condition, for When Button Pressed, select Proceed.
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
1. On the Processing tab (left pane), right-click Processing and click Create Process.
nd
Na
2. Create a second process to clear the shopping cart. In the Property Editor and enter the
ir
following:
m
•
• For Type - select Execute Code.
Practice: Enhancing your application using Computations, Processes and Validations 235
• For PL/SQL Code - enter the following PL/SQL code:
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
BEGIN
manage_orders.clear_cart;
END;
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
236 Practice: Enhancing your application using Computations, Processes and Validations
Add Branches to the Page
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
1. On the Processing tab (left pane), right-click After Processing and click Create Branch.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
2. In the Property Editor, enter the following: to dha
• For Name - enter Go to Orders.
se ar
Validations | Lab 1: Add Branches, Validations, and Processes to the Shopping Cart
tra ne
Page
n - ha
no ard
Name Value
nd
P16_ORDER &P16_ORDER_ID.
Na
ir
Sa
Click OK.
Practice: Enhancing your application using Computations, Processes and Validations 237
• Under Server-side Condition, for When Button Pressed, select Proceed.
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
3. Create a second branch when the user clears the shopping cart. Right-click After
se ar
en nd
Click OK.
nd
You now know how to add validations, processes, and branches to your APEX page. You may
Sa
238 Practice: Enhancing your application using Computations, Processes and Validations
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
th g
is m
Gu ail
ide .co
Dynamic Actions
. m)
h as
a
Practice: Creating and using
Practice 1: Add Dynamic Actions, Computations, and
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Processes
Overview
This practice is a collection of nine tasks. After completing this lab, your application will enable
customers to:
a
• Create dynamic actions to manage the Shopping Cart
h as
• Review the product details
. m)
• Add, edit, or remove the product from the shopping cart
ide .co
• Read the customer reviews
Gu ail
is m
th g
In this lab, you will:
e @
us ne
• Create dynamic actions for the Shopping Carts Page
• to dha
Add Computations and Page Process to the Add to Cart page
se ar
en nd
Downloads
lic .na
• Did you miss out on trying the previous labs? Don’t worry! You can download the
ble r.p
application from here and import it into your workspace. To run the app, please run the
ra i
fe am
steps described in Get Started with Oracle APEX, Using SQL Workshop, and Enhancing
your application using Computations, Processes, and Validations workshops.
ns (s
tra ne
n - ha
Tasks
no ard
• Update the badge and icon shown in the navigation bar after the customer has
m
Sa
1.
Sa
m
ir
Na
nd
no ard
n - ha
Gu ail
ide .co
. m)
h as
a
241
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
2.
242
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
Navigate to the Dynamic Actions tab (left pane).
se ar
to dha
us ne
e @
a
h as
. m)
ide .co
Gu ail
is m
4. In the Property Editor, enter the following:
th g
e @
• Under Identification section:
us ne
For Name - enter Update Shopping Cart Header.
to dha
• Under When section:
se ar
parseInt(this.data.P17_SHOPPING_CART_ITEMS) > 0
n - ha
no ard
nd
Na
ir
m
Sa
a
apex.jQuery(".js-shopping-cart-item .t-Button-
as
badge").text(this.data.P17_SHOPPING_CART_ITEMS);
h
. m)
// Update Icon
ide .co
apex.jQuery(".js-shopping-cart-item .t-Icon").removeClass('fa-
Gu ail
cart-empty').addClass('fa-cart-full');
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Update Shopping Cart Header Dynamic Action, right-click True, and select Create
TRUE Action
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
7. In the Property Editor, enter the following: to dha
• Under Identification section:
se ar
•
ra i
8. Create an opposite action. In the Dynamic Actions tab (left pane), navigate to the Execute
n - ha
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
10. Navigate to the Execute JavaScript Code action under the False heading.
• Under Identification section:
to dha
For Action - select Execute JavaScript Code.
se ar
en nd
apex.jQuery(".js-shopping-cart-item .t-Button-badge").text('');
fe am
ns (s
// Update Icon
tra ne
apex.jQuery(".js-shopping-cart-item .t-Icon").removeClass('fa-
cart-full').addClass('fa-cart-empty');
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
11. Create a second action. In the Dynamic Actions tab (left pane), navigate to False under the
is m
Update Shopping Cart Header dynamic action.
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
1. In the Rendering tree (left pane), navigate to Page 16: Shopping Cart.
a
img {
as
width: 150px;
h
height: 150px;
. m)
}
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
3. Click Save.
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
1. Navigate to Page Finder and click File symbol. Then in the popup Page Finder, select
page 17.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
2. In the Rendering tree (left pane), expand the Pre-Rendering.
to dha
Right-click Before Regions and select Create Computation.
se ar
3.
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
In this Task, you call the manage_orders.add_product procedure that will add a product
ble r.p
a
h as
. m)
ide .co
Gu ail
3. In the Property Editor, enter the following:
is m
• For Name - enter Add product.
th g
e @
• For Type - select Execute Code.
us ne
• For PL/SQL Code - enter the following code:
to dha
BEGIN
IF manage_orders.product_exists(p_product =>
se ar
:P17_PRODUCT_ID) = 0 THEN
en nd
:P17_PRODUCT_ID,
ble r.p
:P17_ACTION := 'ADD';
ns (s
END;
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
4. Click Save.
a
procedures to remove a product from the shopping cart and add it again with the updated
as
quantity.
h
. m)
1. In the Processing tab, right-click Processing and select Create Process.
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
2.
fe am
BEGIN
IF manage_orders.product_exists(p_product =>
nd
manage_orders.remove_product(p_product =>
:P17_PRODUCT_ID);
ir
m
:P17_PRODUCT_ID,
p_quantity => :P17_QUANTITY);
END IF;
:P17_ACTION := 'EDIT';
END;
•
Click Save.
Sa
m
ir
Na
nd
no ard
n - ha
lic .na
For When Button Pressed, select Edit.
en nd
se ar
to dha
us ne
e @
253
Create a Process to Delete Products from the Shopping Cart
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
In this Task, you call the manage_orders.remove_product to remove a product from the
shopping cart.
1. In the Processing tab, right click Processing and select Create Process.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
In the Property Editor, enter the following:
• For Name - enter Delete product.
to dha
• For Type - select Execute Code.
se ar
en nd
BEGIN
IF manage_orders.product_exists(p_product =>
ble r.p
manage_orders.remove_product(p_product =>
:P17_PRODUCT_ID);
ns (s
END IF;
tra ne
:P17_ACTION := 'DELETE';
n - ha
END;
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
• to dha
Under the Server-side Condition section:
For When Button Pressed, select Delete.
se ar
en nd
Click Save.
lic .na
In this task, you call the manage_orders.get_quantity to get the total number of products in the
fe am
shopping cart.
ns (s
tra ne
BEGIN
Sa
:P17_SHOPPING_CART_ITEMS := manage_orders.get_quantity;
END;
a
h as
. m)
ide .co
Click Save.
Gu ail
is m
Create a Process to Close the Modal Page
th g
e @
us ne
After the customer has taken an action (add/edit/delete) regarding the product, the modal page
will close and the shopping process continues.to dha
se ar
fe am
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
2. In the rendering tree, select the root node in the component tree Page 17: Add to
Cart.
• Under the Identification section: For Title, enter Manage Your Cart.
• Under the Dialog section:
For Width, enter 600.
For Height, enter 600.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
4. Click Save.
ble r.p
You now know how to customize and enhance the APEX page. You may now proceed to the
ra i
fe am
next practice.
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
Filters
to dha
us ne
e @
th g
is m
Gu ail
ide .co
. m)
h as
a
Practice: Managing Cards,
Faceted Search, and Smart
Practice 1: Improve Smart Filters Page
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
In this lab, you will gain an insight into the abilities of Smart Filters, and learn how to add New
Filters and Edit existing Filters
Downloads
a
as
• Did you miss out on trying the previous labs? Don’t worry! You can download the
h
application from here and import it into your workspace. To run the app, please run
. m)
the steps described in Get Started with Oracle APEX and Using SQL
ide .co
Workshop workshops.
Gu ail
is m
th g
Task
e @
us ne
Enhance Smart Filters
to dha
In this Lab, you are going to customize the Smart Filters page in the Demo
se ar
Projects application. The Project Tasks Search page utilizes Smart Filters to display the
en nd
records.
lic .na
ble r.p
1. Navigate to the App Builder. Then, click the Demo Projects application.
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
3. Navigate to the Project Tasks Search page and click Page 8 in the Developer
Gu ail
is m
toolbar. Note that your page number might be different.
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
4. Now, Update P8_PROJECT, Change type to Radio Group and enable the Client-Side
nd
Filtering attribute.
Na
In the Rendering tab, select the P8_PROJECT filter (if not already selected). In the Property
ir
Editor, under the Identification change type to Radio Group, then find List Entries and
m
Sa
enable Client-Side Filtering. Enabling this option renders a search field above the list
entries.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
5. Click Save and Run Page in the upper-right corner. If prompted, enter your workspace
username and password and click Sign In. The revised page appears.
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Add new filters in Page Designer by right-clicking filter and selecting Create Filter from the
context menu.
Filters map to specific database column. When creating a new filter, you can create the following
types: Checkbox Group, Input Field, Radio Group, and Range.
a
1. View the smart filters page in Page Designer. In the Rendering tab, right-click Filters and
as
select Create Filter.
h
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
2. Select the new filter and edit the following filter attributes in the Property Editor:
n - ha
• Under Identification:
no ard
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
3. Click Save and Run Page in the upper-right corner. If prompted, enter your
en nd
workspace username and password and click Sign In. The revised page appears.
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Cards Regions
Overview
In this lab, you will learn how to improve the Products page by adding new facets and
customizing the cards.
a
as
Please note that customer can quickly identify the products that already have been added to the
h
shopping cart.
. m)
ide .co
In this practice, you will:
Gu ail
• Improve both Faceted Search and Cards region
is m
• Add Dynamic Actions to the page
th g
e @
Downloads
us ne
• Did you miss out on trying the previous labs? Don’t worry! You can download the
to dha
application from here and import it into your workspace. To run the app, please run
se ar
the steps described in Get Started with Oracle APEX and Using SQL
en nd
Workshop workshops.
lic .na
1. From the runtime application, navigate to the Products page in Page Designer.
ra i
fe am
Given that you run this app from the APEX App Builder, you will find the Developer
ns (s
Toolbar at the bottom of the screen. {Note: End users who log directly into the app
tra ne
a
h as
. m)
ide .co
Gu ail
is m
Alternatively, you can also navigate back to the APEX App Builder tab in your browser
th g
e @
manually by selecting the appropriate browser tab or window.
us ne
Once in the App Builder, click 19 - Products.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
You should now be in Page Designer with Page 19: Products loaded.
m
Sa
Reorder Facets
Unit price is not a common search criteria, so you want to put this facet at the bottom.
1. In the Rendering tree (left pane), under Search, within Facets, click and hold
P19_UNIT_PRICE and drag it down until it is under P19_CLOTHING_ID, then release the
mouse cursor.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
Enhance the Faceted Search
to dha
1. In the Rendering tree (left pane), navigate to Search.
se ar
en nd
2. In the Property Editor (right pane), click Attributes and do the following:
lic .na
1. In the Rendering tree (left pane), navigate to Search Results and in the Property Editor
(right pane), do the following:
• For SQL Query - enter the following SQL code:
SELECT "PRODUCT_ID",
"PRODUCT_NAME",
"UNIT_PRICE",
a
"PRODUCT_DETAILS",
as
"PRODUCT_IMAGE",
h
"IMAGE_MIME_TYPE",
. m)
"IMAGE_FILENAME",
ide .co
"IMAGE_CHARSET",
Gu ail
"IMAGE_LAST_UPDATED",
is m
"COLOR_ID",
th g
(
e @
SELECT l1."COLOR"
us ne
FROM "COLOR_LOOKUP" l1
to dha
WHERE l1."COLOR_ID" = m."COLOR_ID") "COLOR_ID_L$1",
se ar
"DEPARTMENT_ID",
en nd
(
lic .na
SELECT l2."DEPARTMENT"
FROM "DEPARTMENT_LOOKUP" l2
ble r.p
"DEPARTMENT_ID_L$2",
"CLOTHING_ID",
ns (s
(
tra ne
SELECT l3."CLOTHING"
n - ha
FROM "CLOTHING_LOOKUP" l3
no ard
b.brand
Na
FROM "PRODUCTS" m,
json_table (m.product_details, '$' columns ( brand
ir
m
a
h as
. m)
ide .co
Gu ail
Under Appearance section:
is m
• Click Template Options. For Style - select Style A.
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
• Click OK
Na
<small>&BRAND.</small><br />
<b class="u-success-text u-pullRight" id="message_&PRODUCT_ID.">
{if QUANTITY/} &QUANTITY. in cart {endif/}
</b>
<b>$&UNIT_PRICE.</b>
a
• Under Media section:
as
•
h
For Source - select BLOB Column.
. m)
• For BLOB Column - select PRODUCT_IMAGE.
ide .co
• For Position - select First.
Gu ail
• For Appearance - select Widescreen.
is m
• For Sizing - select Fit.
th g
e @
• Under Card section:
us ne
• For Primary Key Column 1 - select PRODUCT_ID
to dha
• Click Save.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Create Actions
Gu ail
is m
Customers need a way to shop the products, so in this task you will add an action to allow
th g
customers to learn more about the product.
e @
us ne
1. Navigate to Search Results (left pane). to dha
2. On Actions, right-click Create Action.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
as
Name Value
h
. m)
P17_PRODUCT_ID &PRODUCT_ID.
ide .co
Gu ail
• For Clear Cache, enter 18.
is m
• Click OK.
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
2. Right-click Dialog Closed and select Create Dynamic Action.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
productQuantity = this.data.P17_QUANTITY,
n - ha
productCard$ = apex.jQuery("#message_" +
this.data.P17_PRODUCT_ID);
no ard
nd
"!");
} else if (productAction === 'DELETE') {
productCard$.text("Removed from cart!");
}
a
h as
. m)
ide .co
Gu ail
5. Create a second dynamic action. Right-click Dialog Closed and select Create Dynamic
is m
Action.
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
parseInt(this.data.P18_SHOPPING_CART_ITEMS) > 0
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
7. Navigate to the Refresh action.
to dha
• Navigate to the Refresh action.
se ar
apex.jQuery(".js-shopping-cart-item .t-Button-
badge").text(this.data.P17_SHOPPING_CART_ITEMS);
ns (s
tra ne
// Update Icon
n - ha
apex.jQuery(".js-shopping-cart-item .t-Icon").removeClass('fa-
cart-empty').addClass('fa-cart-full');
no ard
nd
Na
ir
m
Sa
dynamic action.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
apex.jQuery(".js-shopping-cart-item .t-Button-badge").text('');
n - ha
no ard
// Update Icon
nd
apex.jQuery(".js-shopping-cart-item .t-Icon").removeClass('fa-
cart-full').addClass('fa-cart-empty');
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
11. Click Save and Run Page.
th g
e @
us ne
Run the Products Page
to dha
1. After running products page, your page will look like the following image:
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
You now know how to enhance faceted search and cards region. You may now proceed to the
m
next lab.
Sa
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar Forms
to dha
us ne
e @
th g
is m
Gu ail
ide .co
. m)
h as
a
Practice: Creating and Using
Practice 1: Create and Customize Forms
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
In this lab, you will learn how to create and customize a Form and then you will link the form to
an Interactive Report.
Downloads
a
as
• Did you miss out on trying the previous labs? Don’t worry! You can download the
h
application from here and import it into your workspace. To run the app, please run
. m)
the steps described in Get Started with Oracle APEX and Using SQL Workshop
ide .co
workshops.
Gu ail
is m
th g
Create a Product Details Form
e @
us ne
1. Navigate to the App Builder. Then, click Online Shopping Application.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
3. For Create a Page: Select Page Type - select Component and then select Form.
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
5. Under Primary key, for Primary Key Column1 - Ensure the PRODUCT_ID is selected as the
tra ne
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
Link a Report to a Form
to dha
1. Navigate to the App Builder. Then, click Online Shopping Application and run
se ar
Application. From the runtime application, navigate to the Manage Products page in
en nd
Page Designer.
lic .na
Given that you run this app from the APEX App Builder, you will find the Developer
ble r.p
Toolbar at the bottom of the screen. {Note: End users who log directly into the app
ra i
fe am
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
2. In the Rendering tree (left pane), navigate to Products.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
3. In the Property Editor (right pane), click Attributes and do the following:
m
Sa
• Under Link:
• For Link Column - select Link to a Custom Target
• Click No Link Defined Button and do the following in the popup:
• For Page - enter 21.
• For Set Items, enter:
Name Value
P21_PRODUCT_ID #PRODUCT_ID#
a
Click Save.
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
4. Click Save and then reload the Manage Products page in the runtime
ra i
fe am
environment.
ns (s
tra ne
5. Now, In the Manage Products page, click Pencil Icon on the first row. Verify the Product
n - ha
286
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
1. Navigate to Page 21 in the App Builder. Then, click P21_PRODUCT_NAME in the Rendering
Tree. Now, change the Identification Type to Text Field in the Property Editor.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
2. Items can readily be moved using drag-and-drop within Layout. If required, you can also
se ar
drag new components such as regions, items, and buttons into the Layout pane from the
en nd
In Page Designer, with Page 21 loaded, within Layout (middle pane), click P21_UNIT_PRICE and
ble r.p
continue to hold the mouse cursor down. Drag the item up and to the right, until it is directly
ra i
fe am
after P21_PRODUCT_NAME, and a dark yellow box is displayed. Release the mouse cursor to
ns (s
In Page Designer, within Layout (or the Rendering tree in the left pane), select
P21_IMAGE_CHARSET. In the Property Editor (right pane), under Layout > Start New Row.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
4. You now need to Focus on First item on Page. In Page Rendering (Left Pane), Select
lic .na
Page 21: Product Details. Then, In the Property Editor, Scroll down to Navigation and for
Cursor Focus, select First item on page. Then, click Save.
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
You now know how to create and customize a Form and then link the form to an Interactive
en nd
290
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
th g
Application
is m
Gu ail
ide .co
. m)
h
Navigation in your
as
a
Practice: Implementing
Practice 1: Improve Application
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
In this lab, you will learn how to make some pages publicly accessible.
a
Set the following pages as public pages:
as
• Products
h
• Shopping Cart
. m)
• Order Information
ide .co
• Disable the Navigation Menu
Gu ail
• Enhance the Navigation Bar
is m
th g
e @
Downloads
us ne
• Did you miss out trying the previous labs? Don’t worry! You can download the
to dha
application from here and import it into your workspace. To run the app, please run
se ar
the steps described in Get Started with Oracle APEX and Using SQL
en nd
Workshop workshops.
lic .na
In this lesson, you will set the products page as the Home page and then you will remove
the Home page under Navigation Menu.
ns (s
tra ne
3.
2.
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
Now, select Shared Components.
us ne
e @
293
4. Now, under Attributes, select ≡ next to Home URL. Then, in the popup window, select 19
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
5. Because you have changed the Home Page to Products page, you now need to
ra i
fe am
6.
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
en nd
se ar
to dha
us ne
e @
295
7. Select Navigation Menu, then select Pencil Icon before Home.
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
8. In the List Entry page, Click the Delete button and then confirm delete by clicking OK.
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Your customers don't need to log in to the app to shop the products, so let's set the following
pages as public:
• Page 19: Products
• Page 15: Order Information
• Page 16: Shopping Cart
a
• Page 17: Add to Cart
h as
Follow these steps for the four listed pages:
. m)
ide .co
1. From the runtime application, navigate to the Products page.
Gu ail
In the Developer Toolbar click Edit Page 19.
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
3. Click Save.
se ar
en nd
4. Navigate to Page Finder and select Page 15 from Dialog Page. Repeat steps 2-4.
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
5. Repeat steps 2-4 for Page 16: Shopping Cart and Page 17: Add to Cart.
Because the home page is the Products page and this is a public access page, we do not need
a navigation menu. In this task, you will turn off displaying the navigation menu.
1. Within Page Designer, click the Shared Components icon at the top-right corner.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
Alternatively, if you are in the App Builder, click Shared Components.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
3. Click Navigation Menu.
e @
us ne
4. Set Display Navigation to Off. to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
2. Under Navigation, click Navigation Bar List.
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
5. In the List Entry page, enter the following and click Create List Entry.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
8. Click the Pencil Icon before &APP_USER. to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
11. Click Create Entry and enter the following:
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
•
• For List Entry Label - enter Administration.
• For Page - select 10000.
a
h as
. m)
ide .co
Gu ail
is m
12. Click Create List Entry.
th g
e @
us ne
You now know how to set page as public and manage Navigation bar and Navigation menu. You
may now proceed to the next lab. to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
306
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
th g
is m
Gu ail
Themes Styles
ide .co
. m)
h as
a
Practice: Using Themes and
Practice 1: Use Themes and Theme Styles
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
In this lab, you use the Theme Roller to save a new Theme Style. Then, you enable end users
to apply this style while running the application.
Downloads
a
as
• Did you miss out trying the previous labs? Don’t worry! You can download the
h
application from here and import it into your workspace. To run the app, please run
. m)
the steps described in Get Started with Oracle APEX and Using SQL
ide .co
Workshop workshops.
Gu ail
is m
th g
Use Themes and Theme Styles
e @
us ne
In this hands-on lab, you use the Theme Roller to save a Theme Style. Then, you enable end
to dha
users to apply this style while running the application.
se ar
1. Navigate to App Builder and then run the Online Shopping Application. In the
en nd
colors. To edit a specific component, expand a group and select new colors or styling of the
component you wish to edit.
Modify the look by specifying colors of your choice and preview the changes. Once you are
done, click Save As.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
Under Appearance:
no ard
5.
310
•
Sa
m
ir
Click Save As.
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
7. In the application home page, click Shared Components. Under User Interface, click User
us ne
Interface Attributes.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
8. Under Attributes, click Enable End Users to Choose Theme Style. Make sure this
se ar
attribute is set to On. Notice that the new Theme Style you saved is displayed under Theme
en nd
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
10. Using the Customize dialog box, users can specify their Theme Style while running the
us ne
application. Select the Theme Style that you saved in step 3 above and click Apply
to dha
Changes.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
You now know how to use the Theme Roller to save a new Theme Style. You may
to dha
now proceed to the next lab.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
th g
is m
Gu ail
ide .co
. m)
h
Practice: Extending
as
a
Application Capabilities
Practice 1: Manage Approvals Component
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
In this workshop, you will create an application that allows you to manage expenses using the
approvals component. To explain the concepts and terms associated with Approval
Management in APEX, we take the example of the Expense Tracker Application.
a
as
To apply for an expense, an employee logs in to the application and submits an expense request
h
filling in the Type (Accommodation/Conference/Internet/ Miscellaneous Expenses) and
. m)
Estimated Expenses. The task could be assigned to multiple potential owners, and then they
ide .co
can perform possible actions (Request information/Delegate/Release/Change Priority).
Gu ail
If the expense cost is more than 50000, then the Expense request, once approved by the
is m
immediate manager, will go to the next manager and so on, depending on the Expense amount.
th g
e @
This is a typical use case for a multi-level approval.
us ne
Also, Deadlines and Expiration are set for a task. The potential owner will get an Email before 5
to dha
mins of task expiration. If the task is not approved or rejected before the expiry, then the task
se ar
1. If you have not already logged in to your Oracle APEX workspace, sign in using the
workspace name, email, and password you signed up with.
a
h as
. m)
ide .co
3. On the App Builder page, click Create.
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
7. At the top of the application home page, click SQL Workshop and then SQL Scripts. The
ns (s
9. In the Script Name, enter a name for the script - Employee details and Expense
status.
a
10. Enter the SQL statements.
h as
Copy the code below and paste it into the code editor:
. m)
CREATE TABLE "EMPLOYEE_DETAILS"
ide .co
("EMPNO" NUMBER GENERATED BY DEFAULT ON NULL
Gu ail
AS IDENTITY MINVALUE 1 MAXVALUE 9999999999999999999999999999
is m
INCREMENT BY 1 START WITH 8000 CACHE 20 NOORDER NOCYCLE NOKEEP
th g
NOT NULL ENABLE,
e @
"EMP_NAME" VARCHAR2(100),
us ne
"MGR" NUMBER(4,0),
to dha
CONSTRAINT "EMP_PK" PRIMARY KEY ("EMPNO"));
insert into EMPLOYEE_DETAILS(empno, emp_name, mgr) values (10,
se ar
'JOHN', 20);
en nd
'CLARA',30);
insert into EMPLOYEE_DETAILS(empno, emp_name, mgr) values (30,
ble r.p
'JANE', 40);
ra i
fe am
commit;
tra ne
"EMP_NO" VARCHAR2(10),
"EXPENSE_TYPE" VARCHAR2(100),
ir
m
"ESTIMATED_COST" NUMBER(8,0),
Sa
"UPDATED_BY" VARCHAR2(100),
"STATUS" VARCHAR2(20),
CONSTRAINT "EMP_EXPENSE_REQUEST_PK" PRIMARY KEY ("REQ_ID"));
320
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
1. Navigate to the Administration icon on the Application home page and select Manage
Users and Groups from the drop-down list.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
2. Click Create Multiple Users.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
[email protected], [email protected]
nd
4.
322
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
Click Next and Create Valid Users.
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
Create a task definition to configure task parameters, participants, actions, and due dates for
an expense request.
1. In the App Builder, navigate to the Expense Tracker application and select Shared
Components.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
2. Under Workflows and Automations, select Task Definitions.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
3. Click Create.
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
5. Click Create.
no ard
• For Task details Page Number - Click the Create Task Details Page button, then
Na
click OK.
ir
•
Sa
For Actions SQL query - Copy the code below and paste it into the code editor:
select EMP_NAME from employee_details where EMPNO =(select MGR
from employee_details where EMPNO=(select EMPNO from
employee_details where EMP_NAME=:APP_USER))
a
h as
. m)
ide .co
Gu ail
7. Under Participants Section - Select Participants to assign additional people to the Task
is m
th g
Definition.
e @
• Click Add Row.
us ne
• For Participant Type - Select Potential Owner
to dha
• For Value Type - Select SQL Query
se ar
• For Value - Copy the code below and paste it into the code editor:
en nd
a
h as
9. Under Parameters Section - Select Add Row and fill in the four parameter fields listed
. m)
below:
ide .co
Gu ail
Table 1: Extend Application Capabilities | Lab 1: Manage Approvals Component
is m
th g
Static ID Label Data Type
e @
us ne
ESTIMATED_COST Estimated Cost to dha String
se ar
a
h as
. m)
ide .co
Gu ail
is m
th g
Specify the following:
e @
• For Name - Enter CREATE_EXPENSE_REPORT_ENTRY.
us ne
• For Type - Select Execute Code. to dha
• On Event - Select Create.
se ar
• For Code: Copy the code below and paste it into the code editor:
en nd
declare
lic .na
l_req_id number;
ble r.p
begin
ra i
fe am
EMP_EXPENSE_REQUEST
n - ha
(to_number(l_req_id),
:EMPNO,
nd
:EXPENSE_TYPE,
Na
:ESTIMATED_COST,
'',
ir
m
'PENDING');
Sa
end if;
end;
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
11. To Add the next action, Click the Add Action button.
ns (s
tra ne
•
• For Type - Select Execute Code.
nd
Na
• For Code: Copy the code below and paste it into the code editor:
Sa
declare
l_mgr number;
l_task_id number;
l_request_id number;
l_req_status varchar2(10) :='PENDING';
Begin
if :APP_USER = :MGR_NAME then --this is the first approver
a
as
update EMP_EXPENSE_REQUEST set status = 'APPROVED',
h
updated_by=updated_by||'->'||:APP_USER
. m)
where req_id = l_request_id and emp_no=:APEX$TASK_PK;
ide .co
Gu ail
l_req_status := 'APPROVED';
is m
else -- the request needs to go through another level of
th g
Approval
e @
-- updated the request record with details of the current
us ne
approver in the chain of approvers
to dha
update EMP_EXPENSE_REQUEST set updated_by = updated_by||'-
>'||:APEX$TASK_OWNER
se ar
and emp_no=:APEX$TASK_PK;
lic .na
l_task_id := apex_approval.create_task(
ra i
fe am
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
12. Again, click the Add Actions button.
se ar
en nd
• For Code: Copy the code below and paste it into the code editor:
n - ha
declare
no ard
l_mgr number;
l_task_id number;
nd
l_request_id number;
Na
begin
m
emp_name=:APP_USER;
if :APP_USER = :MGR_NAME then --this is the first approver
l_request_id := :APEX$TASK_ID;
else
l_request_id := :REQ_ID;
end if;-- the request is complete and rejected.
updated_by=updated_by||'->'||:APP_USER
where req_id = l_request_id and emp_no=:APEX$TASK_PK;
end;
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
2. Click Create Page. The Create a Page Wizard appears.
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
a
as
• For Use Breadcrumb - Select On.
h
• For Breadcrumb Parent Entry - Select Home(Page 1).
. m)
• For Use Navigation - Select On.
ide .co
• For Navigation Preference - Select Create a new Entry.
Gu ail
• For Icon - Enter fa-file-o.
is m
th g
e @
Click Create Page.
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
•
tra ne
• For SQL query: Copy the code below and paste it into the code editor:
Na
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
7. Now, right-click the region (New Expense Request) and select Create Page Item.
en nd
Accommodation Accommodation
m
Sa
Conference Conference
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
8. Right-click region (New Expense Request) and select Create Page Item.
us ne
• For Name - Enter P3_ESTIMATED_COST.
to dha
• For Type - Select Number Field.
se ar
9.
en nd
Select the P3_EMPNO page item and enable the primary key under the Source section and
Click Save to apply changes.
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
In the Property Editor, enter the following:
se ar
emp_name=:APP_USER;
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Sa
m
ir
Na
nd
no ard
339
• For Sequence - Enter 5.
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
12. Now add a process on the Processing tab to submit a request. Right-click Processing and
ble r.p
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
b. to dha
For Expense Status, enter the following:
se ar
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
d. For Request ID, enter the following:
us ne
• For Type - Select NULL. to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
17. Click Save. to dha
Create Unified Task Lists
se ar
en nd
Add a Unified Task list page to see the submitted expense request list by a requestor and the
lic .na
1. Click Application ID on the right-above corner of the page designer. The Application
ra i
fe am
2.
346
Sa
m
ir
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
5. To create another Unified Task list page, again, click Application ID on the right-above
ns (s
7.
6.
Sa
m
ir
Na
nd
no ard
th g
is m
Gu ail
Click the Create Page button. The Create a Page Wizard appears.
ide .co
. m)
h as
a
349
8. Specify the following page attributes:
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
Add an Email Template to add for before expiry action in the task definition.
ir
m
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
3. On the Email Templates page, click Create Email Template. The Details page appears.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
4. Under Identification:
n - ha
*Note: For substitution strings with the #STRINGNAME# format. You can pass in values
for these strings using the Placeholder Values dialog box for the Process in Page Designer
or the APEX MAIL API.
<strong>Hello #APEX_TASK_OWNER#</strong>,<br>
<br>Please check your "My Approvals" inbox. The expense
request for #EMP_NAME# requires your timely review manner.<br>
<br>Thanks for your kind attention to this matter.<br>
<br>Need to make a change to your Approvals? <a
href="#APPROVAL_URL#">Manage your Approvals here.</a>
a
• For Plain Text Format - Copy the text below and paste it into Plain text format:
h as
. m)
Hello #APEX_TASK_OWNER#,
Please check your "My Approvals" inbox. The expense request for
ide .co
#EMP_NAME# requires your timely review manner.
Gu ail
Thanks for your kind attention to this matter.
is m
Need to make a change to your Approval? Manage your Approval
th g
here: #APPROVAL_URL#
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
6. Click Create Email Template.
th g
e @
Update Table Employee Details
us ne
1.
to dha
Navigate to SQL Workshop and click SQL Commands.
se ar
2. Copy and paste the commands below into the Script Editor to update the Employee
en nd
Note: The steps to create and populate the EMPLOYEE_DETAILS table are shared in TASK
2. Ensure that you have that table created and populated before running the commands
ra i
fe am
below.
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
Alter table "EMPLOYEE_DETAILS" add "HR_MGR" VARCHAR2(10);
h as
Update EMPLOYEE_DETAILS set HR_MGR = 'SOPHIE' where EMPNO in
. m)
(10,20);
ide .co
Update EMPLOYEE_DETAILS set HR_MGR = 'ROBIN' where EMPNO in
Gu ail
(30,40);
is m
th g
Note: You can also create the two Users, SOPHIE and ROBIN, using the Manage Users
e @
And Groups menu option under Workspace Administration as done in TASK 3.
us ne
to dha
3. Click Run.
se ar
Navigate to App Builder and select Expense Tracker application. Click Shared Components >
ra i
fe am
Workflows and Automations > Task Definitions and select the Expense Request Task Definition.
ns (s
tra ne
a
• On Event - Select Before Expire.
as
For Before Expire Interval - Enter PT25M.
h
•
. m)
• For Success Message - Enter Task will expire in 5 minutes.
ide .co
Under the Send Email Settings section:
Gu ail
is m
• For From - Enter the Email address of your wish.
th g
• For To - Enter the Email address of your wish.
e @
us ne
• For Email Template - Select BEFORE EXPENSE EXPIRY EMAIL.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Add a Column or Value for mentioned Placeholders and Click Save to add placeholders.
a
as
APEX_TASK_SUBJECT &APEX$TASK_SUBJECT.
h
. m)
APEX_TASK_OWNER &APEX$TASK_OWNER.
ide .co
EMP_NAME &EMP_NAME.
Gu ail
is m
th g
APPROVAL_URL Paste the Login URL of your Expense Tracker Application
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
5. To add Expire event, click Add Actions and specify the following attributes:
• For Name - Enter TASK_EXPIRED.
• For Type - Select Execute Code.
• For Execution Sequence - 70
• On Event - Select Expire.
• For Code: Copy the code below and paste it into the code editor:
begin
apex_approval.add_to_history( 'Task ' || :APEX$TASK_SUBJECT || '
Expired');
end;
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
358
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
th g
is m
Gu ail
ide .co
Application Data
. m)
h
Practice: Managing
as
a
Practice 1: Manage Application Data
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
Oracle APEX allows you to build robust, feature-rich applications against remote, web, and REST
data sources. In this lab, you log in to a remote database, create a database table, and then
register a schema with RESTful Services. You will then create a new application and then
a
consume the REST Data Source we created. Then, you will synchronize the data from REST
as
Data Source to the Local Database table using REST Data Synchronization.
h
. m)
Enable Remote Database Schema to Oracle REST Data Services
ide .co
Before starting this lab, you need to provision a new APEX instance or Workspace.
Gu ail
is m
In this hands-on lab, you will log in to a new, remote APEX workspace, create a table, and then
th g
e @
register schema with ORDS.
us ne
1. Log in to the new workspace you created.
to dha
2. Under SQL Workshop, select SQL Commands.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
CONSTRAINT "EMP_1_PK" PRIMARY KEY ("EMPNO"))
as
insert into emp_1(empno, emp_name, mgr) values (10, 'JOHN', 30);
h
insert into emp_1(empno, emp_name, mgr) values (20, 'CLARA',30);
. m)
insert into emp_1(empno, emp_name, mgr) values (30, 'JANE', 40);
ide .co
insert into emp_1(empno, emp_name, mgr) values (40, 'MATT', null);
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
5. Click the Register Schema with ORDS button.
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
6. In the next window, leave the attributes to default and then click Save Schema
n - ha
Attributes.
no ard
nd
Na
ir
m
Sa
Object button.
a
h as
. m)
ide .co
8. Under AutoREST Enable Object, select the following and click Create.
Gu ail
is m
Set Object Type to TABLE.
th g
•
e @
us ne
• Select EMP_1 for Object
to dha
• Copy the Full URL and paste it in your Note pad.
se ar
en nd
a
h as
. m)
ide .co
9. Now, please change the Copied URL and replace ords with pls/apex and Workspace
Gu ail
Name with your Actual Workspace name as shown below.
is m
Copied URL: https://apex.oracle.com/ords/wksp_apexhandsonlabs/emp34/
th g
Updated URL: https://apex.oracle.com/pls/apex/apex_handson_labs/emp_1/
e @
us ne
Create an Application and Integrate Application Data from REST Data Source
to dha
In this lab, you create a New Application and then consume the REST Data Source we created
se ar
en nd
in the previous task. Then, you will synchronize the Data from REST Data Source to the Local
Database table using REST Data Synchronization.
lic .na
ble r.p
1. Log in to the first workspace, where we have already created multiple applications.
ra i
fe am
4.
3.
Sa
m
ir
Na
nd
us ne
Now click the Create button to create a new application.
e @
365
5. Enter the following and click Create Application.
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
7.
Sa
m
ir
Na
nd
to dha
us ne
e @
367
8. Under Create REST Data Source - Method, leave the settings to default and select Next.
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
9. Under Create REST Data Source, enter the following and click Next.
us ne
• For REST Data Source Type - select Oracle REST Data Services.
to dha
• For Name - Enter Employee Details API.
se ar
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
11. For Authentication, set Authentication Required to No. Click Discover.
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
Synchronize Data from REST Data Sources to a Local Table
us ne
to dha
In this lab, you will synchronize data from the REST Data source you created in Task 2 to a
Local table.
se ar
en nd
The Data Synchronization feature enables developers to automatically sync the contents of a
lic .na
local table with the data from an external REST service. Basically, APEX invokes the REST Service
ble r.p
defined in the REST Data Source, downloads all data, and synchronizes it to a local table.
ra i
fe am
1. Now that you have created a REST Data Source, Under REST Data Sources, select No
ns (s
an existing table. In this example, select New Table for Synchronize To and enter EMP_2 for
Table Name. Then, click Save.
3. The synchronization table is not created yet. You can view the SQL that is used to create
the table. Click Show SQL.
4. Under Table Status, click Create Table. The table EMP_2 is now ready for synchronization.
a
Notice the message The synchronization table exists and matches the Data Profile.
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
5. You will define a synchronization schedule now. In the Synchronization Schedule field,
ra i
fe am
you can use the Database Scheduler calendaring syntax to define repeating
synchronization schedules, such as "every Tuesday and Friday at 4:00 p.m." or "the second
ns (s
Wednesday of every month." This calendaring syntax can be provided manually. Click the
tra ne
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
7. to dha
You are now ready to test the data synchronization. Click Save and Run.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
schema with RESTful Services. Also, how to create a new application, consume the REST
Data Source and synchronize the data from a REST Data Source to the Local Database table
using REST Data Synchronization.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
374
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
th g
is m
Gu ail
ide .co
. m)
h
in your Application
as
a
Practice: Implement Security
Practice 1: Create Authentication and Authorization Schemes
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
Application security is very important for the majority of applications. You must
ensure that users enter valid credentials. Generally, username and password
(Authentication) and the logged-in user has appropriate rights within the application
(Authorization).
a
as
Estimated Time: 20 minutes
h
. m)
Downloads
ide .co
• Did you miss out on trying the previous labs? Don’t worry! You can download the
Gu ail
application from here and import it into your workspace. To run the app, please run
is m
the steps described in Get Started with Oracle APEX and Using SQL
th g
Workshop workshops.
e @
us ne
Implement Social Sign In(Facebook) Authentication in Online Shopping Cart Application.
to dha
In this hands-on lab, you create a Social Sign-in authentication scheme to enable Facebook
se ar
1. Log in to Facebook’s developer console. Login to the Meta for Developers using
your Facebook Credentials and then select My Apps.
ble r.p
ra i
fe am
ns (s
Note: If you are logging in to the Facebook developer console for the first time, you
tra ne
• A new user must first click the Get Started link to Create a Facebook for
nd
Developers account.
Na
• This then brings you to a welcome screen that gives you the option to Continue.
Click Continue.
ir
m
from Facebook.
• Choose an option for who you are. Example, developer, product manager, etc.
Sa
m
ir
2. Click Create App.
Na
nd
. m)
h as
a
377
4. Now, Under Provide Basic Information, enter the following and click Create App.
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
5. You will now verify your Facebook account by Re-entering your password.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Copy the App ID and App secret and paste them into your Notepad. It will be used to
create the web credential in your APEX application later.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
380
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
7. In the Left Navigation Menu, click on Add Product.
to dha
us ne
e @
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
9. Navigate to Settings under Facebook Login in the navigation menu. You have to
enable Client OAuth Login and
to dha
add https://apex.oracle.com/pls/apex/apex_authentication.callback (If you are
se ar
using apex.oracle.com) Valid OAuth Redirect URIs. Then click on Save Changes.
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
11. Under Workspace Utilities, Select Web Credentials.
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
a
the App Secret you copied in Step 6.
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
15. Click Shared Components.
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
a
h as
18. Under Create Authentication Scheme Page, leave the settings to default and click Next.
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
19. In the Authentication Scheme enter the following and click Create
Authentication Scheme. Under Name:
nd
Na
Under Settings:
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
20. Notice that a new Authentication Scheme you created is displayed as FB Authentication
tra ne
- Current.
n - ha
no ard
nd
Na
ir
m
Sa
21. Run the application by navigating to Online Shopping Application and click Run.
Sa
m
ir
Na
nd
lic .na
en nd
se ar
to dha
us ne
e @
Gu ail
ide .co
. m)
h as
a
387
24. You are now logged in to the Online Shopping Application. Check the user name on the
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
Creating and Using an Authorization Scheme
us ne
to dha
In this task, you create an Authorization Scheme to ensure only people entered as Team
Members can log into the Online Shopping Application. You apply the authorization
se ar
a
h as
. m)
ide .co
3. Under Shared Components > Security, click Application Access Control.
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
7. In the User Assignment Page, enter the following and click Create Assignment.
se ar
en nd
392
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
11. In the Details section of Create Authorization Scheme, enter the following and click Create
Authorization Scheme.
se ar
en nd
e. For Identify error message displayed, enter You are not Authorized to
tra ne
view this.
n - ha
no ard
nd
Na
ir
m
Sa
394
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
a
as
13. In the Edit Security Attributes Page, under Authorization,
h
select Admin for Authorization Scheme. Click Apply Changes.
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
14. Navigate to the runtime environment (tab or window). Click Sign Out in the
Na
15. Run the application by navigating to Online Shopping Application and click Run.
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Summary
Sa
You now know how to create a Social Sign-in authentication scheme to enable
Facebook Authentication
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
th g
is m
Gu ail
ide .co
. m)
h as
a
Pages to your Application
Practice: Adding Additional
Practice 1: Adding Additional Pages to Your Application
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
In this hands-on lab, you will add Calendars, Charts, Tree pages, and Maps to the Demo
Projects application and to the Online Shopping application.
Downloads
a
as
• Did you miss out on trying the previous labs? Don’t worry! You can download the
h
application from here and import it into your workspace. To run the app, please run
. m)
the steps described in Get Started with Oracle APEX and Using SQL Workshop
ide .co
workshops.
Gu ail
Create a Calendar
is m
th g
e @
1. Navigate to App Builder and in the Home Page, click Demo Projects.
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
3.
2.
Sa
m
ir
Na
nd
no ard
se ar
to dha
us ne
e @
399
4. In the Create Calendar page, enter the following and click Next:
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
• Set Breadcrumb and Navigation to Yes.
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
6. Click Save and Run Page. Log in to the application with your credentials.
ble r.p
ra i
fe am
region. In the Rendering tree, locate the Calendar region. Click Calendar. In the Property
Editor, under Appearance, click the Template Options button.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
9. In the Template Options dialog box, input the following:
to dha
• Header - select Hidden but accessible.
se ar
In this lab, you will create a Form Page on the DEMO_PROJECTS tables, then in the next labs,
you will link the form to the Calendar Page.
1. Navigate to App Builder and in the Home Page, click Demo Projects. Then, click
Create Page.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
2. Select the Form page type.
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
as
• For Table / View Name, select DEMO_PROJECTS.
h
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
In this lab, you will link the form page you created in Task 2 with the Calendar page.
ns (s
tra ne
the Calendar region. In the Property Editor, click Attributes. Then, Under Settings, Select
ID for Primary Key and then locate Create Link and click No Link Defined.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
3. In the Link Builder – Create Link dialog box, select 9 for Page, and enter 9 for Clear Cache.
to dha
Click OK.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
5. In the Link Builder – View / Edit Link dialog box, input the following:
• Page - select 9.
• Name - select P9_ID
• Value - select ID or enter &ID.
• Clear Cache - enter 9.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
6. You can enable calendar drag and drop by using the component attribute Drag and Drop.
nd
Your SQL query must select a primary key column, and you must have set the Primary
Na
Key Column calendar attribute. Then enter the PL/SQL code to update the event row in
ir
the database in the Drag and Drop PL/SQL Code attribute. That PL/SQL code typically
m
Sa
a
where ID = :APEX$PK_VALUE;
as
end;
h
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
Create and Customize a Tree Page to dha
In this hands-on lab, you create the Employee tree by first creating a blank page and then
se ar
1. First, create a blank page in the Demo Projects application. In the application home page,
ble r.p
3.
2.
410
Sa
m
ir
Na
Select Blank Page.
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
Enter Tree Page for Name and then click Create Page.
e @
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
Under Identification:
For Name, enter Tree.
ble r.p
•
ra i
Under Source:
ns (s
tra ne
• For SQL Query, copy the following code and paste it:
no ard
else -1
Na
end as status,
level,
ir
m
"ENAME" as title,
Sa
null as icon,
"EMPNO" as value,
"ENAME" as tooltip
from EBA_DEMO_IR_EMP
start with "MGR" is null
connect by prior "EMPNO" = "MGR"
order siblings by "ENAME"
6.
412
button.
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
8. In the Property Editor, Select Attributes. Navigate to Settings and select / enter
tra ne
the following:
n - ha
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
Overview
In this lab, you will first create a Map Page with Store Details, and then you will create an entry
for the Store Details Map in the navigation Menu Entry.
Downloads
a
as
• Did you miss out on trying the previous labs? Don’t worry! You can download the
h
application from here and import it into your workspace. To run the app, please run
. m)
the steps described in Get Started with Oracle APEX and Using SQL Workshop
ide .co
workshops.
Gu ail
is m
th g
Create a Store Details Map Page and Add It to Desktop Navigation Bar
e @
us ne
1. Navigate to App Builder and in the Home Page, click Online Shopping Application.
to dha
2. In the application home page, click Create Page.
se ar
en nd
a
as
Under Navigation:
h
. m)
• For Breadcrumb, set it to No.
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
5. For Create Map, enter the following and click Create Page. For Map Style, select Points.
Na
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
6. The Store Locations Map should be visible to the Public. To set the page as Public, select
fe am
Page #: Store Locations Map in the Rendering tree. In the Property Editor, navigate to
ns (s
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
9. Navigate to Shared Components.
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
10. In the Shared Components page, under Navigation, select Navigation Bar List.
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
13. For List Entry, enter the following and click Create List Entry.
us ne
to dha
Under Entry:
se ar
Under Target:
• For Page, select 20.
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
15. You can now see that Store Locations Map is now displayed in Navigation Bar.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
You now know how to manage Map pages. You may now proceed to the next lab.
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
th g
is m
Gu ail
ide .co
Practice: Migrate
. m)
h as
a
Between Environments
Application Development
Practice 1: Migrate Applications
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
Overview
In this lab, You will create Installation scripts and Data Packages to export Database objects
along with Data. Then you will export the DEMO PROJECTS Application along with supporting
objects and import it into another workspace.
a
Objectives
h as
In this lab, you will:
. m)
• Create Installation Scripts
ide .co
• Create Data Packages
Gu ail
is m
Export application with supporting Objects.
•
th g
Downloads
e @
us ne
• Did you miss out on trying the previous labs? Don’t worry! You can download the
application from here and import it into your workspace. To run the app, please run
to dha
the steps described in Get Started with Oracle APEX and Using SQL
Workshop workshops.
se ar
en nd
Before starting this lab, you need to provision a new APEX instance or Workspace.
ra i
fe am
In this hands-on lab, you will log in to a new, remote APEX workspace, create a table, and then
ns (s
3.
2.
Sa
m
ir
Na
nd
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
ide .co
. m)
h as
a
423
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
5.
4.
424
Sa
m
Click Create.
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
Under Installation, Select Installation Scripts.
se ar
to dha
us ne
e @
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
7. Under Script Attributes, select the below options and click Next.
lic .na
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
Sa
m
ir
Na
nd
427
9. You will now see the Scripts created. Click Create.
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
10. Now, you will see that the Scripts got created and Saved. You will need to include Data in
your Supporting Objects. Select Create Data Package under Tasks on the Right side of
ra i
fe am
your page.
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
11. Under Script Attributes, Select the following and click Next.
Sa
m
ir
Na
nd
12. For Create Script, accept the defaults and click Finish.
us ne
e @
429
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
430
Sa
m
ir
Na
nd
no ard
n - ha
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
16. You will now notice that the application is downloaded as fNNN.sql
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
Import Application into the Target Workspace and Verify Database Objects.
nd
Na
ir
m
Sa
1.
432
Sa
m
ir
Na
nd
no ard
n - ha
tra ne
Log in to the Target Workspace.
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
3.
2.
Sa
m
ir
Na
nd
lic .na
en nd
se ar
to dha
us ne
e @
433
4. Choose the file we exported in the previous lab from your Local System and then
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
click Next.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
5. Under Install, Set Build Status to Run and Build Application. Leave the remaining
ns (s
6.
Sa
m
ir
Na
nd
435
7. Click Install.
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
8. You will now see that Your application's supporting objects have been installed.
en nd
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
10. Select DEMO_PROJECTS table and then click Data. Verify the Data in the
lic .na
table DEMO_PROJECTS.
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Overview
In this lab, You will be using Remote Deployment to deploy your Application from
Development to UAT. The ORDS feature, REST Enabled SQL is not available
for apex.oracle.com users. Therefore, you will not be able to perform this lab in the
hosted instance apex.oracle.com. You should be using APEX Service or APEX on
a
Autonomous Database options for this lab.
h as
Objectives
. m)
In this lab, you will:
ide .co
Gu ail
• Export application with supporting Objects.
is m
Use Remote Deployment to deploy your Application.
•
th g
e @
Downloads
us ne
• Did you miss out on trying the previous labs? Don’t worry! You can download the
to dha
application from here and import it into your workspace. To run the app, please run
the steps described in Get Started with Oracle APEX and Using SQL
se ar
Workshop workshops.
en nd
lic .na
The ORDS feature, REST Enabled SQL is not available for apex.oracle.com users.
ra i
fe am
Therefore, you will not be able to perform this lab in the hosted instance
apex.oracle.com. You should be using APEX Service or APEX on Autonomous
ns (s
In this Lab, You will install a Sample Application in a new workspace you created
no ard
either on APEX Service or APEX on Autonomous Database. Please follow the steps
in Get Started with Oracle APEX workshop to provision an instance or to create
nd
1.
Sa
m
ir
Na
nd
lic .na
en nd
se ar
to dha
us ne
e @
439
2. Once you Navigate to Gallery, Click Sample Apps.
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
3. Now that you are in Sample Apps, search for apps by typing "Reporting" into the "Search
en nd
Apps" search box and navigate to Sample Reporting and click the Install Button.
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
4.
Sa
m
ir
Na
nd
ide .co
. m)
h as
a
441
5. You can now see that the application is installed. Run the application by
Unauthorized reproduction or distribution prohibited. Copyright© 2024, Oracle University and/or its affiliates.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
your Username and Password (Same as your Workspace credentials) and click Sign In.
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
7. You now see the Sample Reporting application home page. In your Runtime environment
no ard
under Developer Toolbar, click Home to return to the home page of the APEX
nd
Na
ir
m
Sa
8.
444
Sa
m
ir
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
In this Lab, You will enable the Target System to ORDS, and then you will copy the
URL and paste it into your notepad.
a
1. Log in to your Target System.
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
2. Navigate to SQL Workshop > RESTful Services.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
5. Navigate to SQL Workshop > Restful Services. Expand RESTful Data Services >
ble r.p
Modules > oracle.example.hr > empinfo/ GET. Copy the Full URL and paste it into
ra i
6.
448
Sa
m
Click Sign Out.
ir
Na
nd
no ard
n - ha
tra ne
ns (s
fe am
ra i
ble r.p
lic .na
en nd
se ar
to dha
us ne
e @
Your application is now ready for deployment. Perform the following steps:
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Reporting.
a
h as
. m)
ide .co
Gu ail
3. Click Export / Import.
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
the Add Deployment Server ( + ) icon next to the Deployment Server select list.
a
h as
. m)
ide .co
Gu ail
6. Enter the base URL for the REST Enabled SQL Service defined for your deployment
is m
server (WS_APEXUAT in this example). The schema in your deployment server has
th g
e @
already been enabled for use with ORDS RESTful Data Services in prerequisites.
us ne
For Endpoint URL, paste the base URL copied from the deployment instance in the
to dha
previous step(Task 4). The base URL should include the ORDS context root and schema
URL prefix. For example, https://host:8096/ords/apexstage. Then, click Next.
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Type, and turn off the Store Credentials switch. Click Create.
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
8. Now you see a message that REST Enabled SQL Service has been created. From the
us ne
Deployment Server select list, choose the one that you just created. Enter the values
to dha
for Client ID and Client Secret and click Next. In this example, you use Basic
se ar
Authentication. Therefore, enter the Database user name (deployment schema) for
en nd
Client ID and the corresponding password for Client Secret. Then, Click Next.
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
Application.
• Under Export Preferences: For Export Supporting Object Definitions,
select Yes and Install on Import Automatically.
• Under Deployment Overrides: In this example, even though the application
does not yet exist on the target system, turn the Overwrite Existing
Application option On so that you can preserve the application ID, and enable
a
this application for future overwrites.
as
After making the above selections, click Deploy.
h
. m)
ide .co
Gu ail
is m
th g
e @
us ne
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
ir
m
Sa
a
h as
. m)
ide .co
Gu ail
is m
th g
e @
11. Log in to your remote APEX instance. Make sure that the application is available and with
us ne
the same application id as in the source system.
to dha
se ar
en nd
lic .na
ble r.p
ra i
fe am
ns (s
tra ne
n - ha
no ard
nd
Na
Summary
ir
m
You now know how to deploy your Application from Development to UAT.
Sa