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