OracleAPEXにおけるタスク管理アプリ開発(サブタスク入力フォームの作成)

Oracle APEX 技術記事

記事概要

こんにちは!平野です。

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

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

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

更新履歴

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

対応バージョン

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

目次

タスクの詳細画面を作成

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

以下が作成手順となります。
– アプリケーション・ビルダーからページ4:タスクの詳細画面を作成
– リージョン内に配置されたアイテムの設定値を変更する(入力タイプ・ラベル等)
– リージョン・ボタンの設定値を変更する(既存ボタン削除・新規ボタン作成・外観やラベルの変更)

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

    画像

  2. アプリケーションの開発画面から、ページの作成を選択し、フォームからフォームを選択して下さい。

    画像

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

    項目 設定値
    ページ名 タスクの詳細
    ページ・モード モーダル・ダイアログ
  4. ナビゲーション・メニューを以下のように選択してください。
    項目 設定値
    ナビゲーションのプリファレンス このページとナビゲーション・メニュー・エントリを関連付けない
  5. ソースを以下のように選択してください。
    項目 設定値
    表/ビューの名前 TASK_LISTS
  6. フォームの作成-列と主キーを以下のように選択してください。
    項目 設定値
    主キー列 ID
  7. 作成を選択し、アプリケーション開発画面に戻り、ページ3:タスクの一覧を選択してください。

    画像

  8. タスク一覧を選択しAttributesの設定を変更していきます。

    プロパティ・エディタ 設定値
    設定 > リンク・ターゲット > ページ 4
    設定 > リンク・ターゲット > 名前 P4_ID
    設定 > リンク・ターゲット > 値 &ID.
    設定 > リンク・ターゲット > キャッシュのクリア 4

    リンク・ターゲットを設定することで、選択した内容の値をページ遷移の際に引き継ぐことができます。
    今回の場合は、ページ3:タスクの一覧で選択したタスクが持つIDをページ4:タスクの詳細に引き継ぎます。
    ページ4:タスクの詳細レンダリング前を選択すると、初期化フォームタスクの詳細というプロセスがあります。
    このプロセスが引き継いだIDを元に、その列に格納されているTASK_TITLE等の値を自動で表示してくれます。

  9. アプリケーションの開発画面に戻り、ページ4:タスクの詳細を選択してください。

    画像

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

    プロパティ・エディタ 設定値
    識別 > タイプ 表示のみ
    ラベル > ラベル ユーザー名
    外観 > テンプレート Optional-Floating
    デフォルト > タイプ 静的値
    デフォルト > 静的値 &APP_USER.
  11. P4_TASK_TITLEアイテムを選択し、設定を変更していきます。
    プロパティ・エディタ 設定値
    識別 > タイプ 表示のみ
    ラベル > ラベル タイトル
  12. P4_TASK_CONTENTアイテムを選択し、設定を変更していきます。
    プロパティ・エディタ 設定値
    識別 > タイプ 表示のみ
    ラベル > ラベル 内容
  13. P4_TASK_DEADLINEアイテムを選択し、設定を変更していきます。
    プロパティ・エディタ 設定値
    識別 > タイプ 表示のみ
    ラベル > ラベル 期日
  14. リージョン・ボタンの設定を変更していきます。CREATEボタン、CANCELボタンを削除してください。

    画像

    ボタン名 プロパティ・エディタ 設定値
    DELETE 識別 > ラベル 完了
    外観 > テンプレート・オプション > Type Success
    外観 > テンプレート・オプション > Style Simple
    SAVE 識別 > ラベル 編集
    外観 > テンプレート・オプション > Style Simple
    動作 > アクション このアプリケーションのページにリダイレクト
    動作 > ターゲット > ページ 4
    動作 > ターゲット > 名前 P2_ID
    動作 > ターゲット > 値 P4_ID
    動作 > ターゲット > キャッシュのクリア 2
  15. 新規ボタンを2つ作成します。画面真ん中下のボタンからtextボタンを選択し、以下のようにドラック&ドロップしてください。

    画像

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

    ボタン名 プロパティ・エディタ 設定値
    新規 識別 > ボタン名 サブタスク一覧
    新規_1 識別 > ボタン名 サブタスクの作成
  17. ページ3:タスク一覧のページからタスクを1つ選択してみましょう。以下のようになっていたら成功です。

    画像

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

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

以下が作成手順となります。
– アプリケーション・ビルダーからページ5:サブタスクの登録ページ6:サブタスクの詳細画面を作成

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

    画像

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

    ※1回目

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

    ※2回目

    項目 設定値
    ページ名 サブタスクの詳細
    ページ・モード モーダル・ダイアログ
  3. ナビゲーション・メニューを以下のように選択してください。

    項目 設定値
    ナビゲーションのプリファレンス このページとナビゲーション・メニュー・エントリを関連付けない
  4. ソースを以下のように選択してください。
    項目 設定値
    表/ビューの名前 TASK_SUBLISTS
  5. フォームの作成-列と主キーを以下のように選択してください。
    項目 設定値
    主キー列 ID
  6. 作成を選択します。以下のように2つのページが作成できていれば成功です。

    画像

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

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

以下が作成手順となります。
– アプリケーション・ビルダーからページ7:サブタスクの一覧画面を作成

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

    画像

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

    項目 設定値
    ページ名 サブタスクの一覧
    ページ・モード モーダル・ダイアログ
    ブレットクラム Breadcrumb
    親エントリ タスク一覧(ページ3)
  3. ナビゲーション・メニューを以下のように選択してください。
    項目 設定値
    ナビゲーションのプリファレンス このページとナビゲーション・メニュー・エントリを関連付けない
  4. ソースを以下のように選択してください。
    項目 設定値
    表/ビューの名前 TASK_SUBLISTS
  5. ページの作成を以下のように選択してください。
    項目 設定値
    機能 拡張フォーマット
    テキスト形式 &TASK_TITLE.
    親エントリ タスク一覧(ページ3)
  6. 作成を選択します。以下のようになっていたら成功です。

    画像

おわりに

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

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

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

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

関連記事

  1. Oracle APEX 技術記事

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

  2. Oracle APEX 開発 概要編

  3. Oracle APEX 技術記事

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

  4. Oracle APEX 技術記事

    Oracle APEX のレポートにボタンを追加する

  5. Oracle APEX 技術記事

    Oracle APEXの開発をAzure ADでゼロトラストな環境に

  6. Oracle APEX 技術記事

    Oracle APEX有効化と確認(コンテナ構成)