部署や科目を指定して表示データを絞り込む

オペレーション　基本編

ForguncyではExcelやCSVからデータを取り込み、テーブルを自動作成して一覧表を作成することができます。

＞関連記事：ExcelからCSVから予実のデータをインポートする

一覧表形式はデータの分析に便利ですが、データ数が増えていくと徐々に見づらくなってしまいます。
そこで今回は、リストビューのデータの絞り込みを行う方法を解説します。
コンボボックスとクエリーの機能を使用しますが、Forguncyのクエリーはノーコードで設定が可能です。

1.プロジェクトを確認する

サンプルプロジェクトを開き、アプリケーションを確認します。

手順1-1.ページの確認

プロジェクトには以下の3つのページが用意されています。

絞り込みにはコンボボックスを使用します。
データの絞り込み表示は、
予算表画面：表示ボタンを押下したタイミング
実績表画面：コンボボックスの中身を選択したタイミング（ボタン押下不要）
で行われるようにします。
そのため、表示ボタンは予算表のみに設置しています。

2.コンボボックスの作成

絞り込みに使用する値を表示するコンボボックスを作成します。

手順2-1.セル型の設定

「予算表」画面を開きます。
ページタイトルの下にある「年度」「事業部」「部」「課」「大科目」「中科目」の見出しそれぞれの右側にある結合されたセルに、コンボボックスを配置していきます。

結合されたセルを選択した状態で、リボンの[ホーム]タブにある[セル型]からコンボボックスを選択します。
この作業を6つの結合セルすべてに行います。

手順2-2.コンボボックスの値を設定

コンボボックスの中に表示する値を設定します。
表示する値はテーブルからデータを取得します。

コンボボックス型に設定したセルを選択し、右ペインの[セル型]タブを開きます。
「リスト項目」見出しの下にある「テーブルからデータを取得」にチェックします。

すると、画面が変化して「テーブル」「値フィールド」「表示フィールド」という項目が現れるので、それぞれ以下のように設定します。

これで、それぞれのコンボボックスにテーブルから取得したデータが表示できるようになりました。

手順2-3.コンボボックスに空白行を追加

今のままでは一度コンボボックスで条件を選ぶと、絞り込みなしのクリアな状態には戻せません。
これを回避するために、コンボボックスに空白行（未選択項目）を追加します。

セル型タブのリスト項目欄には未選択項目の追加という項目があるので、すべてのコンボボックスでこれにチェックを入れます。
下図のような状態になれば、コンボボックスの設定は完了です。

「予算表」画面のコンボボックス設定が完了したら、「実績表」画面も同じように設定します。

手順2-4.コンボボックスに親子関係を設定する

このままでもコンボボックスは機能します。
しかし、事業部で「システム開発事業部」を選んだ時に、部のコンボボックスにシステム開発事業部内には存在しない「営業部」などの値が表示されるのはあまり親切とは言えません。
そのため、コンボボックスに親子関係を設定し、部のコンボボックスの内容が選択した事業部に連動するよう設定を行います。

「部」のコンボボックスを選択した状態で、リスト項目内にある「クエリー条件…」のハイパーリンクをクリックします。

クエリー条件ウィンドウにある「新しい条件」ボタンを押下して、下記のように設定します。

同様に、他のコンボボックスにも以下のように設定を行います。

・課コンボボックス

・中科目コンボボックス

これでコンボボックスの設定は完了です。

3.絞り込み処理を実装する

コンボボックスで選択した値に合わせてリストビューの表示データを絞り込む処理を実装します。
今回は前述の通り、

予算表画面：表示ボタンを押下したタイミング
実績表画面：コンボボックスの中身を選択したタイミング（ボタン押下不要）

で絞り込みを行います。

手順3-1.ボタン押下時にデータを絞り込む処理を実装する

予算表ページを開きます。
「表示」ボタンを選択した状態で、右ペインの「コマンド…」ハイパーリンクをクリックします。
開いたコマンドウィンドウで、「クエリー」コマンドを追加します。
対象テーブルにはリストビューと連結されている「予算管理」テーブルを選択します。
下図のように、各項目の値＝コンボボックス型セルで選択した値であるレコードのみを表示するように設定します。

OKボタンを押下して、設定を完了します。

手順3-2.コンボボックスの値選択時にデータを即時フィルタリングする処理を実装

「実績表」ページを開きます。
リストビューを右クリックし、「クエリー条件…」を押下します。

「クエリー条件」ウィンドウが開きます。
対象テーブルはリストビューと連結されている「実績管理」テーブルを指定します。
その後、予算表と同様に下図のような形で各項目の値=コンボボックス型セルで選択した値であるレコードのみを表示するように設定します。

OKボタンを押下して設定を完了します。

4.デバッグを実行

これでページが完成したので、プロジェクトをデバッグ実行します。

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

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

作成したページがブラウザで表示されます。
「予算表」ページではデータのフィルタリングを行うには、コンボボックスで条件を指定→表示ボタンを押下します。

「実績表」ページでは、コンボボックスで値を選択した瞬間にデータのフィルタリングが行われます。

5.コンボボックスやリストビューについてもっと知る

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

＞開発スタートガイド – Forguncyのリストビューを使いこなす

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

＞Forguncyヘルプ – リストビュー

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