カスタム リスト

[カスタム リスト] は動的なテンプレートベースのコントロールで、非常に高い柔軟性を持つさまざまなコントロールが組み込まれています。標準のリスト コントロールとは異なり、[カスタム リスト] ではレイアウト内でさらに多くのコントロールを使用できるため、効果的なメール リスト グリッドを作成するなどのタスクに適しています。

プロパティ

[カスタム リスト] には 2 種類のプロパティがあります。1 つはメイン コントロール用、もう 1 つはその中のテンプレート用です。

[カスタム リスト] とその [テンプレート] のプロパティを切り替えるには、キャンバスでコントロールをクリックするか、画面左側のツリー ビューからコントロールを選択します。

ThisRow

ThisRow キーワードはカスタム リストのデータの各行を表します。

データ ソースの値を [カスタム リスト] 内の個々のコントロールにバインドするには、ThisRow キーワードを使用します。詳細については、例を参照してください。

制限事項

• パフォーマンス上の理由から、いくつかのコントロールは [カスタム リスト] に含めることができません。

  • 編集グリッド

  • 表

  • カスタム リスト

  • カスタム HTML

  • タブ

  注:

  4 項目を超えるリストベースのコントロールでは、[ドロップダウン] コントロールを使用することをお勧めします。

• コントロール名が IntelliSense によって検出されていても、MainPage.Header のように [カスタム リスト] コントロールを直接参照することはできません。
• [カスタム リスト] のコンテキストと他のコンテナー コントロールの間でコントロールをドラッグすると、無効な式が発生し、一部はアプリのプレビュー時にのみ表示される場合があります。これは、[カスタム リスト] のコンテキスト内のバインド (ThisRow キーワードを使用) が、[カスタム リスト] の外部では無効になるためです。

カスタム リストの最適な作成

カスタム リストを操作する最適な方法は次のとおりです。

1. Figma などのデザイン ツールを使用してカスタム リストをデザインします。

2. App Studio で [カスタム リスト] コントロールを追加したら、リストの要素ごとにコンテナーとコントロールを使用してレイアウトを作成します。

3. テキストの説明を含むサンプル行を作成します。

4. テキストの説明を式に置き換えます。

5. イベントにルールを追加します。

6. デザイン ファイルに従ってコントロール スタイルを調整します。

7. アプリをプレビューします。

全般

カスタム リスト

• データ ソース - リスト表示のデータ ソースです。有効なデータ型は DataTable と Object Array です。
• 非表示 - true に設定すると、実行時にコントロールが非表示になります。
• 無効 - false に設定すると、アプリ ユーザーがリストを操作できます。true に設定すると、リストは読み取り専用ステートになります。

テンプレート

• ツールチップ - テンプレートに表示するツールチップです。このツールチップで、テンプレートに表示する追加情報を提供します。

• 非表示 - true に設定すると、実行時にコントロールが非表示になります。

• 無効 - false に設定すると、アプリ ユーザーがテンプレートを操作できます。true に設定すると、テンプレートは読み取り専用ステートになります。

イベント

カスタム リスト

• 選択した行 - アプリ ユーザーが [カスタム リスト] で行 (テンプレート内のコントロール) を選択した際の挙動を設定します。値が変更された際の挙動を設定します。

テンプレート

• クリック時 - テンプレートがクリックされた際の挙動を設定します。

スタイル

カスタム リスト

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

  注: 配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。
• レイアウト - カスタム リスト内のテンプレートの位置をカスタマイズします。
  • 縦方向 - テンプレートは縦方向に配置されます。

  • 横方向 - テンプレートは横方向に配置されます。

  • グリッド - テンプレートはグリッド形式で配置されます。

  • 間隔 (ピクセルのみ) - テンプレートが [縦方向] または [横方向] のレイアウトで配置されている場合のテンプレート間の間隔です。

  • 左右の間隔/上下の間隔 - テンプレートが [グリッド] のレイアウトで配置されている場合のテンプレート間の左右および上下の間隔です。

  • 幅 - テンプレートの幅です。

  • テンプレートの高さ - テンプレートの高さです。

  注:

  • [横方向] レイアウトでは、[幅] はピクセル単位、[高さ] はピクセル単位、%、em、または auto で設定されます。
  • [縦方向] レイアウトでは、[高さ] はピクセル単位、[幅] はピクセル単位、%、em、または auto で設定されます。

  • [グリッド] レイアウトでは、[高さ] と [幅] の両方がピクセル単位になります。

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

• サイズ - カスタム リストのピクセル単位の [幅] と [高さ] です。既定値は次のとおりです。
  • [横方向] レイアウト: [幅] は 800 ピクセル、[高さ] は auto
  • [縦方向] レイアウト: [幅] は auto、[高さ] は 400 ピクセル
  • [グリッド] レイアウト: [幅] は 800 ピクセル、[高さ] は 400 ピクセル
  最小値または最大値を設定するには、3 点リーダー メニューのアイコン (...) をクリックします。

テンプレート

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

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

• レイアウト - テンプレート内のコントロールの位置を決定します。

  • 横方向/縦方向 - コントロールの向きです。
  • 配置- テンプレート内のコントロールの配置です。
  • 折り返しを許可 - 選択すると、テンプレートがコンテナー内で折り返されます。

  • スクロールを許可 - 選択すると、テンプレート内でのスクロールが許可されます。[スクロールを許可] を有効化するには、テンプレートの高さ (縦レイアウト) または幅 (横レイアウト) が固定である必要があります。

• 背景色 - テンプレートの背景色です。

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

• フォント - テンプレートのフォント ファミリです。テンプレート内のすべてのコントロールで同じフォント ファミリが使用されます。既定では、テンプレートはカスタム リストのフォント ファミリを継承します。

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

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

• 詳細設定 - コントロールの flex プロパティを表示します。

  • Flex basis - Flex 項目の元のサイズを設定してから、余分なスペースを均等に割り付けるか、除去します (px、%、em、auto)。

  • 伸び率 - 余分なスペースがある場合、flex 項目を、他の項目を基準にしてどれだけ拡大するかを指定します。

  • 縮み率 - 十分なスペースがない場合、flex 項目を、他の項目と比較してどれだけ縮小するかを指定します。

    詳しくは、Mozilla Developer Network のドキュメントをご覧ください。

VB のプロパティ

プロパティ名	データ型	アクセス権限	例
無効	Boolean	読み取り/書き込み	-
非表示	Boolean	読み取り/書き込み	-
SelectedItem	データ ソースの型と [カスタム リスト] 内のコントロールのリストの和集合	読み取り/書き込み	[データ ソース] がエンティティであるとします。このエンティティの行にアクセスする値は、以下のようになります。 MainPage.CustomList.SelectedItem.data カスタムリストに [日付の選択] があるとします。この [日付の選択] コントロールにアクセスする値は、以下のようになります。 MainPage.CustomList.SelectedItem.Datepicker.value
SelectedItemIndex	Integer	読み取り専用	現在選択されている行のインデックスを返します。 MainPage.CustomList.SelectedItemIndex
ThisRow	Data Source フィールドと同じ	読み取り専用	データ ソースの現在のレコードを参照します。カスタム リスト内のフィールドを設定するために使用します。

カスタム リスト要素のデータのバインドの例

データ ソースがエンティティの場合

[データ ソース] フィールドでエンティティを参照するとします。このエンティティには cvxz"FirstName".vcc という名前の列があります。

この列を [カスタム リスト] 内の [テキストボックス] コントロールにバインドするには、次の式を使用できます。

ThisRow.Firstname

データ ソースがデータ テーブルの場合

[データ ソース] フィールドでプロセスの DataTable 引数を参照するとします。

ThisRow の型は DataRow で、その値は次のように抽出できます。

ThisRow("FieldName")

必ず適切な型にキャストしてください。

デモ

カスタム リストを使用する

はじめに

このアプリはカスタム リスト機能を示します。

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

カスタム リストをご自身で試す場合はデモ アプリをご利用ください。

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

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

デモ アプリ (使用方法)

1. UiPath^® Apps で新しいアプリを作成し、ダウンロードしたデモ アプリをインポートします。

2. いくつかのエラーが見つかる可能性があります。これらを修正するには、参照されるエンティティ「Country」、「EmailInbox」、「Employees」、「Employees2」、「System Users」をご自身のテナントのエンティティに置き換えます。

3. カスタム リストのフィールドを操作するには、アプリをプレビューします。