日日是Oracle APEX: APEX 24.1で追加されたアイテム・タイプ「1つ選択」と「複数選択」について

Oracle APEX 24.1では新しいアイテム・タイプとして、「1つ選択」（英語ではSelect One）および「複数選択」（英語ではSelect Many）が追加されています。この新しいアイテム・タイプについては、APEX Office Hoursの以下の回で、開発者のAlexis Galdamezさんが説明されています。

APEX Office HourのWhat's new in Oracle APEX 24.1 - Part 2
https://youtu.be/i4y0BzPOfrs?si=jB9kA6Wp_BuM2n5Z&t=1587

アイテム・タイプ「1つ選択」はその名前の通り、LOVから単一の値を選択するアイテム・タイプ、「複数選択」は、LOVから複数の値を選択するアイテム・タイプです。

LOVをソースとして、値をひとつまたは複数の値を選択するページ・アイテムとして、「選択リスト」と「ポップアップLOV」があります。新しく追加された「1つ選択」と「複数選択」との違いを確認してみます。

確認には以下のAPEXアプリケーションを使用しました。

https://github.com/ujnak/apexapps/blob/master/exports/select-one-select-many-component.zip

値をひとつ選択するページ・アイテムとして、選択リスト、ポップアップLOV（表示形式はインライン・ポップアップ）、24.1で新しく追加された１つ選択の３つのページ・アイテムを横並びに配置しています。

その下に、値を複数選択するページ・アイテムとして、選択リスト、ポップアップLOV、24.1で新しく追加された複数選択を配置しています。

すべてのページ・アイテムで、同じLOVをソースとして設定しています。

共有コンポーネントのLOVとして、サンプル・データセットのEMP/DEPTに含まれるビューEMP_DEPT_VをソースとしたLOVを、LOV_EMPとして作成しています。

ソースのSQL問合せは以下です。

select
    empno
  , ename
  , job
  , mgr
  , hiredate
  , sal
  , comm
  , deptno
  , dname
  , loc
  , case deptno
    when 10 then 'fa-table-user'
    when 20 then 'fa-database-user'
    when 30 then 'fa-calendar-user'
    when 40 then 'fa-folder-user'
    else 'fa-lock-user'
    end icon 
from emp_dept_v

列のマッピングの戻り値はEMPNO、表示値はENAMEです。その他にグループとしてJOB、アイコンとしてICONを割り当てています。

追加表示列としてDNAME、EMPNO、ENAME、LOC、JOB、ICONを設定しています。

選択リスト（複数の値のタイプがいいえ）と「１つ選択」の比較

アイテム・タイプ選択リストは、ほぼHTMLのSELECT要素としてそのまま生成されています。そのため、選択リストの画面上の表示はデバイスに依存します。

macOS上のChromeブラウザ上では以下のように表示されます。

iOSのSafariでは以下のように表示されます。

Android上のChromeでは以下のように表示されます。

アイテム・タイプ1つ選択は、異なるデバイスでもほぼ同じ見かけになっています。

macOS上のChromeです。

iOS上のSafariです。

Android上のChromeです。

アイテム・タイプが選択リストの出力を確認してみます。

LOVとして選択できるすべての値がoptionの値として出力されていることが確認できます。モバイル・デバイス上での操作の一貫性という意味で、デバイス・ネイティブのユーザー・インターフェースが提供される選択リストは良い面もあります。しかし、選択肢となるLOVの値が多数の場合に向いているコンポーネントとは言えなさそうです。

LOVの値がすべて静的にHTML（のoption要素）として生成されるため、値の操作時にサーバーとの通信が発生しません。LOVの選択肢が少なく、かつ、その選択肢の更新頻度が高く無い場合に向いています。

アイテム・タイプの１つ選択は、a-selectというカスタム要素として実装されています。このコンポーネントはブラウザ上のJavaScriptにより描画されています。

ポップアップLOV（複数の値のタイプがいいえ）と「１つ選択」の比較

アイテム・タイプポップアップLOVの表示形式がモーダル・ダイアログであれば、値の選択画面がダイアログとして開くため、新しいアイテム・タイプ「１つ選択」とは異なるユーザー体験を提供しています。そのため、これは「１つ選択」で置き換えることはできません。

ポップアップLOVの表示形式がインライン・ポップアップの場合は、追加出力の機能を除いて、「１つ選択」の方がより良いユーザー体験を提供しているように思います。追加出力が不要であれば、アイテム・タイプ「１つ選択」が常に優先される選択肢になるでしょう。

ポップアップLOVの設定項目です。

ポップアップLOVの表示例です。値を入力するフィールドと検索フィールドは別に存在します。

１つ選択の設定項目です。

１つ選択の表示例です。値の入力フィールドへの入力でLOVの検索が行われます。また、入力した値をキャンセルするXボタンが追加されました。

選択リストおよびポップアップLOVでは、設定値を空白に戻すためにはNULL表示値として設定した文字列が表示されている領域を選択する必要がありました。NULL表示値として- Select Employee -といった値の選択を促するメッセージが設定されている場合、直感的には分からない操作になってしまいます。

「1つ選択」の検索では、一致タイプとして次を含むと次から始まるを選択できます。大/小文字を区別のオン/オフの切り替えと最小文字数を設定できます。

ポップアップLOVでは入力時に検索をオンにし、最小文字数を設定すると「１つ選択」と同様に、キー入力に従ってLOVの検索が行われます。入力は検索フィールドに行います。

入力時に検索をオフにすると、検索フィールドに値を入力しEnterを押してLOVを検索できます。この動作は「１つ選択」のアイテムには実装されていませんが、最小文字数を超えると検索は実行されるため、無くても不便ではありません。サーバーの負荷の軽減という意味では有効ですが、「１つ選択」ではサーバーから取得した選択肢をブラウザでキャッシュすることにより、サーバーの負荷を軽減できます。