第5回 Forguncyのリストビューを使いこなす

Forguncyのリストビューを使いこなす

リストビューはForguncyにおいて中核とも言える機能です。
テーブルデータの一覧表示はもちろん、表示データの並べ替えやデータの更新や削除などデータに関する様々な機能を持ちます。さらに、ページ上の各種UI部品に表示されるデータのレコードの特定や、グラフなどのデータソースになることもリストビューの重要な役目です。
本記事では、リストビューが持つ様々な機能とその使い方について概説します。

見出しの装飾

Forguncyのリストビューの概要

Forguncyにおけるリストビューは、大きく分けて2つの機能を持っています。
1つ目はテーブルデータの一覧表示です。リストビューにテーブルデータを連結することで、そのテーブルが持つデータを一覧表示します。表示する項目は開発者が自由に設定できます。テーブル同士の関連付けを行えば、複数のテーブルのデータを1つのリストビューにまとめて表示することもできます。また、リストビューを介して表示しているテーブルデータの更新を行うことも可能です。
2つ目の役割は、ページで使用するカレントレコードの特定です。テーブルのデータが連結されたセルに対して、どのレコードのデータを参照するのかを判定する役割をリストビューが担っています。

見出しの装飾

リストビューに表示するデータの設定をする

リストビューでは、セルの書式設定やデータ抽出、並び替えなどデータ表示に関する様々な設定が可能です。これらの機能を使用すれば、テーブルのデータをより分かりやすく表現できます。

見出しの装飾

データの抽出

リストビューでは、データ連結を行ったテーブルからデータを絞り込み、抽出したレコードのみを表示することができます。データの抽出にはクエリーを使用します。設定はフィールド、条件、比較に使用する値をドロップダウンから選択または任意の値を入力して行います。値にはセル番地や数式の利用も可能です。And/Orを指定して条件を複数設定したり、括弧を使って複雑な条件を設定したりすることも可能です。

開発時にあらかじめ抽出条件を指定するほか、テキストボックスやコンボボックス、ボタンなどのUI部品と組み合わせ、検索ボックスを実装することもできます。テキストボックスやコンボボックスなどの値を含む条件でボタンにクエリーコマンドを実装すると、ボタンを押下した際にクエリーが実行され、指定の条件に一致するデータのみがリストビューに表示されます。

画面のUI部品について第4回の開発者向け解説記事でも紹介していますので、参考にしてください。

見出しの装飾

データの並び替え

リストビューのデータは、デフォルトではテーブルの[ID]フィールドの昇順で表示されています。この並び順は変更することができます。並び替えの設定は、フィールドと昇順/降順の指定で行います。複数の条件を指定することもできますが、その場合は上にある条件ほど優先順位が高くなります。ユーザーがアプリを使用中に条件指定を行うこともできます。
リストビュー上の各列の見出しから、Excelのフィルタ機能のような感覚で画面からデータの並べ替えや、テキストフィルターなどのデータ絞り込み機能を使うことができます。

見出しの装飾

セル型の設定

一覧表示したテーブルのデータをより見やすくする方法の一つに、セルの設定変更があります。Forguncyではリストビュー内のセルに各種UI部品を使用して、より視認性の高い一覧表示画面を作ることができます。

例えば完了/未完了の項目をチェックボックスで表現したり、明細ページへ移動するためのボタンをリストビュー内に配置したりと、リストビューの構成をより自由にカスタマイズすることができます。

各UI部品の特徴や使い方については第4回の開発者向け解説記事や、各部品のヘルプページを参考にしてください。もちろん、UI部品の設定以外にExcelのようなセルの書式設定を行うことも可能です。書式設定の方法については、ヘルプを参照してください。

見出しの装飾

リストビュー上でデータの計算を行う

リストビュー上に表示されている値は、数式を使用して計算することができます。

例えばリストビュー内に「単価」と「個数」の列が存在するテーブルのデータを一覧表示している場合、データ元であるテーブルに「合計金額」の列が存在しなくてもリストビューの行テンプレートに数式を設定すれば自動でリストビューが値を計算して表示を行います。

この際、Excelのように数式をオートフィルで各行に設定する必要はありません。数式を行テンプレートに設定しているので、リストビューが自動で参照する行を判定します。数式には絶対参照も使用できるので、各行の値ではなく常に特定のセルを参照することもできます。

数式にはExcelと同様に関数を設定できます。使用できる関数については、ヘルプを参照してください。

見出しの装飾

テーブルデータをノーコードで編集する

Forguncyのリストビューは、一覧表示されているテーブルのデータの変更、新規追加やレコードの削除といったデータの編集機能を持っています。これらの機能ももちろんノーコードで、SQL文を書くことなく実装することができます。

見出しの装飾

データの更新

リストビューからデータの更新を許可する場合、あらかじめリストビューの更新処理設定を行う必要があります。既にテーブルに存在するデータを編集するには[編集を許可]の設定をオンにしてください。

この設定がオンになっていれば、セルをダブルクリックまたはExcelと同様にF2キーを押下することでデータの編集ができるようになります。カーソルが他の行に移動した時点で、入力値が実際のテーブルに反映されます。更新タイミングの変更方法についてはヘルプで解説していますのでそちらを参照してください。

既存データの更新以外に、Forguncyのリストビューではレコードの新規追加をすることも可能です。新規にレコードの追加をするには、[編集を許可]に加えて[新規行の追加を許可]の設定をオンにしてください。

見出しの装飾

データの削除

リストビューの設定で[削除アイコンを表示]をオンにしておくと、リストビュー上からテーブルデータの削除が可能になります。データの削除はレコード単位で行われます。データを削除するには、アプリ実行時に選択行の左側に表示される×マークをクリックします。そのため、リストビューの配置時に左側にスペースを空けておくよう注意してください。

見出しの装飾

入力規則の設定

リストビューの[編集を許可]設定がオンになっているとき、リストビュー内のセルにデータの入力規則を設定することができます。入力規則は列ごとに指定します。設定できる内容は入力値の種類や未入力の許可/不許可、入力可能な値の範囲です。入力を行う際にメッセージを表示させることができるので、あらかじめ「この列には15桁以内の文字列で入力してください」などとガイドを表示しておけば、ユーザーにとっても親切な画面を実現できます。
入力されたデータが指定の条件と一致しない場合には、エラーメッセージが表示されます。エラーメッセージは開発者が自由に決めることもできますが、特に設定をしなくてもデフォルトのメッセージ表示が行われるようになっています。

見出しの装飾

カレントレコードを特定する

「Forguncyのリストビューの概要」で解説した通り、データ連結したセルに表示されるのはリストビューで選択されているカレントレコードになりますが、このカレントレコードはページを移動しても引き継がれます。データを一覧で表示する画面があり、そのデータに関する明細を別ページで開くようにしたいという場合にも、ノーコードで簡単に実装することができます。

見出しの装飾

他のUI部品のデータソースとして使う

リストビューには他のUI部品を使用する際にデータソースとして使用できるという側面があります。リストビューによるデータの一覧表示でも十分な視認性がありますが、これをグラフ、ピボットテーブル、あるいはリピーター型セルのデータソースとして活用することで、より分かりやすいデータ表現を実現します。

画面にこれらのUI部品が存在するのにリストビューは必要ないと思うことがあるかもしれません。その場合、リストビューは非表示にすることをおすすめします。リストビューを配置しているセルが非表示状態であっても、同じ画面上に存在していれば各画面UI部品はそのリストビューをデータソースとして認識、使用することができます。

見出しの装飾

Forguncyをもっとよく知る

各業種や用途別にForguncyを活用して、成功した事例や使い方をご紹介します。