Oracle ApexでCRUD画面を爆速開発 - その1（構成周り、一覧表示）



# はじめに
[**「20倍の速さ、100分の1のコードで、エンタープライズ・アプリケーションを構築」**](https://apex.oracle.com/ja/)

Oracle APEXって面白そう:point_up: ちょっと始めてみたいけれど、、、
- 英語のドキュメントが苦手
- テキストだけのオフィシャルドキュメントを極力迂回したい
そんな皆様（自分も含め）に向けて基本的なチュートリアルを作成してみました。

# 対象
Oracle APEXビギナーを対象。
ただし今回の前提となるOCIのアカウント開設～DB構築は記載しません。
必要に応じてこちらをご覧ください。
[[Oracle Cloud] OCI IaaS関連情報まとめ](https://qiita.com/feifo/items/551a8a4250f83e4c33c3)

# シリーズ
[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) 
# バージョン
Oracle Autonomous Transaction Processing 19c
Oracle Cloud Apex　19.2.0.00.18

# 参考サイト
こちらのブログを参考にさせて頂きました。ありがとうございました！
[APEXで対話モード・レポートを作成する](https://mutatsu.wordpress.com/2016/05/04/)
オフィシャルはこちら→　[OracleAPEX公式サイト](https://apex.oracle.com/ja/)



# 今回作成するCRUD画面イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/51e39795-54de-4ab5-250d-0e08641c4683.png)　

# テーブル
定番DEPT表とEMP表を利用します。
DEPT

| COLUMN_NAME | DATA_TYPE         | NULLABLE | COLUMN_ID | PK |
|-------------|-------------------|----------|-----------|----|
| DEPTNO      | NUMBER(2,0)       | No       | 1         | *  |
| DNAME       | VARCHAR2(14 BYTE) | Yes      | 2         |    |
| LOC         | VARCHAR2(13 BYTE) | Yes      | 3         |    |


EMP

| COLUMN_NAME | DATA_TYPE         | NULLABLE | COLUMN_ID | PK |
|-------------|-------------------|----------|-----------|----|
| EMPNO       | NUMBER(4,0)       | No       | 1         | *  |
| ENAME       | VARCHAR2(10 BYTE) | Yes      | 2         |    |
| JOB         | VARCHAR2(9 BYTE)  | Yes      | 3         |    |
| MGR         | NUMBER(4,0)       | Yes      | 4         |    |
| HIREDATE    | DATE              | Yes      | 5         |    |
| SAL         | NUMBER(7,2)       | Yes      | 6         |    |
| COMM        | NUMBER(7,2)       | Yes      | 7         |    |
| DEPTNO      | NUMBER(2,0)       | Yes      | 8         |    |


# テーブル以外のDBオブジェクト
1. v_EMP(VIEW)
一覧画面の表示情報のView

```
SELECT 
    E.EMPNO,E.DEPTNO,D.DNAME,E.ENAME,E.JOB,E.MGR,E.HIREDATE,E.SAL,E.COMM
FROM 
    EMP E LEFT OUTER JOIN DEPT D  
ON 
    E.DEPTNO = D.DEPTNO
ORDER BY
    E.EMPNO
```

# APEXのworkspaceを作成、ログイン
割愛します

# 一覧画面を作成する
1 App Builder>Create>(Create an Application)で一番左の"New Application"をクリックして進む。
※　今回は選択しませんが、隣の"From File"を選ぶとExcelから実に簡単に一覧画面が作れます。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/ce6dd77d-9fb4-deee-f020-8afd417b77b8.png)|
|:-:|

2 「Create an Application」のページでアプリ名をつける（SampleApp）
※　また、画面の下の方に言語切り替えもあるのでLanguage="Japanese"に切り替えしとくと良いかも。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/69c6ca77-05a6-7f0e-169f-bb43e968d328.png)|
|:-:|


3 "Add Page"をクリックして、開かれたダイアログで"Interactive Report"を選択します。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/4f1bdc9c-4b29-fce0-433a-7d4d888a07a2.png)|
|:-:|

4 PageNameを入力（"従業員リスト"）
"Table or View"で"V_EMP"（一覧表示用View:前述）を選択し、"AddPage"をクリックします。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/e981d144-2f4f-bfd2-4bee-55de199df29a.png)|
|:-:|

5 "Create Application"をクリックし、いったん完成。

6 "Run Application"をクリック。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/df17276c-9c03-aba9-17bd-e0f7f9519860.png)|
|:-:|

7.workspace作成時に指定したDBユーザー名とパスワード入力。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/2ac22c67-2364-a9a1-e37d-32565d3616bb.png)

8 ダッシュボードにページが作成されていることを確認。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/08d7bb5d-88e3-6878-7719-5aecb8728f74.png)

9 "従業員リスト"をタップ。リストが無事に表示されることを確認。
おめでとうございます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/72011098-1fe5-fb7a-7b22-c9a36267ab96.png)

# 一覧画面の改善
## 表示件数を変えたい
1 上記の画面の一番下の黒帯の"Edit Page2"をクリック。
2 Component View（上のタブ部分） に切り替えて、"Content Body">"V_Emp"の"Interactive Report"をクリック。画面右のAttributeペインをスクロールして"Rows Per Page Selector"を有効化する。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/6f386b9e-8443-c9fb-63f1-cdf8eb8889ae.png)|
|:-:|

## 項目名を日本語にしたい
1 階層の"Content Body">"V_EMP"のColumnsをクリック。画面右のColumnペインの"Heading"項目にて日本語に修正できます。

| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/7a4be060-3e51-3cc9-8aa1-7422d0c6bbc4.png)　|
|:-:|

## ID項目の桁区切りを除去したい
1 階層の"Content Body">"V_EMP"のColumns>EMPNOをクリック。画面右のColumnペインの"Appearance">"Format Mask"に"9999"をセットして変更します。
※　同様に"MGR"項目も同様の修正を行います。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/3e40b604-6f60-eeb2-3a4f-94f6519ac96b.png)|
|:-:|

参考url:[Format Models](https://docs.oracle.com/en/database/oracle/oracle-database/19/sqlqr/Format-Models.html#GUID-48089B4F-C697-411C-8254-53A7AC5BDA85)

## 変更内容確認
以下のように反映されました。

|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/607651/d53b8d6f-784e-e350-bdb3-e0363a4f9340.png)|
|:-:|