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

![](/files/VMEAk4hsayiS8OrUboY8)

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

![](/files/GqHG0XQJQLGFdg9FS9fC)

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

![](/files/FGLK7C6yXYcZJ25KWLzv)

S5 測試

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

![](/files/Pwmoakh9ZKSmccQsWNrV)

S6 完成


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hychen39.gitbook.io/apex-notes/lov/cascade_lov.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.