- 手動入力された値は、手動入力アイテムとして設定されたページ・アイテムに入力されます。コンボボックスのページ・アイテムには入力されません。
- ポップアップして表示される選択画面に適用するHTML式（テンプレート・ディレクティブ）を指定できます。ポップアップLOVでは、初期化JavaScriptコードでrecordTemplateとして設定する必要があります。
Part 1: What's new in Oracle APEX 23.2 - Preview
詳細を開き、管理ページとして設定にチェックを入れます。
コンボボックスでは、LOVに含まれていない値でもページ・アイテムに設定できます。反対に、LOVに含まれている値だけ入力できるように制限することはできません。そのような要件では、従来からあるポップアップLOVを使用します。
実際にコンボボックスを使ったAPEXアプリケーションを作成し、使い方を確認してみます。
好みの食べ物を複数選択する機能をコンボボックスを使って実装します。
クイックSQLの以下のモデルより、表COMBO_FOODSとCOMBO_FAVORITESを作成します。表COMBO_FOODSはコンボボックスのLOVのソース、つまり食べ物のマスター表になります。表COMBO_FAVORITESはそれぞれの人の好みの食べ物を保存します。複数の食べ物を、好みの食べ物として選ぶことができます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # prefix: combo | |
| foods | |
| name vc40 /nn | |
| country vc80 | |
| description vc400 | |
| favorites | |
| person_name vc80 /nn | |
| food_id /fk foods |
Oracle APEX 23.2よりクイックSQLがリファクタリングされ、JavaScriptで書き換えられました。モデルを記述するとすぐにSQLが生成されます。
ダイアグラムも表示できます。
レビューおよび実行をクリックします。
生成されたDDLがSQLスクリプトのスクリプト・エディタで開かれます。
スクリプト名にSample Comboboxと入力し、実行をクリックします。
ここからの作業の流れは、APEX 23.2以前と変わりません。
即時実行します。
表COMBO_FOODSとCOMBO_FAVORITESが作成されます。
続けてアプリケーションの作成をクリックします。
アプリケーションの作成をクリックします。
アプリケーション作成ウィザードが起動します。表COMBO_FOODSとCOMBO_FAVORITESのフォーム付き対話モード・レポートのページが追加されています。
表COMBO_FOODSのフォーム付き対話モード・レポートの編集をクリックし、編集ダイアログを開きます。
変更の保存をクリックします。
表COMBO_FAVORITESのフォーム付き対話モード・レポートについても同じ操作を行い、管理ページに設定します。
以上でLOVの準備は完了です。
管理ページに設定すると、アイコンがスパナに代わります。表COMBO_FOODSと表COMBO_FAVORITESのフォーム付き対話モード・レポートが管理ページになっていることを確認し、アプリケーションの作成を実行します。
作成されるアプリケーションの名前はSample Comboboxです。
アプリケーションが作成されます。
アプリケーションを実行し、食べ物のマスター・データを投入します。
ナビゲーション・メニューより管理を開き、アプリケーション管理のFoodsを実行します。
作成をクリックし、適当に食べ物を登録します。
以下の画面では、お寿司、たこ焼き、まんとう、ハンバーガーをFoods（表COMBO_FOODS）に登録しています。
ここで登録した食べ物を、共有コンポーネントのLOVとして扱えるようにします。
共有コンポーネントのLOVを開くとCOMBO_FOODS.NAMEが作成されています。アプリケーション作成ウィザードは、表COMBO_FAVORITESに定義されている参照制約よりLOVを自動的に作成しています。
LOVのCOMBO_FOODS.NAMEを開き、追加表示列の列の選択をクリックします。
列COUNTRYとDESCRIPTIONも表示列に追加し、更新します。
列NAME、COUNTRYおよびDESCRIPTIONの表示可能と検索可能がYesであることを確認します。
変更の適用をクリックします。
アプリケーションにサインインしたユーザーが、好みの食べ物を登録するページを作成します。好みの食べ物を選ぶために、コンボボックスを使います。
ページの作成をクリックします。
空白のページを選択します。
ページ番号は6、名前はComboboxとします。
ナビゲーションのブレッドクラムの使用、ナビゲーションの使用はともにオンです。
ページの作成をクリックします。
設定の複数の値をオンにします。属性については手動入力アイテムとHTML式を除くと、ポップアップLOVと概ね同等です。
LOVのタイプとして共有コンポーネント、LOVとしてCOMBO_FOODS.NAMEを指定します。コンボボックスでは追加値は必ず手動入力アイテムに設定され、コンボボックスのアイテムに含まれることはありません。そのため、追加値の表示はオンでもオフでも挙動は同じですが、コンボボックスのアイテムに追加値が現れないことを確実にするため、オフにしておきます。
識別の名前はP6_MANUAL_VALUES、タイプはテキスト・フィールドとします。ラベルはManual Valuesとしています。
通常はこの値を利用者に見せる必要はないため、タイプに非表示を選び、保護された値をオフにします。
今回は手動入力として認識された値を画面に表示させるため、タイプにテキスト・フィールドを選んでいます。
作成したページ・アイテムP6_MANUAL_VALUESを、コンボボックスのページ・アイテムP6_FAVORITESの手動入力アイテムとして設定します。
コンボボックスの値を確認するために、ページ・アイテムに設定されている実際の値を表示させるページ・アイテムを作成します。
識別の名前はP6_ACTUAL_VALUES、タイプは表示のみ、ラベルはActual Valuesとします。設定のページの送信時に送信はオフにします。
ページ・アイテムP6_FAVORITESの値が変更されたときに、確定した値をP6_ACTUAL_VALUESに設定するため、動的アクションを作成します。
識別の名前はChange、タイミングはページ・アイテムのデフォルトである変更、選択タイプはアイテム、アイテムはP6_FAVORITESです。
TRUEアクションは値の設定、設定のタイプの設定としてJavaScript式を選び、JavaScript 式として$v(this.triggeringElement)を記述します。変更イベントの禁止をオンにします。
影響を受ける要素の選択タイプはアイテム、アイテムとしてP6_ACTUAL_VALUESを指定します。
この時点でアプリケーションを実行し、動作を確認してみます。
Favoritesとしてお寿司、たこ焼き、天ぷらを設定しました。お寿司とたこ焼きは表COMBO_FOODSに登録されていますが、天ぷらは未登録です。そのため、天ぷらはManual Values（手動入力アイテム）の値となっています。
ボタン名はSUBMIT、ラベルは送信、外観のホットをオンにします。テンプレート・オプションのWidthはStretchとします。
動作のアクションはデフォルトのページの送信です。
送信ボタンを押した時に実行されるプロセスにて、コンボボックスP6_FAVORITESの値を表COMBO_FAVORITESに登録します。
識別の名前はFavoritesの登録とします。タイプはコードを実行です。ソースのPL/SQLコードとして以下を記述します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| declare | |
| l_id combo_foods.id%type; | |
| begin | |
| /* 今まで登録されている好みの食べ物を削除する。 */ | |
| delete from combo_favorites where person_name = :APP_USER; | |
| /* 表COMBO_FOODSに登録済みの食べ物のうちで選択された好みを保存する。 */ | |
| insert into combo_favorites(person_name, food_id) | |
| select :APP_USER, column_value from apex_string.split(:P6_FAVORITES,':'); | |
| /* 手動入力の食べ物は表COMBO_FOODSに登録したのち、COMBO_FAVORITESに登録する。 */ | |
| for c in ( | |
| select column_value from apex_string.split(:P6_MANUAL_VALUES,':') | |
| ) | |
| loop | |
| /* 表COMBO_FOODSに登録する。 */ | |
| insert into combo_foods(name) values(c.column_value) returning id into l_id; | |
| /* 表COMBO_FAVORITESに登録する。 */ | |
| insert into combo_favorites(person_name, food_id) values(:APP_USER, l_id); | |
| end loop; | |
| end; |
サーバー側の条件のボタン押下時にSUBMITを指定します。
ページ・アイテムP6_FAVORITESのソースを、セッション・ステートからデータベースに保存された値に変更します。
ページ・アイテムP6_FAVORITESを選択します。
ソースのタイプとしてSQL問合せ(コロン区切りの値を返す)を選択し、SQL問合せとして以下を記述します。
select listagg(food_id,':') within group (order by food_id asc) from combo_favorites where person_name = :APP_USER group by person_name使用はセッション・ステートの値がNULLの場合のみを選択し、セッション・ステートのストレージはリクエストごと(メモリーのみ)とします。
ページ・アイテムP6_MANUAL_VALUESとP6_ACTUAL_VALUESも同様に、ソースの使用はセッション・ステートの値がNULLの場合のみを選択し、セッション・ステートのストレージはリクエストごと(メモリーのみ)とします。
以上でコンボボックスのサンプルが実装できました。
先ほどの続きで、Favoritesにお寿司、たこ焼き、そして天ぷらを入力します。天ぷらは表COMBO_FOODSに登録されていないため、Manual Valuesに設定されます。
送信をクリックすると天ぷらが表COMBO_FOODSに登録された上で、表COMBO_FAVORITESに登録されます。結果としてFavoritesにお寿司、たこ焼き、天ぷらの３つの値が表示されます。
管理のFoodsを開くと確認できますが、表COMBO_FOODSに登録されているため、天ぷらは手動入力された値とは見做されません。
今まであるポップアップLOVと比較してみます。新しいコンボボックスはポップアップLOVを置き換えるものではありません。
Comboboxのページをコピーします。
ページの作成をクリックします。
コピーとしてのページの作成をクリックします。
次のコピーとしてのページを作成としてこのアプリケーションのページを選択します。
次へ進みます。
コピー元ページは6. Comboboxです。新規ページ番号として7、新規ページ名はPopup LOVとします。ブレッドクラムは親エントリなし、エントリ名はPopup LOVとして作成します。
次へ進みます。
ナビゲーションのプリファレンスとして新規ナビゲーション・メニュー・エントリの作成、新規ナビゲーション・メニュー・エントリはPopup LOVとします。親ナビゲーション・メニュー・エントリーは選択しません（- 親が選択されていません -を選びます）。
次へ進みます。
ページをコピーするにあたって変更が必要なラベルはありません。
コピーを実行します。
ページがコピーされます。
コピーされたページのページ・アイテムP7_FAVORITESを選択し、タイプをコンボボックスからポップアップLOVに変更します。
設定の複数の値をオンにし、手動入力をオフにします。LOVの追加値の設定もオフにします。
手動入力を許可しない場合はポップアップLOVを使用します。コンボボックスは、手動入力を禁止することはできません。
ポップアップLOVに変更した動作を確認してみます。手動入力を除くと、コンボボックスと変わらない動作になります。
このページをページ番号8にコピーし、ページ・アイテムP8_FAVORITESの設定の手動入力をオン、追加値の表示をオンにしてみます。
ポップアップLOVの場合、手動入力をオンにすると、入力する値は表示値ではなく戻り値の入力が求められます。
新しいコンボボックスのHTML式を確認してみます。ページ番号６のComboboxのページを、ページ番号９にFancy Comboboxとしてコピーします。
ページ・アイテムP9_FAVORITESを選択し、設定のHTML式に以下を記述します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div> | |
| <b>&NAME.</b> | |
| {if COUNTRY/}: &COUNTRY.{endif/} | |
| {if DESCRIPTION/}: &DESCRIPTION.{endif/} | |
| </div> |
食べ物の名前を太字にし、国名や説明は設定されているときだけ表示するようにしています。
コンボボックスの選択リストは、以下のように表示されます。
コンボボックスの設定の複数選択をオンにすると、選択リストにチェックボックスが現れ、選択リスト上で複数の選択を行うことができるようになります。
選択リストは以下のように表示されます。
Oracle APEX 23.2の新しいコンボボックスの紹介は以上になります。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/sample-combobox.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
