グリッド コンポーネントを使用する

グリッド コンポーネントでは、行と列をいくつでも表示できます。また、実行時のページネーション、フィルター処理、データの並べ替え、列幅のサイズ変更も可能です。

前提条件

UiPath.Form.Activities v2.0.2 パッケージ以降がインストールされている必要があります。

並べ替え可能

列内のデータを昇順または降順に並べ替えることができます。実行時にフォーム レンダラーでデータを並べ替えます。

グリッド内のデータは、入力データ テーブルと同じ順序で表示されます。グリッド内のすべてのデータを並べ替えるには、フォーム レンダラーで任意の列ヘッダーをクリックします。

• 1 回クリックすると、データが昇順に並べ替えられます。

• 2 回クリックすると、データが降順に並べ替えられます。

• 3 回クリックすると、元の順序が復元されます。

  

フィルター設定可能

各列内のデータをフィルター処理できます。実行時にフォーム レンダラーでデータをフィルター処理します。

列内のデータをフィルター処理するには、以下の手順を実行します。

1. 列ヘッダー上でホバーし、ハンバーガー メニュー をクリックします。
2. フィルター処理操作を選択します。
3. ハンバーガー メニューの [フィルター] フィールドに値を入力します。[フィルター] フィールドの入力値は、フィルター処理操作の条件です。

データの種類に応じて、以下のフィルター操作を利用できます。

フィルター操作	テキスト	Number	日付/時刻
次の値を含む	✅	❌	❌
次の値を含まない	✅	❌	❌
次に等しい	✅	✅	✅
次の値と等しくない	✅	✅	✅
次で始まる	✅	❌	❌
次で終わる	✅	❌	❌
次の値より小さい	❌	✅	✅
次の値以下	❌	✅	❌
次の値より大きい	❌	✅	✅
次の値以上	❌	✅	❌
検索範囲	❌	✅	✅
空白	✅	✅	✅
空白でない	✅	✅	✅

ヒント:

テキストデータと数値データに適用されるすべてのフィルター処理操作には、演算子を使用してさらにフィルター処理操作を追加できます。

• AND - 両方のフィルター処理操作が True の場合にデータを表示します。
• OR - いずれかのフィルター処理操作が True の場合にデータを表示します。

サイズ変更可能な列

実行時にフォーム レンダラーで列の幅を変更できます。[Column(s) Resizable] 機能を使用すると、列内のデータを見やすく表示することができます。

列のサイズを変更するには、列を区切る枠線上にカーソルをホバーし、双方向矢印 が表示されるまで待ちます。目的の列幅になるまで、枠線をドラッグします。

ページネーション

グリッド コンポーネントのデータを、番号付きのページに分割表示できます。[ページネーション] 機能では、ページごとの項目数を設定することもできます。

ページごとの項目数を設定するには、グリッド コンポーネントの [表示] タブに移動し、[ページあたりの項目] ドロップダウン リストから値を選択します。ページごとに表示する項目数として、10、50、または 100 を選択できます。

実行時に、フォーム レンダラーの下部に以下を表示できます。

• 表示しているページ内の行数
• グリッド内の行の合計数
• グリッド内の合計ページ数のうち、表示しているページの番号

< > の矢印をクリックしてページを移動したり、矢印 をクリックして最初のページに移動したり、矢印 をクリックして最後のページに移動したりできます。

チュートリアル

グリッド コンポーネントを使用するには、以下の手順を実行します。

1. フォーム デザイナーに グリッド コンポーネントをドラッグ アンド ドロップします。

2. [フィールド キー] タブの [プロパティ名]を、[フォームを作成] アクティビティの [フォーム フィールド コレクション] プロパティの DataTable 型入力引数に変更します。

   この例では、「fruitDataTableArg」と入力します。この DataTable 引数で、fruit_table.csv ファイル内のデータがフォームにバインドされます。

3. [表示] タブで、グリッド コンポーネントに適用する機能をオンにします。この例では、[Sortable]、[Filterable]、[Column(s) Resizable]、[Pagination] の 4 つのチェックボックスをすべてオンにします。

4. [Items Per Page] フィールドで、フォームに表示する、ページごとの項目数をドロップダウン リストから選択します。この例では、10 を選択します。

5. コンポーネントを保存します。

6. グリッド内に、入力データテーブル内の列の値に一致するフォーム コンポーネントをドラッグ アンド ドロップします。この例では、テキスト フィールド コンポーネント、数コンポーネント、および日付/時刻コンポーネントをそれぞれ 1 つドラッグ アンド ドロップします。

   1. テキスト フィールド コンポーネントの [フィールド キー] タブの [プロパティ名] を、データテーブル内でテキスト データが含まれている列の名前に変更します。この例では、[プロパティ名] を fruit に変更します。
   2. 数コンポーネントの [フィールド キー] タブの [プロパティ名] を、データテーブル内で数値データが含まれている列の名前に変更します。この例では、[プロパティ名] を qty に変更します。
   3. 日付/時刻コンポーネントの [フィールド キー] タブの [プロパティ名] を、データテーブル内で日付/時刻データが含まれている列の名前に変更します。この例では、[プロパティ名] を expdate に変更します。
   注:

   フォーム コンポーネントは、閉じる前に必ず保存してください。

7. フォームを保存します。

8. ワークフローを実行し、グリッド コンポーネントの機能を確認します。

サンプル ワークフロー

ワークフローの完成品を確認するため、または今後の参考資料として、サンプル XAML をダウンロードできます。