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

UI部品　基本編

Forguncyの「コンボボックス型セル」を使用して、複数列のリスト表示が可能なコンボボックスを作成します。
複数列のリストを持つコンボボックスを使うと、例えば科目コードを入力させる際に大科目や中科目の情報も一緒に表示させることができます。その科目コードが何を表しているか調べたり暗記したりする必要がなくなるため、使いやすさの向上に役立つ機能です。

1.ページの準備

コンボボックスを配置するためのページをプロジェクトに作成します。

手順1-1.プロジェクトファイルを開く

サンプルのプロジェクトファイルをダウンロードし、開きます。
プロジェクトには「組織マスタ」「科目マスタ」「予算管理」「実績管理」の4つのテーブルがあらかじめ作成されています。

手順1-2.ページを新しく作成する

プロジェクトに新しくページを作成します。
ナビゲーションウィンドウのページ部分を右クリックし、「新しいページの作成」をクリックします。

新しく「ページ1」という名前のページが生成されるので、それを右クリックします。
「名前の変更」をクリックし、「複数列コンボボックス」という名前にします。

2.コンボボックスを配置

データをリスト表示するコンボボックスをページに配置します。

手順2-1.使用するテーブルを確認する

コンボボックス内のリストで使用するテーブルを確認します。
今回は既にプロジェクト内に準備されている「科目マスタ」を使用します。

手順2-2.複数列のリスト表示が可能なコンボボックスを作成する

コンボボックスを配置したい範囲のセルを選択します。
その状態で[ホーム]リボンの[セル型]ドロップダウンから「コンボボックス」を選択します。
下図のように選択したセルがコンボボックス型に変わり、赤枠の部分のセル型ペインにリスト項目の設定が表示されます。

「リスト項目」の「テーブルからデータを取得」チェックボックスにチェックを入れます。
ここではコンボボックスに科目マスタの項目「科目コード」を表示する設定にします。

しかし、科目コードは7桁の数字で構成されているため、どの科目がどのコードなのか分かりにくくなってしまいます。
そこで、コンボボックスのリストを複数列表示に設定します。
ドロップダウンリストの表示項目をクリックし、大科目や中科目などをコンボボックスのリスト上に表示させる設定を行います。
「ドロップダウンリストの表示項目」ウィンドウで、下図のように「収支区分」「大科目」「中科目」を追加します。

これで複数列コンボックスの作成は完了です。

3.デバッグを実行

プロジェクトをデバッグ実行し、動作を確認します。

手順3-1.デバッグを実行する

リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。

作成したページがブラウザで表示されます。
作成したコンボボックスをクリックすると、科目コード以外に収支区分や大科目、中科目が一緒に表示されているリストが展開します。

4.ForguncyのUI部品についてもっと知る

Forguncyの開発スタートガイドやオンラインヘルプでは、今回使用したコンボボックス型セルについてより詳しくご紹介しています。
こちらもぜひご活用ください。

＞開発スタートガイド – Forguncyで機能的なUIを作成する

＞Forguncyヘルプ – コンボボックスの作成