こんにちは！平野です。
今回の記事は以下の記事の続きとなります。
OracleAPEXにおけるタスク管理アプリ開発（入力フォームのカスタマイズ）
前回の記事では、入力フォームのカスタマイズと一覧画面の作成を行いました。
今回はタスクの詳細画面を作成した後、サブタスクの入力フォームと一覧画面を作成していこうと思います。
次回記事でタスクの更新・削除等の機能やページ遷移を設定し、本アプリケーションの完成とします。
更新履歴
| 日付 | 更新概要 |
|---|---|
| 2021/06/07 | 記事公開 |
対応バージョン
| 製品名 | バージョン |
|---|---|
| Oracle APEX | 5.1 – 20.2.0.00.20 |
| Oracle Database | 12.2 – 19.6 |
タスクの詳細画面を作成
タスクの詳細画面を作成していきます。
手順概要
以下が作成手順概要となります。
- アプリケーション・ビルダーからページ5:サブタスクの登録・ページ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） |
作成を選択します。以下のようになっていたら成功です。
おわりに
いかがだったでしょうか。
今回はタスクの詳細画面と、サブタスクを管理するために必要なページを作成しました。
サブタスクのページをカスタマイズすることで、簡易的なタスク管理アプリケーションが完成となります。
是非ともご参考にしていただければと思います。
ありがとうございました！
