4D Qodly Proでインタラクティブなデータリストを作成する

今週のブログでは、データを表示するための動的なページの作成について説明します。今回は実践的な応用例として、従業員の年次業績報告書を作成するシステムの構築に焦点を当てます。このプロジェクトはGitHubで参照できます。

私たちの目標は、従業員のリストを表示し、部署や雇用形態によって結果をフィルタリングするオプションがある、ユーザーフレンドリーなインターフェイスを設計することです。

業績評価アプリケーション

これが最終的な結果です：

Qodlyソースのセットアップ

Qodly ソースのセクションでは、コンポーネントが使用するさまざまなソースを定義します。

この例では、データ・クラス “Employee” に基づいて、エンティティ選択タイプの “Employees” というタイトルのソースを作成します。初期値は、すべての従業員に設定されています。

注意

• This.page “にグループ化されたソースは、現在のページにスコープが限定されます。これらは、一時的またはページ固有のデータ処理に使用します。
• Namespaces “配下にグループ化されたソースは、グローバル・スコープを持つため、複数のページで共有されるデータや設定に適しています。

データテーブルの作成

4D Qodly Proでは、データテーブルや マトリックスコンポーネントを利用して、データのリストを効果的に表示することができます。この例では、4DのCollectionやEntity Selectionタイプのリストボックスに似たdatatableコンポーネントを使用します。

Qodly source “フィールドでは、データテーブルに入力するエンティティ選択を割り当てることができます。Selected Element “フィールドは、リストボックスの “Current item “に相当する選択されたエンティティを取得します。

次に、”Columns” セクションで、カラムを追加し、その式を定義します。例えば、”Employee “データクラスの直接属性である “Firstname “と、関連属性である “Department.Name “のカラムを定義します。

データのフィルタリング

この実装では、従業員のリストを、所属部署または有効な従業員ステータスに基づいてフィルタリングできます。

関数 loadEmployees()

4D側では、”Employees “クラスに関数を追加し、フィルタリング基準に従ってエンティティの選択を返します。

以下はコード・スニペットです：

exposed Function loadEmployees
($departement:Object;$isActive:Boolean) :cs.EmployeeSelection
If ($departement#Null)return This .query("ID_Departement = :1 AND isActive = :2";$departement.ID;$isActive)
Else
return This .query("isActive = :1";$isActive)
End if

アクティブ・ステータスによるフィルタリング

雇用ステータスによるフィルタリングを実装するために、”isActive” という名前の boolean 型の Qodly ソースを作成します。次に、このソースにリンクされたチェックボックスを追加します。

スイッチのような外観を実現するために、”Variant” プロパティを Switch に設定します。

そして、”loadEmployees” 関数をチェックボックスの “On Change” イベントに関連付けます。

イベントの詳細については、Qodly Events Documentationを参照してください。

部署によるフィルタリング

部署でフィルタリングするには、4Dのドロップダウンに似たselectBoxを使用します。

2つのデータソースを作成します：

• エンティティ選択タイプの “department”
• 「エンティティ選択タイプの “部署

次に、Qodlyソースとして “departments “を、選択された要素として “department “を設定し、selectBoxコンポーネントを追加します。

次に、selectBoxの中に、ソース”$This.Name “にリンクされたテキストコンポーネントを挿入します。

最後に、SelectBoxコンポーネントの “On Change “イベントで、”department “と “year “をパラメータとして “loadEmployees “関数を呼び出します。

完了です！

データテーブルのスタイリング

最後のステップは、あなたの会社のデザインガイドラインまたはアプリケーションのビジュアルアイデンティティに合わせてデータテーブルを適合させることです。カスタマイズするには

• ウィジェットのプロパティ（色、ボーダー、その他のスタイルなど）を調整する、
• またはCSSクラスを適用します。

CSSクラスを使用すると、アプリケーション内のすべてのデータテーブルで一貫したスタイルを維持できるため、まとまりのあるユーザーエクスペリエンスを実現できるという利点があります。

次回のブログポストでは、Qodly StudioでCSSを使用する様々な可能性についてご紹介します。待ちきれない方は、Performance Reviewアプリケーションで使用されているCSSクラスを“DataTable “と呼びます。

次のステップ

おめでとうございます！これで、従業員データを表示およびフィルタリングできる機能的なページができました。このインタラクティブなシステムは、Qodlyアプリケーションでダイナミックにデータを扱うための強力な基礎となります。

データテーブルとそのアクションについての理解を深めるために、以下のリソースを参照してください：

• データテーブル コンポーネントのドキュメント
• アクションのドキュメント
• データテーブルに関するビデオをご覧ください。

それでは、また次のブログでお会いしましょう！