串接 LOV

串接兩個 LOV, 第一個 LOV 的值會決定第二個 LOV 的可顯示值

User Story

有兩個 LOV 欄位，預約開始與結束時間。可預約的最長時間為 2 個小時。預約時段以 30 分鐘為單位。

預約開始的時間決定後，結束時間可選擇的時段只限於兩個小時內的時段。

例如，開始時間 8:00, 可選擇的時間應為 08:30, 09:00. 09:30, 10:00.

原理

串接兩個 LOV

第 2 個 LOV 的資料來源中的 SQL Query 要參考第 1 個 LOV 的值，執行 Query 時，以 WHERE 條件篩選資料。

Apex 使用 Ajax 方式提交第 1 個 LOV 的值到後端，執行第 2 個 LOV 的查詢。之後，更新第 2 個 LOV 的清單值。

資料集準備

準備時段的資料，每半小時一個時段，每個時段指派一個唯一編號，編號聯號：

time_no	time_label
1	08:00
2	08:30
3	09:00
4	09:30
5	10:00

產生資料集的 QuickSQL 及 insert statement:

-- create tables
create table hy_time_period (
    time_no                        number generated by default on null as identity 
                                   constraint hy_time_period_time_no_pk primary key,
    time_label                     varchar2(4000 char)
)
;

-- comments
comment on column hy_time_period.time_label is '時段標籤';
comment on column hy_time_period.time_no is '時段編號';

-- load data
 
-- Generated by Quick SQL Wednesday July 12, 2023  14:06:35
 
/*
# prefix: "hy"
time_period
    time_no num /pk  -- 時段編號
    time_label vc  -- 時段標籤

# settings = { prefix: "HY", PK: "IDENTITY", semantics: "CHAR", language: "EN", APEX: true }
*/

insert into hy_time_period values (1, '08:00');
insert into hy_time_period values (2, '08:30');
insert into hy_time_period values (3, '09:00');
insert into hy_time_period values (4, '09:30');
insert into hy_time_period values (5, '10:00');
commit;

步驟

S1 在頁面中新增兩個 item, 型態皆為 Select List

S2 設定第一個 Select List item 的 List of Values 屬性:

• Type: SQL Query

• SQL Query:

select TIME_LABEL as disp_val,
    TIME_NO as ret_val 
 from HY_TIME_PERIOD

S3 設定第二個 Select List item 的 List of Values 屬性:

• Type: SQL Query

• SQL Query:

select time_label as dis_val, 
        time_no as ret_val
 from hy_time_period 
 where time_no > :P6_START_TIME and  time_no <= :P6_START_TIME + 4

注意在 WHERE clause 中，我們參考到第一個 item :P6_START_TIME 的值。

S4 設定第二個 Select List item 的 Cascading List of Values 屬性:

• Parent Items(s) 指決定第二個 item 的 LOV 的父 item, 設成 :P6_START_TIME

• Item to Submit: 在更新第二個 item 的的 LOV 值時所要參考的資料，必須從前端送到後端。所以，:P6_START_TIME的值必須提交到後端。

S5 測試

起始時間選 08:00, 結束時間的 LOV 的清單值只顯示近兩個小時:

S6 完成