Hướng dẫn sử dụng Tabular Form trong Oracle APEX
Công ty Vĩnh Cửu tuyển dụng lập trình viên Java

1- Giới thiệu

Bạn đang xem tài liệu hướng dẫn lập trình Oracle APEX 5.0. Đây là tài liệu thứ 2 tiếp theo sau tài liệu:

 
Trong tài liệu này tôi sẽ hướng dẫn bạn tiếp tục với Oracle APEX Database Desktop Application, sử dụng Tabular Form.

2- Tạo Tabular Form sử dụng Wizard

Đăng nhập vào Oracle APEX với tài khoản người lập trình.
Vào mục "Database Application".
Vào tiếp ứng dụng "Hello Database Desktop Application" mà bạn đã tạo trong tài liệu hướng dẫn trước.
Trong ứng dụng này đã có một vài trang được tạo trong bài hướng dẫn trước. Click "Create Page" để tạo mới một trang khác.
Tạo một Tabular Form:
Nhập vào:
  • Page: 7
  • Page Name: Emp Tabular Form (7)
Trang web của bạn đã được tạo ra, nhấn vào nút RUN để chạy thử trang vừa tạo.
Đây là hình ảnh trang 7 khi được chạy.
Here, the question arises as to how to change some input fields into SELECT LIST or POPUP LOV (List of values). For example, you want to choose a Manager (MGR) through POPUP LOV, and select a Job through SELECT LIST.
Trở lại màn hình thiết kế trang 7. Sét đặt các thuộc tính cho cột JOB để nó hiển thị như một danh sách lựa chọn (SELECT LIST).
Identification:
  • Type: Select List
List of Values
  • Type: Static Value
  • Static Value:
STATIC:
CLERK;CLERK,
SALESMAN;SALESMAN,
PRESIDENT;PRESIDENT,
MANAGER;MANAGER,
ANALYST;ANALYST
Cú pháp khai báo các giá trị tĩnh (Static Values):
STATIC:Display1;Return1,Display2;Return2
Tiếp theo bạn cần sét đặt các thuộc tính cho trường MGR để nó hiển thị dưới dạng POPUP LOV (List of values)
Identification:
  • Type: Popup LOV (shows display values)
List of Values:
  • Type: SQL Query
  • SQL Query: Select emp.ename, emp.empno from Emp
Tương tự sét đặt các thuộc tính cho DEPTNO, để nó hiển thị như là một POPUP LOV.
Identification:
  • Type: Popup LOV (shows display values)
List of Values
  • Type: SQL Query
  • SQL Query: Select d.dname, d.deptno from Dept d
Save và chạy lại trang 7:

3- Tạo Tabular Form bằng tay

Ở trên tôi đã hướng dẫn bạn cách tạo Tabular Form sử dụng wizard của Oracle Apex. Tiếp theo chúng ta sẽ tạo Tabular Form hoàn toàn từ đầu, không sử dụng wizard, nó sẽ giúp bạn hiểu hơn về  Tabular Form & Oracle APEX.
Nhập vào:
  • Page Number: 8
  • Name: Emp Tabular Form (8)
Một trang rỗng đã được tạo ra.
Tạo Tabular Form trong vùng "Content Body":
  • Title: Emp Tabular Form (8)
  • Type: Tabular Form
  • SQL Query:
select EMPNO,
       EMPNO EMPNO_DISPLAY,
       ENAME,
       JOB,
       MGR,
       HIREDATE,
       SAL,
       COMM,
       DEPTNO
  from EMP
Bạn có thể chạy thử trang 8, kết quả có được:
Thêm một cột chứa các CheckBox, sử dụng để lựa chọn các dòng.
Sét đặt thuộc tính cho EMPNO, ẩn cột này, và sét đặt thuộc tính primary key cho nó.
Identification
  • Column Name: EMPNO
  • Type: Hidden Column (saves state)

Primary Key Source
  • Type: Existing sequence
  • Name: EMP_SEQ
Cột ENAME:
Identification
  • Column Name: ENAME
  • Type: Text Field
Cột JOB:
Identification
  • Column Name: JOB
  • Type: Select List

List of Values
  • Type: Static Values
  • Static Values:
STATIC:
CLERK;CLERK,
SALESMAN;SALESMAN,
PRESIDENT;PRESIDENT,
MANAGER;MANAGER,
ANALYST;ANALYST
Cột MGR:
Identification
  • Column Name: MGR
  • Type: Popup LOV (shows display values)

List of Values
  • Type: SQL Query
  • Static Values: Select emp.ename, emp.empno from Emp
Cột HIREDATE:
Identification
  • Column Name: HIDEDATE
  • Type: Date Picker
Appearance
  • Format Mask: YYYY-MM-DD
Default
  • Type: PL/SQL Expression
  • PL/SQL Expression: sysdate
Cột SAL:
Identification
  • Column Name: SAL
  • Type: Text Field
Cột SAL (Salary) là kiểu dữ liệu số, vì vậy bạn cần thêm validation:
Identification
  • Name: SAL must be numeric
Validation:
  • Type: Column is numeric
  • Column: SAL
Error
  • Error Message: #COLUMN_HEADER# must have a value.
  • Display Location: Inline with Field and in Notification
Chú ý:
  • #COLUMN_HEADER# là một cái có tác dụng giữ chỗ (Place Holder), nó sẽ được thay thế bởi tiêu đề của cột tương ứng tại thời gian chạy.
Cột COMM:
Identification
  • Column Name: COMM
  • Type: Text Field
Tạo validation cho COMM, COMM phải là dữ liệu số.
Identification
  • Name: COMM must be numeric
Validation:
  • Type: Column is numeric
  • Column: COMM
Error
  • Error Message: #COLUMN_HEADER# must have a value.
  • Display Location: Inline with Field and in Notification
Cột DEPTNO:
Identification:
  • Type: Popup LOV (shows display values)
List of Values
  • Type: SQL Query
  • SQL Query: Select d.dname, d.deptno from Dept d

4- Sử lý Tabular Form

Bước tiếp theo chúng ta cần thêm các sử lý bao gồm thêm mới, sửa, xóa các bản ghi.
Thay đổi tên cho các Button, như hình minh họa dưới đây:
Sử lý Button Cancel:
Khi người dùng nhấn vào nút Cancel, trang web sẽ refresh lại trang hiện tại (Ở đây là trang 8).

4.1- Sử lý thêm mới bản ghi

Khi người dùng nhấn vào nút ADD, table trên trang sẽ tự động thêm một dòng mới, cho phép người dùng nhập dữ liệu. Bạn cần gọi hàm javascript để thực hiện điều này.
Idetification
  • Button Name: ADD
  • Label: Add

Behavior
  • Action: Redirect to URL
  • Target: javascript:apex.widget.tabular.addRow();

4.2- Sử lý lưu nhiều dòng dữ liệu

Idetification
  • Button Name: SAVE
  • Label: Save

Behavior
  • Action: Submit Page
Nút SAVE cần phải thực hiện nhiệm vụ lưu thông tin của nhiều bản ghi cùng một lúc, bao gồm các bản ghi mới các các bản ghi có sửa đổi. Bạn cần phải khai báo một tiến trình (Process) sử lý việc này.  Process này sẽ được chạy một lần ngay sau khi trang được gọi, nó sẽ update các bản ghi có thay đổi và insert các bản ghi mới.
Thêm mới Process:
Idetification
  • Name: ApplyMRU
  • Type: Tabular Form - Multi Row Update

Settings
  • Table Name: EMP
  • Primary Key Column: EMPNO

Execution Options
  • Tabular Form: Emp Tabular Form (8)
  • Run Process: Once Per Page Visit (default)

Success Messages
  • Success Message: #MRU_COUNT# row(s) updated, #MRI_COUNT# row(s) inserted.

Condition
  • When Button Pressed: SAVE (Name of button)
  • Execution Scope: For Created and Modified Rows

4.3- Sử lý xóa nhiều dòng ngay lập tức

Sử lý Button xóa ngay lập tức các bản ghi đã chọn, không cần hỏi:
Để xóa nhiều dòng bạn cần tạo một tiến trình (Process) sử lý việc này. Process này sẽ được thực thi một lần ngay khi trang web được gọi.
Tạo mới Process:
Idetification
  • Name: ApplyMRD_IMMEDIATELY
  • Type: Tabular Form - Multi Row Delete

Settings
  • Table Name: EMP
  • Primary Key Column: EMPNO

Execution Options
  • Tabular Form: Emp Tabular Form (8)
  • Run Process: Once Per Page Visit (default)

Success Messages
  • Success Message: #MRD_COUNT# row(s) deleted.

Condition
  • When Button Pressed: IMMEDIATELY_MULTY_ROW_DELETE (Name of button)
  • Execution Scope: For Created and Modified Rows

 

4.4- Sử lý xóa nhiều dòng - Hỏi trước khi xóa

Trước khi xóa các bản ghi, chương trình hỏi người dùng có đồng ý xóa hay không trước khi thực thi lệnh xóa.
Idetification
  • Button Name: MULTI_ROW_DELETE
  • Label: Multi Row Delete

Behavior
  • Action: Redirect URL
  • Target: javascript:apex.confirm('Are you sure to delete?','MULTI_ROW_DELETE');
apex.confirm(...) là hàm Javascript để người dùng xác nhận trước khi thực thi lệnh của button.
// Hàm bao gồm 2 tham số, message và Button Name.

apex.confirm('Message ...', 'Button Name');

// Ví dụ:

apex.confirm('Are you sure to delete?','MULTI_ROW_DELETE');

// Sử dụng biến
// htmldb_delete_message là một biến Javascript
// nó có giá trị 'Would you like to perform this delete action?'
// (Bạn cần khai báo biến này).
apex.confirm(htmldb_delete_message,'MULTI_ROW_DELETE');
// Khai báo một biến có tên htmldb_delete_message
var htmldb_delete_message='Would you like to perform this delete action?';

// Hoặc:
// "DELETE_CONFIRM_MSG" là một hằng số có sẵn trong APEX.
// Nó có giá trị là: Would you like to perform this delete action?

var htmldb_delete_message='"DELETE_CONFIRM_MSG"';


// Sau đó có thể sử dụng biến này trong toàn bộ trang.

apex.confirm(htmldb_delete_message,'MULTI_ROW_DELETE');
Để xóa nhiều dòng bạn cần tạo một tiến trình (Process) sử lý việc này. Process này sẽ được thực thi một lần ngay khi trang web được gọi.
 
Idetification
  • Name: ApplyMRD
  • Type: Tabular Form - Multi Row Delete

Settings
  • Table Name: EMP
  • Primary Key Column: EMPNO

Execution Options
  • Tabular Form: Emp Tabular Form (8)
  • Run Process: Once Per Page Visit (default)

Success Messages
  • Success Message: #MRD_COUNT# row(s) deleted.

Condition
  • Execution Scope: For Created and Modified Rows
  • Type: Request = Value
  • Value: MULTI_ROW_DELETE
  • Execute Condition: Once

 

5- Master-Details

OK, bạn có thể xem tiếp tài liệu Master-Details:

6- Có thể bạn quan tâm

Tùy chỉnh xác thực trong Oracle APEX:
Oracle APEX Dynamic Action: