UI部品 基本編
Forguncyの内部テーブルやSQL Server、Oracle Databaseなど外部データベースのテーブルで管理しているデータを一覧表示するには、リストビューを使うと便利です。
Forguncyではリストビューをセル型の一つとして提供しています。これを使うと、難しいコーディングは一切なしでテーブルのデータを一覧表の形で表示することができます。Excelのフィルタ機能のように、並べ替えを行うことも可能です。
ここでは、Forguncyでリストビューを画面に配置する方法や、その基本機能について解説を行います。
1.ページの準備
リストビューを配置するためのページをプロジェクトに作成します。
手順1-1.プロジェクトファイルを開く
サンプルのプロジェクトファイルをダウンロードし、開きます。
プロジェクトには「組織マスタ」「科目マスタ」「予算管理」「実績管理」の4つのテーブルがあらかじめ作成されています。
手順1-2.ページを新しく作成する
プロジェクトに新しくページを作成します。Forguncyのページとは、Webブラウザに表示される画面となるものです。
ナビゲーションウィンドウのページ部分を右クリックし、「新しいページの作成」をクリックします。
新しく「ページ1」という名前のページが生成されるので、それを右クリックします。
「名前の変更」をクリックするとページの名前変更ができるので、「リストビューの配置」をいう名前にします。
2.リストビューを配置
データを一覧表示するリストビューをページに配置します。
手順2-1.使用するテーブルを確認する
リストビューを使ってデータの表示を行うテーブルを準備します。今回は既にプロジェクト内に準備されている「組織マスタ」を使用します。
手順2-2.ページにリストビューをセットする
ページ上の、リストビューを配置したい範囲のセルを選択します。
その状態でナビゲーションウィンドウから「組織マスタ」を選択セル内にドラッグ&ドロップします。
下図の赤枠部分がリストビュー型セルになりました。
1行目の青い部分が見出しになり、データは2行目から表示されます。
手順2-3.項目を配置する
リストビュー型セル内に、組織マスタの項目を配置していきます。
ナビゲーションウィンドウ内の組織マスタの左側にある▷マークを押下すると、組織マスタが展開されテーブルが持っているフィールドが表示されます。
リストビューの2行目（青い行の下の行）の任意の範囲のセルを選択し、その状態で組織マスタの「組織コード」を選択セルにドラッグ&ドロップします。
正しく配置できると、下図のように見出しとサンプルデータが表示されます。
同様に、「事業部」「部」「課」もリストビューにセットしていきます。
最終的に、ページは下図のようになります。
3.デバッグを実行
これでページが完成したので、プロジェクトをデバッグ実行します。
手順3-1.デバッグを実行する
リボンの[ホーム]>[デバッグ]>[開始]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
作成したページがブラウザで表示されます。
各見出しの右側にある🔽ボタンを押下すると、下図のように並べ替えや値のフィルターを行うこともできます。
4.リストビューについてもっと知る
Forguncyの開発スタートガイドやオンラインヘルプでは、今回使用したリストビュー型セルについてより詳しくご紹介しています。
こちらもぜひご活用ください。
