Forguncyの使い方 リストビュー(listview)

リストビュー リストビューの作成-Forguncy(フォーガンシー)

【リストビュー】リストビューの作成-Forguncy(フォーガンシー)

Excelライクなノーコードプログラミングツール「Forguncy(フォーガンシー)」。 今回は、リストビューの作成についてご紹介したいと思います。

Forguncyのリストビューは、ページ上でデータを扱うために最も適している機能です。

他の様々なセル型のフォームコントロールをすべて内包するような大きな機能となるため、その設計範囲は広いです。

そこで、リストビューの設計に関しその内容を大まかにまとめました。

※各設定の詳しい内容は、個別のテーマ別記事を確認してください。

■【リストビュー作成の概要】

※流れの2.以降は、手順が前後しても問題ありません。

流れ、設計する内容、手順概要

■リストビューを作成する

ページにリストビューを作成する手順について説明します。

①リストビューを作成したいテーブルを用意します。今回は次のテーブルを使います。

テーブル用途

②ページでリストビューを作成したい範囲を選択した状態にします。

※この範囲は、リストビューを作成後、「リストビュー領域」になります。

※「リストビュー領域」は、リストビュー作成後、場所を移動したりサイズを変更したりできます。詳しくは「リストビューのサイズ変更」を確認してください。

ここに、今からリストビューを作成していきます。

③リストビューを作成する方法はいくつかあります。個別に説明していきます。

Ⅰ:ドラッグ&ドロップする方法

1)ナビゲーションウィンドウから目的のテーブル名を選択し、ページ上のリストビュー領域としたい範囲内ヘドラッグ&ドロップします。

範囲内にドラッグ&ドロップします
Ⅱ:右ペインから指定する方法

1)右ペインの[データ連結]タブにある、データソース項目のプルダウンから対象のテーブルを指定します。

データ連携、データソース
プルダウンリストから対象テーブルを選択
Ⅲ:メニューから指定する方法

1)メニュー[ホーム]-[リストビュー]-[リストビューとして設定]をクリックします。

リストビューとして設定

2)テーブルの選択ダイアログ表示されるので、対象のテーブルを選択肢、「OK」ボタンをクリックします。

対象テーブルを選択してOKボタンをクリック"

④リストビューが作成されました。

リストビュー作成直後は以下が定まった状態となっています。

◎リストビュー領域

◎リストビュー名

◎データソース

リストビュー名は自動的に付けられます

■行テンプレートの列を設定する

リストビューが作成された直後は、データソースが設定されていても、何を表示するのかまだ何も具体的に設計されていない状態です。

見た目列がたくさん並んでいるがこの状態で実行しても何も表示しない

「行テンプレート」と呼ばれる特別な行に「リストビューの列」を設定していくことで、リストビューに表示させる内容が定まります。

行テンプレート

列には、例えば、テーブルのフィールドの内容を表示するものや、ユーザ操作を行わせるためのものや、計算用の表示させるためのもの、固定値等様々なものがあります。

列の設定にあたり、1リストビューの列=1セルにこだわる必要は一切なく、エクセルライクに自由に行うことができます。

セルを結合して列幅を広げたり、セル幅や行の高さを調整して、好みの見た目とすることができます。

ただし、セル幅や行の高さは、リストビューの外側に配置されたフォームに影響することに注意してください。

なお、セル結合にあたり、必ずしもその明示的な操作は必要ではありません。

リストビューの列を設定していく際の手順で、自動的にセル結合がされるからです。

選択範囲をセル結合したい場合の明示的な操作
データ連結

リストビュー上に設定する列で最も一般的なものは、テーブルのフィールドに対応した列です。

このような列の設定には、テーブルのフィールドを連結させる手順が必要になります。

①行テンプレートで、対象としたい範囲を選択します。

ここに、テーブルのフィールドと対応した列を作成(連結)していきます。

②行テンプレートの列に、テーブルのフィールを連結させる方法は2つあります。個別に説明していきます。

Ⅰ:ドラッグ&ドロップする方法

1)ナビゲーションウィンドウのテーブルからフィールドを選択し、行テンプレートの選択領域ヘドラッグ&ドロップします。

範囲内にドラッグ&ドロップします
Ⅱ:右ペインから指定する方法

1)右ペインの[データ連結]タブにある、連結フィールド名項目のプルダウンから対象のフィールドを指定します。

データ連結、連結フィールド名
プルダウンリストから対象フィールドを選択

<注意>

ページ上で、対象のリストビューの行テンプレートで、列を作成したいセル範囲を選択していない状態では右ペインで、データ連結フィールド名を設定できません。

③連結フィールドに対応した列ができました。

見出し行のタイトルには、連結したフィールド名が自動的に設定されます。
列の各種設定

データ連結(フィールドの連結)の他、行テンプレート上の各列に対して、ページ上の通常のセルと同様に様々な設定を行うことができます。

列に対する設定の実施や確認は、行テンプレート上の対象の列を選択してから行う必要があります。

主なものを以下に挙げますが、詳しい仕様については個別のテーマ別記事を確認してください。

・タイプに関するもの

列名

セル型

・見た目に関するもの

スタイルの設定(スタイルを持つセル型のみ

書式設定

条件付き書式設定

・振る舞いに関するもの

入力規則

コマンド

また、設定を行える主な場所を以下に示します。

いずれについても、設定を行ったり内容を確認するためには、必ず「行テンプレート」の対象列を選択しておく必要があります。

【メニュー】
メニュー[ホーム]でセル型及び見た目に関する設定ができます
メニュー[データ]では、入力規則に関する設定ができます
【右クリックメニュー】
各列に対する設定はこの2つ
【右ペイン】
右ペインの[セル型]タブでは、列名、コマンド等を確認できます

■リストビューの詳細を設定する

ここまで説明したものの他にも、リストビュー全体に対して設定を行うことができます。

スタイルの設定、リストビュー設定、クエリ条件等があります。

スタイル設定

スタイルは、リストビュー全体に対しても行うことができます。

①スタイルを設定したいリストビューを選択します。

②①で選択したリストビューに対し、メニュー[デザイン]タブが表示されるので、[リストビュースタイル]-[クイックスタイル]をクリックします。

③表示されたスタイルの一覧から選択します。

リストビューを選択しておく必要があります
現在適用されているスタイル

リストビューのスタイルの詳しい仕様については個別のテーマ別記事を確認してください。

リストビュー設定

リストビュー設定では、リストビュー全体の表示や、動作などを設定します。

①詳細設定したいリストビューで右クリックし、表示されるメニューから[リストビュー設定]を選択します。

②起動した専用のダイアログの各タブで設定を行い[OK]ボタンをクリックします。

4つのタブがあります

補足

リストビュー専用のメニュー[デザイン]に表示される項目からも設定を行うことができます。

リストビューを選択しておく必要があります

「リストビュー設定」ダイアログには、[外観]、[更新と選択]、[その他動作]、[データ]の4つのタブがあります。

ここでは、リストビューの設定でよく使われることが多い項目のピックアップのみを行います。

【外観タブ】

ヘッダーや枠線の有無など外観を設定します。

列ヘッダー、選択列
行列それぞれヘッダーに関する設定を行います
ユーザに行を選択させるための列を設定するかどうかを指定します
【更新と選択タブ】

リストビューでの更新処理や選択などの動作を設定します。

リストビューを「閲覧」専用の一覧として使うのかレコード追加、更新、削除を行えるようにするのかを設定します。
【その他の動作】

列ヘッダークリック時の動作やフォーカス移動などの設定します。

その他の動作
【データ】

リストビューのデータの確定タイミングを設定します。

リストビュー上で編集した操作をいつテーブル(データベース)に反映するのかを設定します
クエリ条件

アプリケーションを実行した際、テーブルから取り出してリストビューに表示するレコードを特定するためのクエリ条件を設定します。

①詳細設定したいリストビューで右クリックし、表示されるメニューから[クエリ条件]を選択します。

②起動した専用のダイアログで条件の設定を行い[OK]ボタンをクリックします。

クエリー条件
例えば、名称に何も設定されていないレコードを対象外とするというような条件を設定することができます。

■リストビューを複写する場合の注意事項

設計時、リストビューを複写して新しいリストビューを作成することも可能です。

しかし、データソースとなるテーブルを変更した場合、データ連結に関わる部分がクリアされます。

このため、複写先のリストビューで設定が必要であることに注意してください。

※赤枠で囲んだ部分

※赤枠で囲んでいない部分も、一部の設定がクリアされたり、コマンド内で不整合を起こした内容になっていたりするため、必ず確認し再設定が必要です。

複写し、データソースを変更した場合はこの部分全体の見直しが必要です