セルに特定のレコードの値を表示できる詳細画面を作る

UI部品　基本編

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

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

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

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

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

プロジェクトには複数のテーブルが内蔵されています。
今回は社員マスタを使用します。

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

プロジェクトには複数のページが内蔵されています。
そのうち、今回使用するページは「セルに特定のレコードの値を表示」です。

2.ページにリストビューを連結する

ページ上のセルにテーブルデータを表示するには、「テーブルデータとセルの連結」および「カレントレコードの特定」が必要です。
この２つの設定はリストビューを用いて行います。

手順2-1.リストビューの配置

ページに社員マスタのデータを表示するリストビューを連結します。
ナビゲーションウィンドウからU4セル～AG8セルを選択した状態で社員マスタをドラッグ&ドロップします。
データソースの設定ウィンドウで表示する項目が指定できますが、特に変更は必要ありません。

手順2-2.セルにテーブルデータを連結

リストビューではなく、セルにテーブルの任意のフィールドのデータを表示させるための設定を行います。
ナビゲーションウィンドウから下表の通りに社員マスタの項目をセルにドラッグ＆ドロップします。

ここまでの状態でデバッグを実行すると、リストビューの各行をクリックすることでセルに表示されるデータが選択されたレコードのものに切り替わります。

手順2-3.リストビューを非表示にする

単票形式のページにリストビューを表示しておくと、ページ上に配置されている情報が多くなり、ユーザビリティの低下に繋がってしまいます。
そのため、リストビューは非表示に設定しておきます。
列ヘッダーのU列～AG列を選択した状態で右クリックし、[非表示(H)]をクリックします。
こうすることで、U列からAG列はアプリ実行時に表示されなくなります。

３．カレントレコードを選択する

リストビューを表示せず単票形式のページにテーブルデータを表示するという目的は達成しましたが、リストビューを非表示にしたことで表示したいレコードを選べなくなってしまいました。
それを解消するため、カレントレコードを指定する手段を実装します。
今回はレコードナビゲーションを使う方法とコンボボックスを使う方法の2つをご紹介します。
これらの方法は併用するのではなく、1件ずつデータを見たいようなアプリを想定する場合はレコードナビゲーションを、ピンポイントで見たいデータに移動させたいようなアプリを想定する場合はコンボボックスを使うというように、実際の使用シーンに合わせて使い分けをしてください。

手順3-1.レコードナビゲーションの追加

レコードナビゲーション型セルを使用し、カレントレコードを移動できるようにします。
B12セル～H12セルを選択した状態でリボンの[ホーム]＞[セル型]のコンボボックスからレコードナビゲーションを選択します。
右ペインの[セル型]タブにある[遷移対象のテーブル]で社員マスタを選択しておきます。
これで、先頭レコード・最終レコード・1つ前のレコード・1つ後のレコードへカレントレコードを移動することができるようになりました。

手順3-2.コンボボックス

コンボボックスとリストビューのクエリーを組み合わせ、ページ上のリストビューに表示するデータを絞り込むことでカレントレコードを移動させる処理を実装します。
H14セル～N14セルを選択した状態でリボンの[ホーム]＞[セル型]のコンボボックスからコンボボックスを選択します。
右ペインの[セル型]タブでテーブルからデータを取得にチェックを入れ、リストに表示する項目を設定します。

未選択項目の追加にチェックを入れておくと、コンボボックスのリスト最上段にブランクの項目が追加されるので、この設定も行っておきます。

リストビューに表示するデータを絞り込むため、クエリーの設定を行います。
非表示に設定済みのリストビューを右クリックし、[クエリー条件…]をクリックしクエリー条件ウィンドウを開きます。
下記のように、コンボボックスで指定した値でレコードが絞り込まれるよう設定します。

これで設定は完了です。

4.デバッグを実行する

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

プロジェクトを実行すると、セルにテーブルのデータが表示されていることが確認できます。
レコードナビゲーションを使ったりコンボボックスで条件を指定したりして、表示データが変更されることを確認してください。
リストビューの非表示を解除すると、リストビュー側ではどういった動きがあってどのようにカレントレコードが切り替わるのかを見ることができます。

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

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

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

＞Forguncyヘルプ – Forguncyの仕様と制限

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

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