データを絞り込んで表示

UI部品　基本編

本記事はForguncy製品サイトで公開しているリストビュー概要資料における、各機能の実装方法を解説したものです。
リストビュー概要資料は下記リンクからご覧いただけます。

＞お役立ち資料 – リストビュー概要

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

今回の演習で使用するプロジェクトの確認をします。

手順1-1.テーブルを確認

今回使用するテーブルは社員マスタと部署マスタ、顧客マスタです。

手順1-2.ページを確認 

プロジェクトには複数のページが内蔵されています。
そのうち、今回使用するページは「データ抽出」ページです。

2.リストビューそのものに抽出条件を設定する

ページ上に配置されているリストビューに、表示するデータの条件を直接設定します。
今回ご紹介する3つのうち、最も早く処理が行われるのがこの方法です。
また、この設定を行ったリストビューに対して後述する2つの方法で追加の絞り込み設定を行うことも可能です。
その場合、この手順で絞り込んだ後のデータに対して追加の絞り込みがかかる形になります。

手順2-1.リストビューにクエリー条件を指定

ページ上の一番上のリストビューを右クリックし、[クエリー条件…]を押下します。
クエリー条件ウィンドウが開くので、[新しい条件]ボタンを押下し、抽出条件を下記のように指定します。
今回の条件は35歳未満の社員を抽出する設定となります。

3.ページロード時に抽出処理を行う

アプリ実行時、リストビューが配置されているページを読み込む際に抽出処理を行う方法を解説します。
今回ご紹介する3つのうち、2番目に早く処理が行われるのがこの方法です。
この方法でのデータ抽出は、ページ上にある真ん中のリストビューに対して実装しています。

手順3-1.ページロード時のコマンドを設定

右ペインの[ページ設定]タブから[ページロード時のコマンド…]を押下します。
コマンドウィンドウが開くので、クエリーコマンドを追加し、抽出条件を下記のように指定します。
今回の条件は「システム」というワードを含む事業部に所属する社員を抽出する設定となります。

・対象テーブル：部署マスタ

4.ボタン押下時に抽出処理を行う

アプリ実行時、ページ上にあるボタンを押下した際にリストビューに表示するデータを抽出する方法を解説します。
今回ご紹介する3つのうちで唯一、ユーザーの操作がきっかけとなって抽出処理が稼働する方法です。
ユーザーの操作なしでは抽出処理が動かないため、3つの中で処理が行われるのが一番遅い方法です。
また、今回はボタンに処理を実装していますが、コンボボックスなど他のUIパーツでも活用できます。

手順4-1.ボタンにコマンドを設定

ページ最下部のリストビューに対して処理を実装します。
リストビューの上に既にボタンが配置されているため、今回はこのボタンに抽出処理を行うコマンドを設定します。
ボタンを右クリックし、[コマンド…]を押下します。
コマンドウィンドウが開くので、クエリーコマンドを追加し、抽出条件を下記のように指定します。
今回の条件は「住所に東京都というワードが含まれない顧客」を抽出する設定となります。

対象テーブル：顧客マスタ

5.デバッグを実行する

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

プロジェクトを実行すると、それぞれの手順で設定した通りにリストビューの表示データが絞り込まれた状態になっているのが確認できます。

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

Forguncyの開発スタートガイドやオンラインヘルプでは、ユーザーがより使いやすいアプリを作成するのに便利なUI部品についてより詳しくご紹介しています。
こちらもぜひご活用ください。

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

＞Forguncyヘルプ – Forgucnyの使用と制限

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

＞お役立ち資料 – リストビュー概要