apps
2024.10
true
重要 :
このコンテンツの一部は機械翻訳によって処理されており、完全な翻訳を保証するものではありません。
UiPath logo, featuring letters U and I in white
Apps ユーザー ガイド
Automation CloudAutomation Cloud Public SectorAutomation Suite
Last updated 2024年11月11日

カスタム リスト

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

プロパティ

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

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

ThisRow

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

制限事項

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

    • 編集グリッド

    • カスタム リスト

    • カスタム HTML

    • タブ

    注:

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

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

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

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

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

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

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

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

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

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

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

デモ

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

はじめに

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

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

デモ アプリ (使用方法)

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

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

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

全般

カスタム リスト

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

テンプレート

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

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

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

イベント

カスタム リスト

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

テンプレート

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

スタイル

カスタム リスト

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

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

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

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

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

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

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

    注:
    • [横方向] レイアウトでは、[幅] はピクセル単位、[高さ] はピクセル単位、%em、または auto で設定されます。
    • [縦方向] レイアウトでは、[高さ] はピクセル単位、[幅] はピクセル単位、%em、または auto で設定されます。
    • [グリッド] レイアウトでは、[高さ][幅] もピクセル単位で指定する必要があります。%emauto などの相対単位は使用できません。
  • マージン- レイアウトのマージンです。既定では 4px のマージンが設定されています。[上/下] および [左/右] のプロパティがそれぞれ組み合わされています。これらのプロパティの組み合わせは、[マージン] セクションの右側にある [リンク] ボタンをクリックして解除できます。

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

テンプレート

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

    注: 配置は、親に対して選択したレイアウト ([縦方向]/[横方向]) によって異なります。
  • レイアウト - テンプレート内のコントロールの位置を決定します。

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

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

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

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

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

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

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

    • Flex basis - Flex 項目の元のサイズを設定してから、余分なスペースを均等に割り付けるか、除去します (px%emauto)。
    • 伸び率 - 余分なスペースがある場合、flex 項目を、他の項目を基準にしてどれだけ拡大するかを指定します。

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

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

VB のプロパティ

プロパティ名

データ型

アクセス権限

無効

Boolean

読み取り/書き込み

-

非表示

Boolean

読み取り/書き込み

-

SelectedItem

データ ソースの型と [カスタム リスト] 内のコントロールのリストの和集合

読み取り/書き込み

[データ ソース] がエンティティであるシナリオを想定すると、このエンティティの行にアクセスする値は、以下のようになります。

MainPage.CustomList.SelectedItem.dataMainPage.CustomList.SelectedItem.data

カスタム リスト[日付の選択] があるシナリオを想定すると、この [日付の選択] コントロールにアクセスする値は、以下のようになります。

MainPage.CustomList.SelectedItem.Datepicker.valueMainPage.CustomList.SelectedItem.Datepicker.value 

SelectedItemIndex

Integer

読み取り専用

現在選択されている行のインデックスを返します。

MainPage.CustomList.SelectedItemIndexMainPage.CustomList.SelectedItemIndex

ThisRow

Data Source フィールドと同じ

読み取り専用

データ ソースの現在のレコードを参照します。カスタム リスト内のフィールドを設定するために使用します。

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

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

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

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

ThisRow.FirstnameThisRow.Firstname

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

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

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

ThisRow("FieldName")ThisRow("FieldName")

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

このページは役に立ちましたか?

サポートを受ける
RPA について学ぶ - オートメーション コース
UiPath コミュニティ フォーラム
Uipath Logo White
信頼とセキュリティ
© 2005-2024 UiPath. All rights reserved.