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

はじめに

「20倍の速さ、100分の1のコードで、エンタープライズ・アプリケーションを構築」

Oracle Apexって面白そう ちょっと始めてみたいけれど、、、

• 英語のドキュメントが苦手
• テキストだけのオフィシャルドキュメントを極力迂回したい
  そんな皆様（自分も含め）に向けて基本的なチュートリアルを作成してみました。

対象

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

シリーズ

Oracle ApexでCRUD画面を爆速開発 - その1（構成周り、一覧表示） //今回
Oracle ApexでCRUD画面を爆速開発 - その2（詳細表示）
Oracle ApexでCRUD画面を爆速開発 - その3（登録/更新処理,Validation,アクセス制限など）
Oracle ApexでCRUD画面を爆速開発 - その4（選択リストの内容で一覧表示内容を更新させる）

バージョン

Oracle Autonomous Transaction Processing 19c
Oracle Cloud Apex　19.2.0.00.18

参考サイト

こちらのブログを参考にさせて頂きました。ありがとうございました！
APEXで対話モード・レポートを作成する
オフィシャルはこちら→　OracleApex公式サイト

今回作成するCRUD画面イメージ

　

テーブル

定番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から実に簡単に一覧画面が作れます。

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

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

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

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

6 "Run Application"をクリック。

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

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

9 "従業員リスト"をタップ。リストが無事に表示されることを確認。
おめでとうございます。

一覧画面の改善

表示件数を変えたい

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

項目名を日本語にしたい

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

ID項目の桁区切りを除去したい

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

参考url:Format Models

変更内容確認

以下のように反映されました。