こんにちは!平野です。

今回の記事は以下の記事の続きとなります。
OracleAPEXにおけるタスク管理アプリ開発(入力フォームのカスタマイズ)

前回の記事では、入力フォームのカスタマイズと一覧画面の作成を行いました。

今回はタスクの詳細画面を作成した後、サブタスクの入力フォームと一覧画面を作成していこうと思います。
次回記事でタスクの更新・削除等の機能やページ遷移を設定し、本アプリケーションの完成とします。

更新履歴

日付更新概要
2021/06/07記事公開

対応バージョン

製品名バージョン
Oracle APEX5.1 – 20.2.0.00.20
Oracle Database12.2 – 19.6

タスクの詳細画面を作成

タスクの詳細画面を作成していきます。

手順概要

以下が作成手順概要となります。

  1. アプリケーション・ビルダーからページ5:サブタスクの登録ページ6:サブタスクの詳細画面を作成
  2. アプリケーション・ビルダーからページ4:タスクの詳細画面を作成
  3. リージョン内に配置されたアイテムの設定値を変更する(入力タイプ・ラベル等)
  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識別 > ラベル完了
外観 > テンプレート・オプション > TypeSuccess
外観 > テンプレート・オプション > StyleSimple
SAVE識別 > ラベル編集
外観 > テンプレート・オプション > StyleSimple
動作 > アクションこのアプリケーションのページにリダイレクト
動作 > ターゲット > ページ4
動作 > ターゲット > 名前P2_ID
動作 > ターゲット > 値P4_ID
動作 > ターゲット > キャッシュのクリア2

新規ボタンを2つ作成します。画面真ん中下のボタンからtextボタンを選択し、以下のようにドラック&ドロップしてください。

画像

新規ボタンの設定を変更していきます。

ボタン名プロパティ・エディタ設定値
新規識別 > ボタン名サブタスク一覧
新規_1識別 > ボタン名サブタスクの作成

ページ3:タスク一覧のページからタスクを1つ選択してみましょう。以下のようになっていたら成功です。

画像

サブタスク入力フォームの作成

それでは、本題のサブタスク入力フォームの作成を行います。

手順概要

以下が作成手順概要となります。

  1. アプリケーション・ビルダーからページ5:サブタスクの登録ページ6:サブタスクの詳細画面を作成

手順詳細

アプリケーションの開発画面からページの作成を選択し、フォームからフォームを選択して下さい。1~5の手順を2回繰り返し、ページを2つ作成してください。

画像

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

※1回目

項目設定値
ページ名サブタスクの登録
ページ・モードモーダル・ダイアログ

※2回目

項目設定値
ページ名サブタスクの詳細
ページ・モードモーダル・ダイアログ

ナビゲーション・メニューを以下のように選択してください。

項目設定値
ナビゲーションのプリファレンスこのページとナビゲーション・メニュー・エントリを関連付けない

ソースを以下のように選択してください。

項目設定値
表/ビューの名前TASK_SUBLISTS

フォームの作成-列と主キーを以下のように選択してください。

項目設定値
主キー列ID

作成を選択します。以下のように2つのページが作成できていれば成功です。

画像

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

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

手順概要

以下が作成手順概要となります。

  1. アプリケーション・ビルダーからページ7:サブタスクの一覧画面を作成

手順詳細

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

画像

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

項目設定値
ページ名サブタスクの一覧
ページ・モードモーダル・ダイアログ
ブレットクラムBreadcrumb
親エントリタスク一覧(ページ3)

ナビゲーション・メニューを以下のように選択してください。

項目設定値
ナビゲーションのプリファレンスこのページとナビゲーション・メニュー・エントリを関連付けない

ソースを以下のように選択してください。

項目設定値
表/ビューの名前TASK_SUBLISTS

ページの作成を以下のように選択してください。

項目設定値
機能拡張フォーマット
テキスト形式&TASK_TITLE.
親エントリタスク一覧(ページ3)

作成を選択します。以下のようになっていたら成功です。

画像

おわりに

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

今回はタスクの詳細画面と、サブタスクを管理するために必要なページを作成しました。
サブタスクのページをカスタマイズすることで、簡易的なタスク管理アプリケーションが完成となります。

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

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