LoginSignup
7
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-04-27

はじめに

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

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

対象

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画面イメージ

image.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

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

image.png

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

image.png

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

image.png

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

6 "Run Application"をクリック。

image.png

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

image.png

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

image.png

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

一覧画面の改善

表示件数を変えたい

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

image.png

項目名を日本語にしたい

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

image.png 

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

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

image.png

参考url:Format Models

変更内容確認

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

image.png
7
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
2