カスタム リスト

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

プロパティ

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

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

ThisRow

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

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

制限事項

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

  • 編集グリッド

  • 表

  • カスタム リスト

  • カスタム HTML

  • タブ

  注:

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

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

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

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

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

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

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

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

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

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

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

デモ

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

はじめに

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

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

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

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

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

デモ アプリ (使用方法)

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

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

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

全般

カスタム リスト

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

テンプレート

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

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

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

イベント

カスタム リスト

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

テンプレート

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

スタイル

カスタム リスト

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

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

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

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

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

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

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

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

  注:

  • [横方向] レイアウトでは、[幅] はピクセル単位、[高さ] はピクセル単位、%、em、または auto で設定されます。
  • [縦方向] レイアウトでは、[高さ] はピクセル単位、[幅] はピクセル単位、%、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 のプロパティ

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

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

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

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

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

ThisRow.Firstname

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

Data Source フィールドでプロセスの DataTable 引数を参照するとします。

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

ThisRow("FieldName")

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