リストビューのTips

UI部品　基本編

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

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

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

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

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

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

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

プロジェクトには複数のページが内蔵されています。
そのうち、今回使用するページは「リストビューのTips」ページです。

2.値の編集・削除を可能にする

リストビューは、テーブルのデータを一覧表示するだけでなく、値の編集が可能です。
ここでは値の入力を可能にする設定と、入力値を削除するボタンの作成方法を解説します。

手順2-1.値の入力を許可

リストビューを右クリックし、[リストビュー設定…]をクリックします。
リストビュー設定ウィンドウが開くので、[更新と選択]タブ>[更新処理]>[編集を許可]にチェックを入れて閉じます。

手順2-2.入力値をクリア

リストビューに入力した値をクリアするには、リストビューのリロードを行います。
しかしリストビューのデフォルト状態では、カレント行が変わると入力値がデータベースに更新されてしまいます。
このため、まずはリストビューの即時更新を停止します。
リストビューを右クリックし、[リストビュー設定…]をクリックします。
リストビュー設定ウィンドウが開くので、[データ]タブ>[リストビューのデータを即時更新しない]にチェックを入れて閉じます。

ボタンにコマンドを設定します。
「入力値をクリア」ボタンを選択した状態で、右ペインのコマンド…ハイパーリンクをクリックします。
コマンドウィンドウが開くので、リストビューの操作コマンドを追加し、処理の種類を「再読み込み」に変更します。

3.ページング設定をする

レコード件数が多くリストビューにデータが表示しきれない場合、リストビューの右端にスクロールバーが表示されます。
このスクロールバーを表示させず決まった行数を表示させ、ページングできるよう設定するにはページナビゲーション型セルを使用します。
B17セル～J17セルを選択し、リボンの[ホーム]>[セル型]からページナビゲーションを選択します。
右ペインの[セル型]タブで対象リストビューがリストビュー1になっていることを確認します。
その下の１ページに表示する行数欄で、リストビューに一度に表示する行数の設定ができるので、任意の値に変更してください。

4.横方向にスクロールする

リストビューに表示する項目数が多く画面上に列が表示しきれない場合は、横にスクロールすることができます。
リストビューの表示幅は小さくしたくさんの列を横スクロールさせることで表示させたい場合、列の非表示機能とリストビューの［非表示を無視する］設定を組み合わせることで実現できます。
まずは年齢～性別の列を非表示に設定します。
S列～AH列を選択した状態で右クリックし、[非表示(H)]をクリックします。

S5セルを選択した状態で、リボンの[デザイン]＞［列設定］＞［非表示を無視する］にチェックを入れます。
こうすることで、画面に表示するリストビューの幅を狭め、横のスクロールでデータが見られるようになります。

さらに使いやすくなるよう、表示状態で固定する先頭列を設定します。
今回は社員番号と氏名を常に表示されるように設定します。リストビューを右クリックし、［リストビュー設定…］をクリックします。
リストビュー設定ウィンドウが開くので、[その他の動作]タブ＞[列の固定]＞[固定する先頭行の列数]欄で2と指定します。

5.レコード件数を取得する

テーブルのレコード件数を取得して画面に表示するには、ODataを使用します。
M17セルを選択した状態で、リボンの[数式]タブ＞[OData]>[OData生成ツール]をクリックします。
OData生成ツールウィンドウが開くので、対象テーブル欄で社員マスタを指定します。
[選択]タブで「件数の取得」を選び、ウィンドウを閉じます。

6.一覧表をソートする

手順6-1.ページ表示時にソートする

アプリを起動し、ページが表示される際にリストビューに表示するデータをソートします。
リストビューを選択した状態でリボンの[デザイン]＞［並べ替え］をクリックします。
並べ替え条件ウィンドウが開くので、新しい条件ボタンをクリックし下記のように条件を追加します。

手順6-2.ページに配置したボタンをクリックした時にソートする

ボタンに並べ替えコマンドを設定することで、ユーザーが任意のタイミングでデータのソートを行うことができます。
「社員番号順に並べ替え」ボタンを選択し、右ペインの[セル型]タブからコマンド…ハイパーリンクをクリックします。
コマンドウィンドウが開くので、新たに並べ替えコマンドを追加し下記のように設定します。

・対象リストビュー：リストビュー1

これで設定は完了です。

7.デバッグを実行する

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

プロジェクトを実行すると、ページが表示されます。

プロジェクトを実行すると、これまでの手順で実装した入力した値の削除やスクロールやページング、ソートなどの動作を確認することができます。

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

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

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

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

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

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