編集グリッド

[編集グリッド] コントロールでは、表形式レコードのリスト表示、編集、ページネーション、検索が可能です。

デモ

編集グリッド: エンティティを操作する

はじめに

このアプリでは、[編集グリッド] コントロールを使用してエンティティを操作する方法を示します。

デモアプリ (ご自身でお試しください)

デモ アプリを GitHub からダウンロード

デモ アプリをクラウドでプレビュー

デモ アプリ (使用方法)

1. デモ アプリを含む zip ファイルをダウンロードします。ファイルの内容は以下のとおりです。

   • Schema.json - アプリで使用されるエンティティのスキーマです。

   • EditGridEntity_DemoApp.uiapp - UiPath^® Apps のファイル

2. UiPath^® Data Service で Schema.json ファイルをインポートします。エンティティ (Country と Employees) とチョイス セット (Gender と Skills) の両方をインポートしてください。
3. エンティティとチョイス セットにデータを入力します。
4. UiPath^® Apps で新しいアプリを作成し、ダウンロードしたアプリをインポートします。
5. いくつかのエラーが見つかる可能性があります。エラーを修正するには、参照されている Employees エンティティを、先ほど手順 2 でインポートしたエンティティに置き換えます。
6. アプリをプレビューし、[編集グリッド] でデータを操作します。

全般

• データ ソース - グリッド内で編集するデータのソースです。Data Service エンティティや Orchestrator プロセスなどの AppsDataSource 型のオブジェクトを参照する必要があります。

  データ ソースを取得すると、グリッドはデータ列を自動的に検出します。各列の [その他] アイコンをクリックすると、次のプロパティに移動します。

  • 名前 - 列ヘッダーの表示名です。

  • ソース - 参照されるエンティティのフィールドです。

  • 編集モード ビュー - 列の操作方法を決定します。

    [編集モード ビュー] オプション	説明
    テキストボックス	列内のセルは [テキストボックス] コントロールとして機能します。
    日付の選択	列内のセルは [日付の選択] コントロールとして機能します。
    チェックボックス	列内のセルは [チェックボックス] コントロールとして機能します。
    ドロップダウン	列内のセルは [ドロップダウン] コントロールとして機能します。
    複数選択	列内のセルは [複数選択ドロップダウン] コントロールとして機能します。

  • 非表示 - true の場合、実行時に列が非表示になります。

  • 編集可能 - false の場合、列の内容を読み取り専用としてマークします。

• 新しい列を追加 - プラス記号「+」アイコンをクリックして、データに新しい列を追加します。

• 非表示 - true の場合、実行時にコントロールが非表示になります。

• 編集可能 - false の場合、コントロールを読み取り専用としてマークします。

• 行を追加 - true の場合、アプリ ユーザーが実行時に新しい行を追加できます。false の場合、ユーザーは新しい行を追加できません。

• 行を削除 - true の場合、アプリ ユーザーに行の削除を許可します。false の場合、ユーザーは行を削除できません。

• 検索 - オンの場合、組み込みの検索機能が表示されます。

注:

The Date Picker in the Edit Grid does not support editing column types which contain time values. Configure the column in your Data Service entity using the Exclude time option to avoid errors in your data.

If you need to include a column corresponding specifically to time, set the Edit mode view option of the column to the Textbox type.

イベント

• 選択した行 - 行を選択したときの動作を設定します。

• 行を追加 - 行が追加された際の挙動を設定します。

• 行を修正 - 行が修正された際の挙動を設定します。

• 行を削除 時 - 行が削除された際の挙動を設定します。

注:

更新、追加、または編集操作のエラーを表示するには、次の構文を使用します。

<PageName>.<ControlName>.<RuleName>.Error.Message

たとえば、MainPage.EmployeeDetailsGrid.UpdateEntityRecord.Error.Message です。

注:

入力/出力引数を使用して 編集グリッドを操作するには、次の構文を使用します。

Processes.ALLDATATYPES.out_datatable

例:

• 行を追加するには、 を使用します Processes.ALLDATATYPES.out_datatable.AddRow(MainPage.EditGrid.NewItem)。
• 行を削除するには、 を使用します Processes.ALLDATATYPES.out_datatable.DeleteRowAt(MainPage.EditGrid.RowIndex)。
• 行を更新するには、 を使用します Processes.ALLDATATYPES.out_datatable.UpdateRowAt(MainPage.EditGrid.RowIndex, MainPage.EditGrid.SelectedItem)。

スタイル

• コントロールの配置 - 既定では、親の配置を継承します。親とは異なる配置を設定することもできます。既定の親の配置に戻すには、現在優先されているオプションの選択を解除します。

  注: 配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。

• 背景色 - [グリッド ヘッダー] と [グリッド本体] の背景色です。

• 枠線 - コントロールの枠線です。枠線の太さ、色、半径を設定できます。

• フォント - 列のヘッダーと列の本文のテキスト両方のフォント属性 (フォント ファミリ、サイズ、色、スタイル (太字、斜体、下線) など) です。既定では、このコントロールの直接の親コンテナーのフォント ファミリが継承されます。その場合、フォントに「Inherited」と表示されます。

• マージン - コントロールのマージンです。既定では 4px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティの組み合わせは、[マージン] セクションの右側にある [リンク] ボタンをクリックして解除できます。

• サイズ - コントロールの幅と高さです。既定では、サイズは [auto] に設定されています。最小値または最大値を設定するには、3 点リーダー メニューのアイコン (...) をクリックします。コントロールのサイズがオプションよりも小さい場合は、スクロール バーが表示されます。

VB のプロパティ

VB のプロパティ	データ型	説明
SelectedItem	Apps.Controls.TabularInitClass	コントロールで現在選択されている項目を参照します。
DataSource	Apps.Controls.ListSource(Of Apps.Controls.TabularInitClass)	[表] コントロール内の値のデータ ソースを参照します。
NewItem	Apps.Controls.TabularInitClass	[行を追加] オプションによって作成される項目を参照します。[行の追加時] イベントは、このプロパティを参照します。
Editable	Boolean	[編集グリッド] を対話可能にするかどうかを指定します。
AddRows	Boolean	[編集グリッド] に行を追加できるかどうかを指定します。
DeleteRows	Boolean	[編集グリッド] から行を削除できるかどうかを指定します。
RowIndex	Integer	更新操作や削除操作の対象となる行のインデックスを参照します。データセット全体がメモリ内にあるプロセスの連携に使用する必要があります。
Search	Boolean	検索機能を有効化/無効化します。true の場合、検索が有効化されます。
Value	Apps.Controls.TabularInitClass	コントロールで現在選択されている値です。
Hidden	Boolean	true の場合、実行時にコントロールが非表示になります。
Disabled	Boolean	true の場合、実行時にコントロールを無効化します。

複雑なデータを AppsDataSource に変換する

データ テーブルまたは複雑なデータ型を AppsDataSource に変換するには、データ テーブルを変数に保存してから、.ToListSource メソッドを使用してデータをデータ テーブルから AppsDataSource に変換します。

1. データを DataTable 型の変数に保存します。たとえば、変数に「dt」という名前を付けます。
2. [表] コントロールの [データ ソース] フィールドで、以下の式を使用します。

   dt.ToListSource()

一般的に、複雑なオブジェクトは以下の構文を使用して AppsDataSource に変換できます。

Processes.ALLDATATYPES.out_datatable.ToListSource()

[編集グリッド] コントロールでデータ テーブルを使用する

アプリにすでに DataTable オブジェクトがあることを確認します。

DataTables オブジェクトは、プロセスの入力引数、出力引数、または入力/出力引数として定義できます。これらの DataTable オブジェクトを使用するには、DataTable オブジェクトが引数として使用されるプロセスを参照する必要があります。

注:

DataTable では列内のプリミティブのみがサポートされています。列内の複合型引数は、DataTable では機能しません。

たとえば、DataTable オブジェクトを引数として持つ「Process_A」という名前のプロセスがあるとします。

入力引数	in_dt1
出力引数	out_dt1
入力/出力引数	inout_dt

編集グリッド

1. [編集グリッド] コントロールの [全般] タブに移動します。

2. コントロールの [データ ソース] フィールドで式エディターを開き、次の式を書き込みます。

   Processes.<process_name>.<datatable_output_argument>.ToListSource

   例:

   Processes.Process_A.out_dt1.ToListSource

3. 追加、編集、削除などの操作をデータ テーブルの行に対して実行するには、以下の手順を実行します。

   1. [編集可能]、[行を追加]、および [行を削除] の各プロパティが true に設定されていることを確認します。

      

   2. [編集グリッド] コントロールの [イベント] タブに切り替えて、対応するルールを設定します。

      1. 行を追加するには、[行を追加] の [ルールを作成] をクリックし、[値を設定] ルールを使用します。

         設定する項目	Processes.<process_name>.<datatable_output_parameter> 例: Processes.Process_A.out_dt1
         値 (Value)	Processes.<process_name>.<datatable_output_parameter>.AddRow(MainPage.EditGrid.NewItem) 例: Processes.Process_A.out_dt1.AddRow(MainPage.EditGrid.NewItem)

      2. 行を削除するには、[行を削除] の [ルールを作成] をクリックし、[値を設定] ルールを使用します。

         設定する項目	Processes.<process_name>.<datatable_output_parameter> 例: Processes.Process_A.out_dt1
         値 (Value)	Processes.<process_name>.<datatable_output_parameter>.DeleteRowAt(MainPage.EditGrid.RowIndex) 例: Processes.Process_A.out_dt1.DeleteRowAt(MainPage.EditGrid.RowIndex)

      3. 行を変更するには、[行を変更] の [ルールを作成] をクリックし、[値を設定] ルールを使用します。

         設定する項目	Processes.<process_name>.<datatable_output_parameter> 例: Processes.Process_A.out_dt1
         値 (Value)	Processes.<process_name>.<datatable_output_parameter>.UpdateRowAt(MainPage.EditGrid.RowIndex, MainPage.EditGrid.SelectedItem) 例: Processes.Process_A.out_dt1.UpdateRowAt(MainPage.EditGrid.RowIndex, MainPage.EditGrid.SelectedItem)

[編集グリッド] コントロールを持つエンティティを使用する

以下の例は、エンティティを [編集グリッド] コントロールにバインドし、コントロールとエンティティ固有のルールを使用して CRUD 操作を実行する方法を示しています。

使用されるエンティティは "Employee" と呼ばれ、以下のフィールドがあります。

• 名前

• 年齢

• dateOfBirth

• Gender

• チーム (Team)

• Date of Joining

• IsFullTime

• スキル

エンティティ レコードを表示する

1. 新しい VB アプリを作成し、Employee エンティティをアプリに追加します。
2. [編集グリッド] コントロールをアプリに追加します。
3. [編集グリッド] コントロールの [データ ソース] フィールドで、[クエリ ビルダー] を使用して Employee エンティティを選択します。コントロールの列に、エンティティのフィールドが自動的に入力されます。
4. すべての列で、[編集モード ビュー] ドロップダウンが以下のように正しいデータ型に設定されていることを確認します。

   オプション	説明
   dateOfBirth	日付の選択
   年齢	テキストボックス
   名前	テキストボックス
   Gender	ドロップダウン
   チーム (Team)	ドロップダウン
   Date of Joining	日付の選択
   IsFullTime	チェックボックス
   スキル	複数選択

   Gender と Team は、エンティティのチョイス セットです。これらの列に対して [編集モード ビュー] で [ドロップダウン] を選択すると、[リストのソース] と [列] の 2 つの新しいプロパティが表示されます。
5. チョイス セットのオプションを取得するには、以下の手順を実行します。
   1. [リストのソース] フィールドでは、以下の構文を使用します。

      GetChoiceSet("Choiceset Name")

      たとえば、Gender 列と Team 列の場合、[リストのソース] フィールドで以下の構文が指定されている必要があります。

      • Gender - GetChoiceSet("Gender")
      • Team - GetChoiceSet("Team")
   2. [列] フィールドに「"Name"」を書き込みます。
      

   スキルは、複数選択が可能なエンティティのチョイス セットです。これらの列に対して [編集モード ビュー] で [複数選択] を選択すると、[リストのソース] と [列] の 2 つの新しいプロパティが表示されます。

6. Gender や Team の場合と同様に Skills 列を設定します。
7. [編集グリッド] コントロールの [イベント] タブに移動します。
8. [行を追加] 済みのイベントに対して、次のルールを作成します。
   1. [エンティティ レコードを作成] ルールを追加します。
   2. [レコードを作成するエンティティを選択します。] で、Employee エンティティを選択します。
   3. [設定する値] フィールドで、以下を更新します。
      • Name プロパティ - MainPage.EditGrid.NewItem.Name
      • Date of Joining プロパティ - MainPage.EditGrid.NewItem.Dateofjoining
      • Age プロパティ - MainPage.EditGrid.NewItem.Age
      • Gender プロパティ - MainPage.EditGrid.NewItem.Gender
      • Team プロパティ - MainPage.EditGrid.NewItem.Team
      • IsFullTime プロパティ - MainPage.EditGrid.NewItem.Isfulltime
      • Skills プロパティ - MainPage.EditGrid.NewItem.Skills
9. [行を修正] イベントに対して、次のルールを作成します。
   1. [エンティティ レコードを更新] ルールを追加します。
   2. [レコードを更新するエンティティを選択します。] で、Employee エンティティを選択します。
   3. [エンティティ レコード ID] に、以下の式を書き込みます。

      MainPage.EditGrid.SelectedItem.Id

   4. [設定する値] フィールドで、以下を更新します。
      • Name プロパティ - MainPage.EditGrid.SelectedItem.Name
      • Date of Joining プロパティ - MainPage.EditGrid.SelectedItem.Dateofjoining
      • Age プロパティ - MainPage.EditGrid.SelectedItem.Age
      • Gender プロパティ - MainPage.EditGrid.SelectedItem.Gender
      • Team プロパティ - MainPage.EditGrid.SelectedItem.Team
      • IsFullTime プロパティ - MainPage.EditGrid.SelectedItem.Isfulltime
      • Skills プロパティ - MainPage.EditGrid.SelectedItem.Skills
10. [行を削除] イベントに対して、次のルールを作成します。
    1. [エンティティ レコードを削除] ルールを追加します。
    2. [削除するエンティティ レコードを選択] で [Employee] エンティティを選択します。
    3. [エンティティ レコード ID] に、以下の式を書き込みます。

       MainPage.EditGrid.SelectedItem.Id

11. アプリをプレビューして、[編集グリッド] のさまざまな機能 (ページネーション、検索、新しい行の追加、行の更新、行の削除など) を使用できます。

[編集グリッド] コントロール内のリレーションシップの使用

[編集グリッド] コントロールで Relationship 型のエンティティ フィールドを使用するには、以下の手順を実行します。

1. [編集モード ビュー] フィールドで、リレーションシップ フィールドを [ドロップダウン] として設定します。
2. 後続の [リストのソース] プロパティで、以下の式を使用します。

   Fetch(of <entity_name>)(Nothing, Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})

3. 後続の [列] プロパティで、"Name" を書き込みます。
4. エンティティ関連のルール (例: [エンティティ レコードを作成]、[エンティティ レコードを更新]、[エンティティ レコードを削除]) では、リレーションシップ フィールドの ID を以下のように渡します。

   MainPage.EditGrid.SelectedItem.<entity_name>.Id