Oracle Application Express: Developing Database Web Applications
Oracle Application Express: Developing Database Web Applications
Hands-On-Labs Guide
HOL 8-1 Updating the Form Pages in the Demo Projects Application: In this hands-on-lab,
you update the default form pages in the Demo Projects application.
HOL 8-2 Creating a Form on a Table and Linking a Report: In this hands-on lab, you create a
form on the PROJECT_BUDGET table. Then, you create a classic report on the
PROJECT_BUDGET table and link this report to the form. This lab utilizes the Budget App
application.
2
Oracle Application Express: Developing Database Web Applications
HOL 8-1 Updating the Form Pages in the Demo Projects Application
In the Demo Projects application, you create a report that allows each Team Member to see their
outstanding tasks.
3. On the Developer Toolbar at the bottom of the page, click Edit Page 3 to jump to the modal
page in Page Designer.
4. In the property editor > Page > Identification, enter Maintain Team Member for both Name
and Title.
3
Oracle Application Express: Developing Database Web Applications
5. Under Rendering, select the Proj_Team_Member region. In the property editor, navigate to
Appearance > Template Options. Click Use Template Defaults.
6. In the Template Options dialog, under Advanced, for Item Width, select Stretch Form
Fields and click OK.
4
Oracle Application Express: Developing Database Web Applications
7. Now, modify the default Project form page to be more visually appealing and consistent with
how the Maintain Team Member page was improved. Navigate to the application runtime
environment. In the navigation menu, click Demo Projects.
5
Oracle Application Express: Developing Database Web Applications
9. In the runtime environment, after selecting a project, in the Developer Toolbar, click Edit Page
5.
6
Oracle Application Express: Developing Database Web Applications
11. Scroll down to Navigation and for Cursor Focus, select First item on page. Then, click Save.
12. Modify the default Milestone form page to be more visually appealing. In the Demo Projects
runtime environment, navigate to the Demo Proj Milestones page and open one of the records
by clicking the edit icon (pencil).
7
Oracle Application Express: Developing Database Web Applications
15. Scroll down to Navigation and for Cursor Focus, select First item on page. Then, click Save.
16. Modify the default Task form page to be more visually appealing. In the Demo Projects runtime
environment, navigate to the Demo Proj Tasks page and open one of the records by clicking the
edit icon (pencil).
8
Oracle Application Express: Developing Database Web Applications
19. Scroll down to Navigation and for Cursor Focus, select First item on page.
Then, click Save.
9
Oracle Application Express: Developing Database Web Applications
In this lab, you first create a classic report on the PROJECT_BUDGET table. Then, you create a
form on the PROJECT_BUDGET table. Finally, you link the classic report to the form.
2. Click Application xxxx in the Developer toolbar, it will navigate you the Application
homepage. Now, create a Classic Report on the PROJECT_BUDGET table. Click Create
Page and then perform the following steps:
a) Select Report.
c) Enter Project Budget Classic Report for Page Name and click Next
d) For Navigation, select Create a new navigation menu entry and click Next
10
Oracle Application Express: Developing Database Web Applications
3. The report page is created successfully. Now, create a form on the PROJECT_BUDGET table.
Perform the following steps:
a) In the page designer toolbar, click Create and select Page.
b) Select Form.
11
Oracle Application Express: Developing Database Web Applications
d) Enter Project Budget Classic Details for Name, select Modal Dialog for Page Mode and
click Next.
e) Click Next.
g) For Primary Key Type, make sure Select Primary Key Column(s) is selected, and
select ID for Primary Key Column.
h) Click Create.
12
Oracle Application Express: Developing Database Web Applications
4. The form you just created is a dialog page and so you cannot run it directly. If you click the Save
and Run Page, you see this message:
5. You want to navigate to the Project Budget Report page in the page designer. In the toolbar,
click the Navigate to previous page arrow (down arrow).
13
Oracle Application Express: Developing Database Web Applications
6. Under Rendering > Regions, select Report 1. In the property editor, replace the existing title
with Project Budget Report.
14
Oracle Application Express: Developing Database Web Applications
10. In the property editor, navigate to Link. For Link Text, click the Quick Pick and select apex-
edit-pencil.png.
15
Oracle Application Express: Developing Database Web Applications
16
Oracle Application Express: Developing Database Web Applications
17