Oracle ApexでCRUD画面を爆速開発 - その2（詳細表示）

# シリーズ
[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) 

# 前回の内容

必要なDBオブジェクトを準備したうえで一覧画面を作成しました。
[Oracle ApexでCRUD画面を爆速開発 - その1（構成周り、一覧表示）](https://qiita.com/harukb/items/bad041174f59a9f07141)

# 今回の内容
- 詳細画面の作成
- 一覧画面からレコード選択時、また「新規作成」ボタンクリック時の遷移を
作成します。
- 詳細画面の入力項目をカレンダーとリスト選択方式に改善します。
- 詳細画面の項目名の位置を上部に、また任意/必須項目の区別を作成します。

# 詳細画面を作成する
## 詳細画面で実行するCRUDのProcedureを作成
1 "SQLWorkShop">"Utilities"を選択

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/a10e2820-3128-e34d-90a3-f8b07b771585.png)|
|:-:|

2 "Method on Tables"を選択

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/7bf2e335-fb99-d2bb-9195-bde99418881a.png)|
|:-:|

3 パッケージ名"EMP_PKG"を入力し、"Next" 

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/7fcd6d43-895b-54ee-73f1-a10f1c273f98.png)|
|:-:|

4 テーブル"EMP"を選択し、"Next"

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/8b27424e-28db-97c3-a27a-941672547342.png)|
|:-:|

5 "Create Package"

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/eebd6b98-b13d-4f9d-f616-4ac29ef39f39.png)|
|:-:|

6 以下の画面が表示されたら完成

※ ここでORA-20001エラー出たら後述「はまったポイント」を参照すべし。


|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/a9f13d56-748b-7b90-ef94-c09214f2f470.png)|
|:-:|


## 詳細画面を作成する
1 "App Builder">"Create Page">"Form"を選択

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/ce33399b-673e-6d08-ec2d-ced47239c630.png)|
|:-:|

2 "Form on local Procedure"を選択

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/368ba151-f74e-8ec4-3b16-8fe20fb399d8.png)|
|:-:|

3 以下の内容で作成し、"Next"

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/3a0faef6-d00c-aa74-8351-ca0924166512.png)|
|:-:|

4 そのまま"Next"

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/32a94be8-7356-3232-da7d-a5632873e3a4.png)|
|:-:|


5 先ほど作成したEMP_PKG.GET_EMPを選択する

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/af10997e-0848-a37f-738d-965ab59f6f87.png)|
|:-:|

6 "Create"をタップする
※　リストでは同一項目が重複してますがいったんエラーを避けるため後で省くことにしてこのまま作成します。
※　Display Typeも画面側で修正することにします。

7 詳細画面が作成されました。おめでとうございます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/03f7b171-b7a9-0c5b-bb03-ad6580d3e957.png)|
|:-:|

## 自動作成の後片付け
1 "Page Items"にて重複項目を削除する
※　右クリックして一気に削除

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/bb42d187-0690-8c1c-ba27-0ce2a60fb1d6.png)|
|:-:|
2 "Page Processing"の中の"Run Stored Procedure"のCodeにある重複項目も削除。内容をクリップボードにコピーしておく

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/45ae3fc2-f93f-3aff-1f9e-5a44f48347b1.png)|
|:-:|

"Run Stored Procedure"は削除し、新たに"Page Rendering"にProcess "Fetch Row"を作成し、先ほどクリップボードにコピーしたコードを設定する。 

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/75c210dc-9a17-417d-0135-69db2996839b.png)|
|:-:|

# 遷移処理を作成する
## 一覧画面→詳細画面へ遷移（更新）
1 App Builder画面の右上よりPageを切り替え一覧画面に移動する

2 "Content Body">"V_EMP">"Attributes"より"Link Column"を"Link to Custom Target"に変更

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/57d7d3f2-c6a9-a8d9-f48a-b398f810eacc.png)|
|:-:|

3 "Target"の"No Link～"をクリックする

4 ダイアログに一覧画面から引き渡す項目をセットして"OK"をクリックする

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/a2ed4a2c-07a0-6c7c-0e23-92d492594327.png)|
|:-:|

5 リストから左の鉛筆アイコンをクリックすると詳細画面に情報が渡されて表示されました。おめでとうございます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/3cd470c1-cc31-28d7-e919-51fbd1e20f14.png)|
|:-:|

## 一覧画面→詳細画面へ遷移（新規作成）
1 App BuilderでLayoutView（中央一番左タブ）を選択し、下にある"Buttons">"Text"をV_EMPリージョンの任意の場所にドラッグする（ここではNEXT）図のようにボタンが配置される

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/cacfdba0-6d84-ffed-68d2-fd80222b9f41.png)|
|:-:|

2 ボタンをクリックし、右の"Button"にて内容修正
 - Button Name = CREATE
 - Label = 新規作成
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/03a45e94-0c94-60ff-c9fa-ad8c8cd9573a.png)|
|:-:|

3 次にそのまま少し下にある"Behavior"の"Submit Page"を"Redirect to Page in this App.."に変更し、 "Target"の"No Link～"をクリックする

4 "Page"に詳細画面のページ番号（ここでは3）を入力し閉じる。

5 実行し、「新規作成」ボタンから詳細画面に対し新規画面として表示されました。おめでとうございます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/2a5c85d6-84cd-51aa-c364-fa64ecd0f9ad.png)|
|:-:|

# フォームの入力形式の改善
## 日付項目をカレンダーからの取得形式にあらためる
1 Page Itemの"P3_HIREDATE"の"Identification">"Type"を"Date Picker"に変更する
2 1の下にある"Settings"の"Maximum Date"に"+0d"を設定することでシステム日付までの制限が作成される
3 2の下にある"Appearance">"Format Mask"に"yyyy/mm/dd"を設定することで自然な表示になる

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/8181e47a-f02a-3b96-4b12-75dda47206d3.png)|
|:-:|

## プルダウンリストを作成
テキスト入力をテーブルからとってきたリスト形式に変更します。

1 AppBuilder画面の右上の虫眼鏡（検索窓）から"Shared Components"を入力し候補から選択

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/e7831927-3fa4-870d-2236-17143f74bbaf.png)|
|:-:|

2 "List Of Values"をクリック

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/ecb12e24-ec04-55a5-049f-687c1669d241.png)|
|:-:|

3 右上の"Create"をクリックし、ダイアログで"Next"に進む

4 Nameに"EMPLIST"を入力し"Next"

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/f1123f71-1850-e3d5-5fcc-53d8f6253136.png)|
|:-:|

5 リストに表示するSQLを入力
※　dがリスト表示される値、rが裏での返却値となる
※　今回は判断しやすいようにdには名前だけでなく部署名を補足で設定

`SELECT 
　　　EMP.ENAME||'('|| DEPT.DNAME ||')' d, 
　　　EMP.EMPNO r
FROM 
　　　EMP,DEPT 
WHERE 
　　　EMP.DEPTNO = DEPT.DEPTNO
 ORDER BY 1`

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/27e56df9-6fc1-e858-2b28-2fbaf0f9944f.png)|
|:-:|

6 App Builderに戻り、"Page Items"のP3_MGRをクリックし、右上の"Identification">"Type"を"Popup LOV"に変更

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/8bce56af-8046-ff4a-f105-3a0ec54764a3.png)|
|:-:|


7 "List of Values">"Type"に"Shared Component"、List of Valuesで"EMPLIST"を選択

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/ccc9bfb3-944b-191a-8bd6-1ca1aaebdaaf.png)|
|:-:|
 
8 実行し、詳細画面で"MGR"項目でのリストをクリックすると以下のように表示されることを確認

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/822abd51-b6ac-7707-71d0-469b197d31a4.png)|
|:-:|

## 項目名位置と任意項目、必須項目を設定
1 必須項目かつ項目名を上にする場合は対象の"Page Item">"Appearance"にて"Required-Above"
2 任意項目かつ項目名を上にする場合は対象の"Page Item">"Appearance"にて"Optional-Above"
※ ここではEMPNO,ENAME,JOB,HIREDATE,DEPTNOを必須にしました。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/0e14ac02-b0af-6463-3d7c-0faba33b510b.png)|
|:-:|

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/684a703e-90ff-b435-af33-b7507b725fa8.png)|
|:-:|

# はまったポイント
"Method on Tables"で以下のメッセージが出て正常にProcedureが作成されない

ORA-20001: Package creation failed due to invalid SQL syntax.

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/7aed9824-1489-d36b-f5b6-aa80266a6866.png)|
|:-:|

対応策）
PKが一番最初に定義されていないとNGなのでTableをcreateし直した。

`---NGな書き方
CREATE TABLE SYAIN (
　　NAME VARCHAR2(20)
　　,ID CHAR(4)
　　,AGE NUMBER(2,0)
　　,CONSTRAINT PK_SYAIN PRIMARY KEY(ID)
);
`
`---OKな書き方
CREATE TABLE SYAIN (
　　ID CHAR(4)
　　,NAME VARCHAR2(20)
　　,AGE NUMBER(2,0)
　　,CONSTRAINT PK_SYAIN PRIMARY KEY(ID)
);
`

##