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

Oracle APEX

こんにちは！平野です。

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

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

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

更新履歴

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

対応バージョン

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

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

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

以下がカスタマイズ手順となります。

リージョン内に配置されたアイテムの設定値を変更する(入力タイプ・ラベル・デフォルト値等)
ページの表示形式を変更する(標準→モーダル・ダイアログ)

アイテムの設定値変更

OracleAPEXのアプリケーション・ビルダーから、タスク管理アプリケーションを選択します。
アプリケーションの開発画面から、ページ2:タスクの登録を選択してください。
P2_USERNAMEアイテムを選択し、設定を変更していきます。プロパティ・エディタ設定値識別 > タイプ表示のみラベル > ラベルユーザー名デフォルト > タイプ静的値デフォルト > 静的値 &APP_USER. ※(1)Oracle APEXによってテーブルを元に自動生成されたレポートは、デフォルトでテーブル名とカラム名が利用されています。表示されている文字をプロパティ・エディタにて日本語に置き換えることができます。
※(2)デフォルトという項目は、セッション上に情報がない場合、自動で入力される初期値です。主に初回のデータ登録時に利用されます。デフォルトの静的値に設定している&APP_USER.はOracleが事前定義している置換文字列です。ログイン中のユーザー名に置換されます。
P2_TASK_TITLEアイテムを選択し、設定を変更していきます。プロパティ・エディタ設定値識別 > タイプテキスト・フィールドラベル > ラベルタイトル
P2_TASK_CONTENTアイテムを選択し、設定を変更していきます。プロパティ・エディタ設定値ラベル > ラベルタイトル
P2_TASK_DEADLINEアイテムを選択し、設定を変更していきます。プロパティ・エディタ設定値ラベル > ラベル期日設定 > 表示 both ※表示をbothに変更することで、テキスト・フィールド部分とアイコンのどちらも、クリック時にカレンダー表示による入力となります。
リージョン・ボタンの設定を変更していきます。ボタン名プロパティ・エディタ設定値 CANCEL 識別 > ラベル取消 DELETE 識別 > ラベル削除 SAVE 識別 > ラベル更新 CREATE 識別 > ラベル作成
右上の実行ボタン（再生マーク）を選択し、表示の確認をします。以下のようになっていれば成功です。

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

アプリケーション・ビルダーの画面に戻り、ページ2:タスクの登録の設定を変更します。プロパティ・エディタ設定値外観 > ページモードモーダル・ダイアログ ※モーダル・ダイアログは、操作している画面を背面にして、覆いかぶさるように開く新しい画面のことです。モーダル・ダイアログを閉じるまでは、開いたモーダル・ダイアログ以外の画面操作ができなくなります。今回は入力する項目が少ないため、モーダル・ダイアログを使ってスムーズなタスク入力ができるようにします。
タスクの登録リージョンを選択し、設定を変更します。プロパティ・エディタ設定値外観 > テンプレート Blank with Attributes ※Blank with Attributesは囲いをなくしたリージョンを表示する設定です。モーダル・ダイアログに設定した場合、外観テンプレートが標準(Standard)だと以下のように囲いが2つになってしまうため変更します。
画面真ん中下のリージョンから静的コンテンツを選択し、Dialog footerへドラック＆ドロップしてください。
※外観テンプレートをBlank with Attributesに変更すると、最初にボタンが配置されている領域が実際の画面で表示されなくなります。そのため、ボタンを正しく配置できる新しいリージョンを作成します。
新規の設定を変更していきます。プロパティ・エディタ設定値識別 > タイトルボタン外観 > テンプレート Buttons Container 以下のようにリージョンボタンを移動させてください。
右上の保存を選択してください。

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

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

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

アプリケーションの開発画面から、ページの作成を選択し、レポートからリスト・ビューを選択して下さい。
ページ属性を以下のように設定してください。項目設定値ページ名タスクの一覧ブレットクラム Breadcrumb 親エントリホーム(ページ1)
ナビゲーション・メニューを以下のように選択してください。項目設定値ナビゲーションのプリファレンス新規ナビゲーション・メニュー・エントリを指定
ソースを以下のように選択してください。項目設定値表/ビューの名前 TASK_LISTS
ページの作成を以下のように選択してください。項目設定値機能拡張フォーマットテキスト形式 &TASK_TITLE. 親エントリホーム(ページ1)
作成を選択し、ページ・デザイナからタスクの一覧を選択してください。
Attributesの設定を変更していきます。プロパティ・エディタ設定値補足情報の形式 &TASK_CONTENT. リスト区切り形式期日:&TASK_DEADLINE.
リージョンの設定を変更していきます。プロパティ・エディタ設定値ソース > 並べ替え基準 TASK_DEADLINE ASC 並び替え基準はASCとした場合は昇順、DESCとした場合は降順に並び替えられます。
今回は期日の近いタスクを昇順に並べます。
画面真ん中下のボタンからtextボタンを選択し、タスク一覧のEDITへドラック＆ドロップしてください。
配置したボタンを選択し設定を変更します。プロパティ・エディタ設定値識別 > ボタン名タスクの登録動作 > ターゲット > ページ 2 動作 > クリア/リセット > キャッシュのクリア 2
実行ボタン（再生マーク）を選択し、表示の確認をします。以下のようになっていれば成功です。タスクの登録を選択します。
好きな値を入力し、作成ボタンを押してください。
以下のようになっていれば成功です。タスクの期日を基準に昇順で並んでいるのが確認できます。