OracleAPEXにおけるタスク管理アプリ開発(入力フォームのカスタマイズ)

Oracle APEX 技術記事

こんにちは!平野です。

今回の記事は以下の記事の続きとなります。
OracleAPEXにおけるタスク管理アプリ開発(ページの作成)

前回の記事では、フォームに入力したタスクがテーブルに格納される最低限の機能がついたページを作成しました。

今回は、作成したページがさらに使いやすくなるようなカスタマイズを行います。

更新履歴

日付 更新概要
2021/02/15 記事公開

対応バージョン

製品名 バージョン
Oracle APEX 5.1 – 20.2.0.00.20
Oracle Database 12.2 – 19.6

目次

入力フォームのカスタマイズ

ページ2:タスクの登録ページのカスタマイズを行います。

以下がカスタマイズ手順となります。
– リージョン内に配置されたアイテムの設定値を変更する(入力タイプ・ラベル・デフォルト値等)
– ページの表示形式を変更する(標準→モーダル・ダイアログ)

アイテムの設定値変更

  1. OracleAPEXのアプリケーション・ビルダーから、タスク管理アプリケーションを選択します。

    画像

  2. アプリケーションの開発画面から、ページ2:タスクの登録を選択してください。

    画像

  3. P2_USERNAMEアイテムを選択し、設定を変更していきます。

    画像

    プロパティ・エディタ 設定値
    識別 > タイプ 表示のみ
    ラベル > ラベル ユーザー名
    デフォルト > タイプ 静的値
    デフォルト > 静的値 &APP_USER.

    ※(1)Oracle APEXによってテーブルを元に自動生成されたレポートは、デフォルトでテーブル名とカラム名が利用されています。表示されている文字をプロパティ・エディタにて日本語に置き換えることができます。
    ※(2)デフォルトという項目は、セッション上に情報がない場合、自動で入力される初期値です。主に初回のデータ登録時に利用されます。デフォルトの静的値に設定している&APP_USER.はOracleが事前定義している置換文字列です。ログイン中のユーザー名に置換されます。

  4. P2_TASK_TITLEアイテムを選択し、設定を変更していきます。

    プロパティ・エディタ 設定値
    識別 > タイプ テキスト・フィールド
    ラベル > ラベル タイトル
  5. P2_TASK_CONTENTアイテムを選択し、設定を変更していきます。
    プロパティ・エディタ 設定値
    ラベル > ラベル タイトル
  6. P2_TASK_DEADLINEアイテムを選択し、設定を変更していきます。
    プロパティ・エディタ 設定値
    ラベル > ラベル 期日
    設定 > 表示 both

    ※表示をbothに変更することで、テキスト・フィールド部分とアイコンのどちらも、クリック時にカレンダー表示による入力となります。

  7. リージョン・ボタンの設定を変更していきます。

    画像

    ボタン名 プロパティ・エディタ 設定値
    CANCEL 識別 > ラベル 取消
    DELETE 識別 > ラベル 削除
    SAVE 識別 > ラベル 更新
    CREATE 識別 > ラベル 作成
  8. 右上の実行ボタン(再生マーク)を選択し、表示の確認をします。以下のようになっていれば成功です。

    画像

モーダル・ダイアログへの変更

  1. アプリケーション・ビルダーの画面に戻り、ページ2:タスクの登録の設定を変更します。

    プロパティ・エディタ 設定値
    外観 > ページモード モーダル・ダイアログ

    ※モーダル・ダイアログは、操作している画面を背面にして、覆いかぶさるように開く新しい画面のことです。モーダル・ダイアログを閉じるまでは、開いたモーダル・ダイアログ以外の画面操作ができなくなります。今回は入力する項目が少ないため、モーダル・ダイアログを使ってスムーズなタスク入力ができるようにします。

  2. タスクの登録リージョンを選択し、設定を変更します。

    画像

    プロパティ・エディタ 設定値
    外観 > テンプレート Blank with Attributes

    ※Blank with Attributesは囲いをなくしたリージョンを表示する設定です。モーダル・ダイアログに設定した場合、外観テンプレートが標準(Standard)だと以下のように囲いが2つになってしまうため変更します。

    画像

  3. 画面真ん中下のリージョンから静的コンテンツを選択し、Dialog footerへドラック&ドロップしてください。

    画像
    ※外観テンプレートをBlank with Attributesに変更すると、最初にボタンが配置されている領域が実際の画面で表示されなくなります。そのため、ボタンを正しく配置できる新しいリージョンを作成します。

  4. 新規の設定を変更していきます。

    プロパティ・エディタ 設定値
    識別 > タイトル ボタン
    外観 > テンプレート Buttons Container

    以下のようにリージョンボタンを移動させてください。
    画像

  5. 右上の保存を選択してください。

以上でフォームのカスタマイズが完了いたしました。

入力した内容を閲覧できるページを作成

次は、入力した内容を閲覧できるページを作成していきます。

  1. アプリケーションの開発画面から、ページの作成を選択し、レポートからリスト・ビューを選択して下さい。

    画像

  2. ページ属性を以下のように設定してください。

    項目 設定値
    ページ名 タスクの一覧
    ブレットクラム Breadcrumb
    親エントリ ホーム(ページ1)
  3. ナビゲーション・メニューを以下のように選択してください。
    項目 設定値
    ナビゲーションのプリファレンス 新規ナビゲーション・メニュー・エントリを指定
  4. ソースを以下のように選択してください。
    項目 設定値
    表/ビューの名前 TASK_LISTS
  5. ページの作成を以下のように選択してください。
    項目 設定値
    機能 拡張フォーマット
    テキスト形式 &TASK_TITLE.
    親エントリ ホーム(ページ1)
  6. 作成を選択し、ページ・デザイナからタスクの一覧を選択してください。

    画像

  7. Attributesの設定を変更していきます。

    プロパティ・エディタ 設定値
    補足情報の形式 &TASK_CONTENT.
    リスト区切り形式 期日:&TASK_DEADLINE.
  8. リージョンの設定を変更していきます。
    プロパティ・エディタ 設定値
    ソース > 並べ替え基準 TASK_DEADLINE ASC

    並び替え基準はASCとした場合は昇順、DESCとした場合は降順に並び替えられます。
    今回は期日の近いタスクを昇順に並べます。

  9. 画面真ん中下のボタンからtextボタンを選択し、タスク一覧のEDITへドラック&ドロップしてください。

    画像

  10. 配置したボタンを選択し設定を変更します。

    プロパティ・エディタ 設定値
    識別 > ボタン名 タスクの登録
    動作 > ターゲット > ページ 2
    動作 > クリア/リセット > キャッシュのクリア 2
  11. 実行ボタン(再生マーク)を選択し、表示の確認をします。以下のようになっていれば成功です。タスクの登録を選択します。

    画像

  12. 好きな値を入力し、作成ボタンを押してください。

    画像

  13. 以下のようになっていれば成功です。タスクの期日を基準に昇順で並んでいるのが確認できます。

    画像

おわりに

いかがだったでしょうか。

今回でタスクの登録・一覧表示ができるようになりました。
ここまでの機能をGUI上だけで完結できるのがOracle APEXの強みだと言えます。

是非ともご参考にしていただければと思います。

ありがとうございました!

関連記事

  1. Oracle APEX 技術記事

    Oracle APEX 20.2での非サポート機能について

  2. Oracle APEX 技術記事

    Oracle APEXのインストール(Oracle Applicati…

  3. Oracle APEX 技術記事

    Oracle APEX メジャー・バージョンのアップグレード

  4. Oracle APEX 技術記事

    Oracle APEX のブラウザ印刷について

  5. Oracle APEX 技術記事

    Oracle APEXにおけるGUIを用いたテーブルの作成

  6. Oracle APEX 技術記事

    Oracle APEXにおけるGUIを用いたテーブルの作成2(外部キー…