記事概要
こんにちは！平野です。
今回の記事は以下の記事の続きとなります。
OracleAPEXにおけるタスク管理アプリ開発（入力フォームのカスタマイズ）
前回の記事では、入力フォームのカスタマイズと一覧画面の作成を行いました。
今回はタスクの詳細画面を作成した後、サブタスクの入力フォームと一覧画面を作成していこうと思います。
次回記事でタスクの更新・削除等の機能やページ遷移を設定し、本アプリケーションの完成とします。
更新履歴
| 日付 | 更新概要 |
|---|---|
| 2021/06/07 | 記事公開 |
対応バージョン
| 製品名 | バージョン |
|---|---|
| Oracle APEX | 5.1 – 20.2.0.00.20 |
| Oracle Database | 12.2 – 19.6 |
目次
タスクの詳細画面を作成
タスクの詳細画面を作成していきます。
以下が作成手順となります。
– アプリケーション・ビルダーからページ4:タスクの詳細画面を作成
– リージョン内に配置されたアイテムの設定値を変更する(入力タイプ・ラベル等)
– リージョン・ボタンの設定値を変更する(既存ボタン削除・新規ボタン作成・外観やラベルの変更)
- OracleAPEXのアプリケーション・ビルダーから、タスク管理アプリケーションを選択します。
-
アプリケーションの開発画面から、ページの作成を選択し、フォームからフォームを選択して下さい。
-
ページ属性を以下のように設定してください。
項目 設定値 ページ名 タスクの詳細 ページ・モード モーダル・ダイアログ - ナビゲーション・メニューを以下のように選択してください。
項目 設定値 ナビゲーションのプリファレンス このページとナビゲーション・メニュー・エントリを関連付けない - ソースを以下のように選択してください。
項目 設定値 表/ビューの名前 TASK_LISTS - フォームの作成-列と主キーを以下のように選択してください。
項目 設定値 主キー列 ID - 作成を選択し、アプリケーション開発画面に戻り、ページ3:タスクの一覧を選択してください。
-
タスク一覧を選択しAttributesの設定を変更していきます。
プロパティ・エディタ 設定値 設定 > リンク・ターゲット > ページ 4 設定 > リンク・ターゲット > 名前 P4_ID 設定 > リンク・ターゲット > 値 &ID. 設定 > リンク・ターゲット > キャッシュのクリア 4 リンク・ターゲットを設定することで、選択した内容の値をページ遷移の際に引き継ぐことができます。
今回の場合は、ページ3:タスクの一覧で選択したタスクが持つIDをページ4:タスクの詳細に引き継ぎます。
ページ4:タスクの詳細のレンダリング前を選択すると、初期化フォームタスクの詳細というプロセスがあります。
このプロセスが引き継いだIDを元に、その列に格納されているTASK_TITLE等の値を自動で表示してくれます。 -
アプリケーションの開発画面に戻り、ページ4:タスクの詳細を選択してください。
-
P4_USERNAMEアイテムを選択し、設定を変更していきます。
プロパティ・エディタ 設定値 識別 > タイプ 表示のみ ラベル > ラベル ユーザー名 外観 > テンプレート Optional-Floating デフォルト > タイプ 静的値 デフォルト > 静的値 &APP_USER. - P4_TASK_TITLEアイテムを選択し、設定を変更していきます。
プロパティ・エディタ 設定値 識別 > タイプ 表示のみ ラベル > ラベル タイトル - P4_TASK_CONTENTアイテムを選択し、設定を変更していきます。
プロパティ・エディタ 設定値 識別 > タイプ 表示のみ ラベル > ラベル 内容 - P4_TASK_DEADLINEアイテムを選択し、設定を変更していきます。
プロパティ・エディタ 設定値 識別 > タイプ 表示のみ ラベル > ラベル 期日 - リージョン・ボタンの設定を変更していきます。CREATEボタン、CANCELボタンを削除してください。
ボタン名 プロパティ・エディタ 設定値 DELETE 識別 > ラベル 完了 外観 > テンプレート・オプション > Type Success 外観 > テンプレート・オプション > Style Simple SAVE 識別 > ラベル 編集 外観 > テンプレート・オプション > Style Simple 動作 > アクション このアプリケーションのページにリダイレクト 動作 > ターゲット > ページ 4 動作 > ターゲット > 名前 P2_ID 動作 > ターゲット > 値 P4_ID 動作 > ターゲット > キャッシュのクリア 2 - 新規ボタンを2つ作成します。画面真ん中下のボタンからtextボタンを選択し、以下のようにドラック＆ドロップしてください。
-
新規ボタンの設定を変更していきます。
ボタン名 プロパティ・エディタ 設定値 新規 識別 > ボタン名 サブタスク一覧 新規_1 識別 > ボタン名 サブタスクの作成 - ページ3:タスク一覧のページからタスクを1つ選択してみましょう。以下のようになっていたら成功です。
サブタスク入力フォームの作成
それでは、本題のサブタスク入力フォームの作成を行います。
以下が作成手順となります。
– アプリケーション・ビルダーからページ5:サブタスクの登録・ページ6:サブタスクの詳細画面を作成
- アプリケーションの開発画面からページの作成を選択し、フォームからフォームを選択して下さい。1～5の手順を2回繰り返し、ページを2つ作成してください。
-
ページ属性を以下のように設定してください。
※1回目
項目 設定値 ページ名 サブタスクの登録 ページ・モード モーダル・ダイアログ ※2回目
項目 設定値 ページ名 サブタスクの詳細 ページ・モード モーダル・ダイアログ -
ナビゲーション・メニューを以下のように選択してください。
項目 設定値 ナビゲーションのプリファレンス このページとナビゲーション・メニュー・エントリを関連付けない - ソースを以下のように選択してください。
項目 設定値 表/ビューの名前 TASK_SUBLISTS - フォームの作成-列と主キーを以下のように選択してください。
項目 設定値 主キー列 ID - 作成を選択します。以下のように2つのページが作成できていれば成功です。
入力した内容を閲覧できるページを作成
次は、入力したサブタスクの内容を閲覧できるページを作成していきます。
以下が作成手順となります。
– アプリケーション・ビルダーからページ7:サブタスクの一覧画面を作成
- アプリケーションの開発画面から、ページの作成を選択し、レポートからリスト・ビューを選択して下さい。
-
ページ属性を以下のように設定してください。
項目 設定値 ページ名 サブタスクの一覧 ページ・モード モーダル・ダイアログ ブレットクラム Breadcrumb 親エントリ タスク一覧（ページ3） - ナビゲーション・メニューを以下のように選択してください。
項目 設定値 ナビゲーションのプリファレンス このページとナビゲーション・メニュー・エントリを関連付けない - ソースを以下のように選択してください。
項目 設定値 表/ビューの名前 TASK_SUBLISTS - ページの作成を以下のように選択してください。
項目 設定値 機能 拡張フォーマット テキスト形式 &TASK_TITLE. 親エントリ タスク一覧（ページ3） - 作成を選択します。以下のようになっていたら成功です。
おわりに
いかがだったでしょうか。
今回はタスクの詳細画面と、サブタスクを管理するために必要なページを作成しました。
サブタスクのページをカスタマイズすることで、簡易的なタスク管理アプリケーションが完成となります。
是非ともご参考にしていただければと思います。
ありがとうございました！
