Forguncy 10 オンラインヘルプ
アプリの開発 / 画面の設計 / セル / セル型 / コンボボックス
このトピックで
    コンボボックス
    このトピックで

    セル型でコンボボックスを作成します。

    1. セルを選択して[ホーム]リボンタブ -[セル型]のドロップダウンリストから「コンボボックス」を選択します。

      選択したセルがコンボボックス型になります。コンボボックスに設定した内容が表示できるようにセルを結合したりセル幅を調整したりしてください。

    2. 右ペインでコンボボックスの設定をします。

      右ペイン下部の[セル型]タブをクリックして、コンボボックスの設定を行います。

      プロパティ名

      説明

      コマンド

      値が変更された時に実行されるコマンドを設定します。コマンド(通常)を参照してください。

      コマンド内では、入力可能なセル型のコンテキスト変数が使用できます。詳細については条件分岐のパラメーター>コンテキストを参照してください。

      データの入力規則 詳細については、データ入力規則(セル)を参照してください。

      セルのアクセス制御

      ロールごとにそのセル型の表示/非表示、および有効/無効を設定します。詳細についてはセルのアクセス制御を参照してください。この項目はリストビュー上のセル型では設定できません。

      リスト項目

      コンボボックスのリスト項目を直接入力するか、もしくはテーブルのデータを指定して設定します。

      直接入力してリスト項目を設定する

      • [+][-]で項目の増減ができます。

      • [詳細設定]をクリックするとコンボボックスに表示する値(表示する値)と数式やデータ連結、ユーザー入力で使用される値(値)、リスト項目の並び順を指定できます。

        参考: ここで追加したリスト項目の値はデータ型を持っていません。そのためリスト項目の値を参照した処理(クエリーや条件分岐など)を実装する場合、値は自動的に型変換される場合があり注意が必要です。たとえば次のような値は数値や日付に変換可能な値とみなされるため、参照先で型変換された値が使用されます。

        リスト項目の値 型変換された値
        001 1
        2023/1/1 44927 (※日付のシリアル値)

      テーブルのデータをリスト項目に設定する

      [テーブルからデータを取得]をチェックすると、値と表示値をテーブルのフィールドから取得できます。テーブルのデータが変更されると、自動的にリスト項目にも反映されます。

      • 未選択項目の追加

        リスト項目を「<未選択>」のような文字列を表示して、該当する選択項目がない場合の選択項目を追加できます。未選択項目の表示テキストを指定することができます

      • ドロップダウンリストの表示項目

        コンボボックスのドロップダウンリストの項目を複数列で表示できます。ドロップダウンリストの表示項目を追加すると、表示項目のフィールド、ヘッダー名、横位置、表示形式、列幅を設定できます。関連付けしたテーブルの項目を指定することもできます(本ページ内の「複数列のコンボボックスを作成する」参照)。

        参考:

        ドロップダウンリストに表示する項目の幅を「自動調整」にした場合、項目の値の長さに応じて列幅は自動調整されます。しかし、ドロップダウンリストが1,000行を超える場合にはパフォーマンス上の理由により列幅の自動調整は行われず、すべての列幅は100ピクセルに設定されます。
        本事象を回避するには、ロードオンデマンド機能を使用し初回に読み込む行数が1,000を超えないようにします。

        ドロップダウンリストの項目の列幅を固定の値に設定した場合は1,000行を超えても設定した列幅が有効になります。

      • クエリー条件

        クエリー条件を設定しリスト項目を絞り込めます。

        クエリー条件の設定方法は、[クエリー]コマンドの「クエリーの条件設定」を参照してください。

        注意: クエリー条件によるリスト項目の絞り込みは、アプリケーション実行時、ユーザーがコンボボックスのドロップダウンボタンをクリックしたタイミングに行われることに注意してください。ページ読み込み時にはクエリー条件の処理は実行されていません。

      • 並べ替え条件

        リスト項目の並べ替え条件を設定できます。並べ替えの設定方法は並べ替えを参照してください。

      • 高度な設定

        • キャッシュを有効にする

          更新の少ないリストデータを表示する場合、キャッシュの利用により表示速を向上できる場合があります。

          キャッシュを有効にした場合、リストのクエリー結果はキャッシュの有効期限がまでサーバーのメモリ上に保存されます。ページを表示した際、このリストデータをキャッシュから直接取得するため、データペースの負荷を軽減し表示速度のパワォーマンスを向上させることができます。キャッシュを有効にした場合、キャッシュの有効期限を設定します。有効期限の既定値は20秒です。

          • キャッシュの利用によりパフォーマンス向上が見込めるケース
            連結テーブルのデータの変更頻度がほとんどない場合、または更新処理があっても更新処理の速度増加を許容できる場合

          • キャッシュの利用がパフォーマンスを下げる可能性のあるケース
            ログインユーザーの権限や特定条件によってクエリーの結果が変更される場合

        • ドロップダウンの状態を保存する

          ドロップダウンの列幅や行の高さの設定をユーザーごとに保存します。ユーザーがWEBブラウザーで列幅や行の高さを操作した場合、ページの再表示時にリストビューの状態が復元されます。この復元はブラウザーを変えても有効です。この情報を保存するために、内部管理用の状態保存テーブルが自動作成されます。

      リスト項目には[値フィールド]と[表示フィールド]の組み合わせが一意であるデータのみが表示されます。たとえば、[表示フィールド]が同じ「りんご」であっても、[値フィールド]がそれぞれ「1」「2」と異なるレコードが存在する場合、ドロップダウンリストには2つの「りんご」が表示されます。

      注意:並べ替えの条件を設定した場合、[値フィールド]と[表示フィールド] に加えて並べ替えの条件に追加したフィールドも含めて一意かどうか判定されます。

      また、下図のようにテーブルの関連付けを行った関連フィールドを表示させることもできます。この場合、同一データベースかつ同一インスタンスのテーブル同士で関連付けされている必要があります。たとえば、内部データベースとSQL Serverで関連付けを行っている場合や、SQL Server同士でもデータベースのインスタンスが同一でない場合は、関連フィールドは使用できません。

      既定値

      数式やデータ連結、ユーザー入力で使用される値の既定値を指定します。数式を使用することもできます。詳細は数式の使用を参照してください。

      絞り込み入力

      ユーザーがコンボボックスに入力した値に一致する項目のみが表示される機能です。先頭一致か部分一致のどちらかを指定します。また、ひらがなとカタカナ、および英字の大文字と小文字を区別するオプションも用意されています。

      注意: [複数選択を許可する]または[ロードオンデマンド]が有効である場合、絞り込み入力の機能は動作しません。

      ドロップダウンボタンの表示設定

      ドロップダウンボタン(リスト右横の「▼」)の表示を切り替えます。

       

      常に表示/非表示/フォーカス取得時に表示

      リストビューの行テンプレートに設定されたコンボボックス型セルの場合、本設定が「常に表示」であってもアプリケーションの実行時にドロップダウンボタンが表示されるのは、セルがダブルクリック操作などにより編集状態となったときのみです。これは、リスビューにおいてコンボボックス型セルが表示されるのは編集状態のときだけであるという動作に基づくForguncyの仕様です。

      モバイルページではこの項目は表示されず、設定できません。

      透かし文字

      未入力、または未選択の場合に表示する透かし文字を指定します。モバイルページではこの項目は表示されず、設定できません。

      ドロップダウンのサイズ

      コンボボックスを開いた際に一覧表示されるドロップダウンの横幅のサイズを設定します。既定値は空白となっており、コンボボックスのサイズと同様です。単位はpxで指定します。デフォルト値にのみ影響し、手動でサイズを調整できます。

      この設定は「ドロップダウンリストの表示項目」が設定されていた場合、設定できず、非表示になります。

      ドロップダウンアイテムの表示数

      既定値は「5」です。

      コンボボックスを開いた際に一覧表示されるドロップダウンの高さのサイズを設定します。サイズはアイテム数です。「5」の場合、5行表示されるサイズに高さが調整されます。デフォルト値にのみ影響し、手動でサイズを調整できます。

      読み取り専用

      読み取りのみで、値の入力や選択の変更はできません。

      選択による入力のみ可

      チェックするとキーボード等による値の入力はできず、ユーザーの操作はコンボボックスからの選択だけに限られます。モバイルページではこの項目は表示されず、設定できません(選択による入力にのみ対応)。

      選択項目に存在する値のみ許可する

      「選択による入力のみ可」のチェックを外した状態でこの項目をチェックすると、コンボボックスのリスト項目にない文字列を入力したときに文字列が入力されず、コンボボックス内は空になります。

      この項目をチェックした場合に入力可能な文字列は、テーブルからデータを取得する際は「表示フィールド」に指定したフィールドの文字列、テーブルからデータを取得しない際は「表示する値」に設定した文字列です。

      モバイルページではこの項目は表示されず、設定できません。

      フォーカス取得時に値を全選択状態にする

      フォーカス取得時に自動的に値が全選択された状態となります。この項目はリストビュー上のセル型では設定できません。

      複数選択を許可する チェックすると、コンボボックス内の複数の項目を同時に選択することができます。値は「,」で区切られます。

      ロードオンデマンド

      テーブルからデータを取得する設定を行っている場合に、コンボボックスに大量のデータ項目が一度に読み込まれないようにします。本設定を有効にした場合、500データが最初に読み込まれコンボボックスの項目として生成されます。スクロールして500データに達すると、次の500データ分をサーバーから読み込みます。データの単位は行ではなくデータの個数であることに注意してください。コンボボックスのドロップダウンリストが2列の場合には250行ずつ生成されます。

    3. 必要に応じてデータ連結をします。

      データ連結の方法については、データの連結を参照してください。

    参考:

    [テーブルからデータを取得]を選択しているコンボボックス型セルは、通常のセルに配置した場合とリストビュー上に配置した場合とで、内部的なデータの読み込み方法が異なります。

    コンボボックスにおいてデータの読み込みが発生するのは以下の場合です。このうち、1番の読み込み方法が異なります。

    1. コンボボックス型セルに値が設定されている場合(その値を基に表示テキストを取得する)

    2. ユーザーがコンボボックス型セルのドロップダウンボタンをクリックして選択項目の一覧を表示する場合

    3. クエリー条件に動的な条件が設定されており、それにより選択項目一覧が更新される場合

    通常のセルに配置した場合

    コンボボックスに値が設定されている場合、その値の表示テキストを取得するために該当レコードのみを読み込みます。

    リストビュー上に配置した場合

    ページロード時にコンボボックスに設定されているテーブルの全データを読み込みます。これは、総合的なパフォーマンスを考慮した動作です。通常のセルに配置したコンボボックス型セル同様に、その値の表示テキストを取得するために該当レコードのみを読み込む仕様とした場合、リストビューのデータが1,000件あれば、1,000回のデータベース問い合わせリクエストが発生します。このようなパフォーマンス上の問題を回避するため、リストビュー上のコンボボックス型セルでは、ページロード時に全データを取得する仕様となっています。

    2つのコンボボックスを使って選択肢を絞り込む

    コンボボックスAで値を選択すると、その値に関連する選択肢だけをコンボボックスBに表示する、ということがクエリーを使うとできます。

    1. テーブルを作成します。

    2. コンボボックスを2つ作成します。

    3. 1つ目のコンボボックスには国名を表示するようにセル型を設定します。

       
    4. 2つ目のコンボボックスには都市名が表示されるように設定して[クエリー条件]をクリックします。

       
    5. クエリー条件を以下のように設定します。

      [国]フィールドの値を1つ目のコンボボックスの値で絞り込むように設定します。

      1番目のコンボボックスで国名を選択すると、その値によって都市名が絞り込まれて2番目のコンボボックスに表示されます。

    複数列のコンボボックスを作成する

    コンボボックスのドロップダウンリストに複数の項目を表示させることができます。

    複数列のコンボボックスは、モバイルページでは設定できません。

    1. マスター詳細関係の2つのテーブルを作成します。

    2. ページを作成してコンボボックスを作成します。

    3. コンボボックスのリスト項目で、「値フィールド」に詳細テーブルの「ID」を設定し、「表示フィールド」に「商品」を設定します。

    4. 「ドロップダウンリストの表示項目」をクリックして以下のように設定します。

      詳細テーブルのフィールドは「ヘッダー名」で変更できます。

    5. 「価格」の表示形式を設定します。   

    6. ドロップダウンリストに複数の項目の表示されるコンボボックスが作成されます。

    コンボボックスに表示する項目を、レコードの内容で制御する

    リスト項目をテーブルから取得しているとき、クエリー条件を利用して表示する項目を制御できます。

    1. リスト項目用のテーブルを作成します。

      次の商品テーブルは、リスト項目の表示条件となる日付と削除フラグのフィールドを持っています。

    2. コンボボックス型セルを配置し、クエリー条件を設定します。

      削除フラグが1でないレコードを、開始日付から終了日付までの期間に表示します。

      リスト項目がフィルタリングされ、次のように表示されます。

    参考:

    すでに登録されているレコードに、クエリー条件外の項目が設定されている場合、Forguncyはテーブルの全データから表示フィールドを取得しようとします。

    例えば上記の例で、過去に登録されたデータを表示する場合、現在の条件ではリスト項目にないデータも表示されます。

    また、複数のリスト項目を1つのテーブルにまとめている場合、テーブルのビュー機能を利用して項目を分けることを推奨します。

    1. リスト項目用のテーブルを作成します。

      次のコンボボックス汎用テーブルは、タイプごとに複数のコンボボックス用のリスト項目を登録しています。

    2. リスト項目ごとにビューを作成します。

      ビューの作成手順については、ビューの作成を参照してください。

    3. コンボボックス型セルを配置し、クエリー条件を設定します。

      作成したビューをリスト項目のデータソースに指定します。削除フラグが1でないレコードを、開始日付から終了日付までの期間に表示します。

      コンボボックスの項目は次のように表示されます。

    参考:

    上記の例で、ビューを作成せずにタイプの絞り込みをクエリー条件で行うのはアンチパターンとなります。

    例えば、「セルプロパティの設定」コマンドを利用して、リスト項目にない値を設定したとき、Forguncyは元のテーブルから該当するレコードを参照しようとします。

    クエリー条件で絞り込まれたリスト項目には連番4のデータは存在しませんが、元テーブルには連番4のデータが存在するため、上のような挙動となります。ビューを利用することで、このような問題を防ぐことが出来ます。

    コマンドで利用可能な操作

    特定の条件を満たした場合に右ペインの「セル型」タブに「コマンドで利用可能な操作」プロパティが追加されます。 

    以下の操作名が記載されているボックスをページ上のセルに向かってドラッグ&ドロップすることで[セル型の操作]コマンドが設定されたボタンが生成されます。ドラッグ&ドロップの先がボタン型セルだった場合、ボタン型セル内で設定されているコマンドの一番最後にセル型の操作コマンドが追加されます。

    設定方法の詳細についてはセル型の操作を参照してください。

    操作 条件 詳細
    表示テキストの取得 なし コマンドを実行すると、対象のコンボボックスの表示テキストを対象のセルに表示させます。
    テーブルデータの再読み込み 対象のセル型のリスト項目に「テーブルからデータを取得」が設定されていること。 コマンドを実行するとコンボボックスのデータを再読み込みさせます。
    リスト項目の設定(JSON文字列設定)

    対象のセル型のリスト項目に「テーブルからデータを取得」が設定されていないこと。

    コマンドを実行すると、コンボボックスのリスト項目をJSON文字列の内容に変更します。

    • JSON文字列の例:["バナナ", "リンゴ", "ナシ"]
      ※値と表示テキストは同一になります。
      ※通常、JSONデータはHTTPリクエストまたはサーバーサイドコマンドから取得しますが、上記の文字を手動で作成したものでも利用できます。
    リスト項目の設定(JSONオブジェクト配列) 対象のセル型のリスト項目に「テーブルからデータを取得」が設定されていないこと。 コマンドを実行すると、コンボボックスのリスト項目をJSONオブジェクト配列の内容に変更します。
    • JSONオブジェクト配列の例:
      [
          {"value": 1, "label": "バナナ"},
          {"value": 2, "label": "リンゴ"},
          {"value": 3, "label": "ナシ"}
      ]
      ※通常、JSONデータはHTTPリクエストまたはサーバーサイドコマンドから取得しますが、上記の文字を手動で作成したものでも利用できます。