テーブルデータを一覧表示

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

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

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