# 串接 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:

```sql
-- 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 }
*/
```

```sql
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 

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2FnHoWlj2MPCa5Y7velsVP%2Fimage.png?alt=media\&token=26477e56-f37f-4372-9110-f70425a7b885)

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

* Type: SQL Query
* SQL Query:

```sql
select TIME_LABEL as disp_val,
    TIME_NO as ret_val 
 from HY_TIME_PERIOD
```

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2FA28hzbf7tlAHcDxdIvUf%2Fimage.png?alt=media\&token=b72cc579-0dc2-4644-9a5a-7a87dd125bdc)

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

* Type: SQL Query
* SQL Query:

```sql
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`的值必須提交到後端。

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2FJKL9Yy8R1sekKapuaDAx%2Fimage.png?alt=media\&token=f7f60e06-8f27-4d63-aa8a-3a50183e77c2)

S5 測試

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

![](https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2Fji12PQPTpemk4c4sz5ks%2Fimage.png?alt=media\&token=dc2db5a9-9cca-4bb0-b0c6-756fdf038916)

S6 完成