UI部品 基本編
| この記事でわかること： ・リストビューでクリックしたレコードを別ページで編集する方法 ・リストビューをクリックして別ページを開き、 関連する子テーブルのレコード一覧を表示・編集する方法 ・入力項目があるページから別のページを開いて表示・編集し、元のページに戻る方法 |
本記事はForguncy製品サイトで公開しているリストビュー概要資料における、各機能の実装方法を解説したものです。
リストビュー概要資料は下記リンクからご覧いただけます。
| プロジェクトファイル （作成バージョン：(10.0.13.0） | stepup_listview_before.fgcp stepup_listview_after.fgcp（実装済みプロジェクトファイル） |
1.プロジェクトを確認する
今回の演習で使用するプロジェクトを確認します。
手順1-1.テーブルを確認
プロジェクトには複数のテーブルが内蔵されています。今回は部署マスタ、社員マスタを使用します。
手順1-2.ページを確認
プロジェクトには複数のページが内蔵されています。
そのうち、今回は「ページ遷移」フォルダに入っているページを使用します。
2. リストビュー上の特定レコードを別ページで編集する
リストビューに一覧表示されているテーブルデータから任意のレコードを選択し、別の単票形式のページに遷移してデータを編集する方法を解説します。
指定したレコードを別ページで編集できるようにするには、リストビューに表示しているテーブルのフィールドが遷移先のページのセルにデータ連結されている必要があります。
手順2-1.ページ遷移処理の追加
ページ1を開き、リストビューの[ID]フィールドをクリックしたときにページ遷移を行う処理を追加します。
B6セルを選択した状態で、リボンの[ホーム]＞[セル型]のコンボボックスからハイパーリンクを選択します。
右ペインの[セル型]タブの[コマンド…]をクリックし、コマンドウィンドウが開いたらページ遷移コマンドを追加します。
コマンドの設定は下記の通りです。
| Forguncy内のページ | ページ2 |
手順2-2.遷移先ページにデータ連結
ページ2を開き、部署マスタのフィールドをページに連結します。
ナビゲーションウィンドウの部署マスタを展開し、下表に記載のセルに各フィールドをドラッグ&ドロップして連結します。
| フィールド | セル番地 |
| [部署マスタ.ID] | E4 |
| [部署マスタ.事業部] | E6 |
| [部署マスタ.部] | E8 |
| [部署マスタ.課] | E10 |
手順2-3.データ更新処理の実装
ページ2の更新ボタンを押下した際に、部署マスタを更新しページ1に戻る処理を実装します。
E12セルを選択した状態で右ペインの[セル型]タブから[コマンド…]をクリックします。
コマンドウィンドウが開くので、まずテーブルデータの更新コマンドを下記の設定で追加します。
・処理の種類：更新
・対象テーブル：部署マスタ
続けてページ遷移コマンドを追加し下記の通りに設定します。
| Forguncy内のページ | ページ1 |
ページ遷移コマンドの注意点
ページ遷移コマンドの後に続けて別のコマンドを指定することはできません。
遷移後に別の処理をコマンドで行いたい場合は、遷移後のページで[ページロード時のコマンド…]を設定してください。
また、ページ遷移コマンドが動作した後の画面でクエリーを用いる場合、前回のデータがキャッシュに残っていることがあります。
このような場合は、ページ遷移コマンドの設定で[詳細設定を表示…]をクリックして、[遷移先ページのクエリー結果と並び替え結果のキャッシュを削除する]にチェックを入れてください。
3. 親テーブルのリストビューからページ遷移し子テーブルのレコードを表示・編集する
親子関係のあるテーブルを異なるページに配置し、1ページ目で選択した親テーブルのデータに紐づく子テーブルのデータを遷移先のページで表示する方法を解説します。
手順3-1.ページ遷移処理の追加
ページ1を開き、リストビューの[部]フィールドをクリックしたときにページ遷移を行う処理を追加します。
M6セルを選択した状態で、リボンの[ホーム]＞[セル型]のコンボボックスからハイパーリンクを選択します。
右ペインの[セル型]タブの[コマンド…]をクリックし、コマンドウィンドウが開いたらページ遷移コマンドを追加します。
コマンドの設定は下記の通りです。
| Forguncy内のページ | ページ3 |
手順3-2.遷移先ページにデータ連結
ページ3を開き、部署マスタのフィールドをページに連結します。
ナビゲーションウィンドウの部署マスタを展開し、下表に記載のセルにフィールドをドラッグ&ドロップして連結します。
| フィールド | セル番地 |
| [部署マスタ.部] | F4 |
手順3-3.テーブルの親子関係の設定
ページ3のリストビューを、ページ1の部署マスタを表示しているリストビューの子として認識させる設定を行います。
ページ3のリストビューを右クリックし、[詳細リストビューとして設定…]をクリックします。
詳細リストビューとして設定ウィンドウが開くので、下記のように設定します。
| マスターテーブルと関連付ける詳細テーブル上のフィールド | 社員マスタ_部 |
| マスターテーブル | 部署マスタ |
| マスターテーブル上の参照フィールド | 部署マスタ_部 |
これで選択したデータに紐づくデータの表示ができるようになりました。
4.デバッグを実行する
デバッグを行うには、ページ1を開いた状態ででリボンの[ホーム]>[デバッグ実行]ボタン、またはForguncy Builderの左上にある▶ボタンを押下してプロジェクトをデバッグ実行します。
ページ1を選択した状態でプロジェクトを実行すると、リストビューのあるページが開きます。
ハイパーリンクになっている[ID]フィールドをクリックすると、ページ2に遷移してデータの更新が可能になります。
[部署マスタ_部]のハイパーリンクをクリックすると、ページ3に遷移してクリックした部署名に一致するデータのみを抽出したリストビューが表示されます。
ForguncyのUI部品についてもっと知る
Forguncyの開発スタートガイドやオンラインヘルプでは、ユーザーがより使いやすいアプリを作成するのに便利なUI部品についてより詳しくご紹介しています。
こちらもぜひご活用ください。
