Oracle ApexでCRUD画面を爆速開発 - その4（選択リストの内容で一覧表示内容を更新させる）



# シリーズ
[Oracle ApexでCRUD画面を爆速開発 - その1（構成周り、一覧表示）](https://qiita.com/harukb/items/bad041174f59a9f07141)
[Oracle ApexでCRUD画面を爆速開発 - その2（詳細表示）](https://qiita.com/harukb/items/d4996b5a9a11ee2f3165) 
[Oracle ApexでCRUD画面を爆速開発 - その3（登録/更新処理,Validation,アクセス制限など）](https://qiita.com/harukb/items/f63c9035de34282320d6) 
[Oracle ApexでCRUD画面を爆速開発 - その4（選択リストの内容で一覧表示内容を更新させる）](https://qiita.com/harukb/items/7b86706f010f886b89f0) //今回

# 前回の内容
詳細画面にCRUD処理を実装しました。

# 今回の主な内容
- 選択リスト：LOV(List Of Values)を変更すると選択に連動して一覧画面の表示を変更します。

# 選択リスト部品を配置する

## 選択リスト用の部品配置
1 一覧画面のPageDesignerにて"Popup LOV"を一覧の上部にドラッグする
2 Identificationの名前に"P2_DEPT"を設定する

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/2c2b29f6-d5c8-2ce3-3a9b-28572481bc2d.png)|
|:-:|

## "List Of Values"の作成

1 データソースに必要な"Shared Component"を作成します。
以下の通り、左ペインの"Page Shared Component"を開き、"List of Values"を右クリックする。
"Create"を選択する。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/28819dcb-7fdc-1e8e-5e90-024844f80bee.png)|
|:-:|

2 表示されたダイアログで"Next"をクリックする。

3 "Create List Of Values"にてnameの設定を行う。
※ここでは"DEPT"としています。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/e8e08a1f-fb29-0dc3-874b-d56dd05f41cf.png)|
|:-:|

4 TableOwnerを選択した上で、DEPTテーブルを選んで"Next"
※ここではオーナーが"USERDB"の例。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/e797968e-be0a-bb6c-03f1-93409682246c.png)|
|:-:|

5 ReturnColumnとDisplayColumnがそれぞれ想定通りに設定されたか確認します。上記以外の場合は画像の通りに設定し直ししてください。このあと"Create"で完成。

## 選択リスト部品へデータソース設定
1 一覧画面のPageDesignerに戻り、選択リスト"P2_DEPT"にて"Page Item">"List of Values"にて今作成したListOfValueのDEPTを選択。
※Display Null ValueはDEPT_NOでの絞り込みを行わない場合の選択肢として利用しています。（下記補足参照。）

- Type -> Shared Component
- ListOfValues -> DEPT
- Display Null Value -> "全て"

### ちょっと補足
本来はNULLの場合はDEPT_NOが未入力であるレコードを探す際に用いるのがより良いかと思いますが、
ここではあくまでもサンプルとして"P2_DEPT_NO"がNULLであれば全検索と位置付けます。

前者を正しく実施するのであれば、DEPTNOの"List Of Values"はテーブルのデータ＋"全て"を
意味するレコードを人為的？にアペンドしておき、
あとで一覧表示のWHERE句でその値をうまく活用して全検索か条件検索か振り分けるのが
良いかと思われます。（完全な想像）


2 実行して画面表示をしてみましょう。選択リストが想定通り表示されることを確認できたら成功です。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/03e9bfc2-b775-715a-9bf4-f331c70f3ddd.png)|
|:-:|


## 選択リストのサイズ変更
1 大きいのでちょっと邪魔。。。ということでサイズを控えめにします。Page Designerに戻ります。

2 選択リスト"P2_DEPT"の"Page Item">"Layout"にて
Column -> 1 //左端に配置する
Column Span -> 3　//1行内で3セル分の結合(COLSPAN)
 
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/9d232c16-0820-f7c0-a5f1-60d090cb972a.png)|
|:-:|

2 実行して画面表示をしてみましょう。選択リストのサイズが想定通り表示されることを確認できたら成功です。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/c6b2a9e7-d209-44f5-52e3-5945cc75b227.png)|
|:-:|
 
# リスト表示変更時のアクションを設定する
## 選択リスト変更時のイベント処理を作成する。

2 "Page Designer"の左ペインより"Dynamic Action">"Events">"Change"を右クリックし"Create Dynamic Action"を選択する。

3 "Dynamic Action"にてイベントを起こす部品とイベント内容を設定する。

"Identification" -> "DEPT CHANGED"
"When" -> "Event"->"Change","Selection Type"->"Item(s)","Item(s)"->"P2_DEPT"

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/296078dc-de27-197b-8839-a93cdf2d0d5c.png)|
|:-:|

4 "True"時、つまりイベントが発生したときの処理を設定する。
ユーザーのブラウザ上での選択リストの値(P2_DEPT)の変更をサーバ上に送る必要があります。そのため、Submit処理を呼びます。

"Identification" -> Action ->"Submit Page"

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/fc4b903a-2157-8798-5c5e-a107cfa76eb3.png)|
|:-:|

# 一覧表示のWHERE句に選択リストの内容を含める

## WHERE句を設ける

1 "Page Designer"の一覧表示コンポートネントである"V_Emp"にて以下の設定を行う。
※前述の選択リストに"全て"というラベルのNULL値を設けていることが前提です。


"Source" -> "Where Clause"->"DEPTNO = NVL(:P2_DEPT,DEPTNO)"

- P2_DEPTがNULLでなければ、WHERE DEPTNO = :P2_DEPT（選択値） となる。
- P2_DEPTがNULLであれば、WHERE DEPTNO = DEPTNO となる。（つまり条件なし。）

2 実行して画面表示をしてみましょう。選択リストの内容に応じて一覧リストが更新されることを確認できたら成功です。おめでとうございます！

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/d9c49507-82e9-515c-4bf9-48e243a358b6.png)|
|:-:|