リストウィジェット (テーマ指定可能)
リストウィジェットは、データ行を表示可能なウィジェットです。
 |
リストウィジェットは、プラットフォーム内の標準ウィジェットとして、および SDK からインポート可能な Web コンポーネントとして使用できます。
|
データ形式
次の構造に従ってフォーマットされているインフォテーブルのデータを使用して、リストウィジェットのアイテムを設定できます。
|
フィールド定義
|
表示フィールド
|
値フィールド
|
状態フィールド
|
|---|---|---|---|
|
説明
|
ランタイムでのリストアイテムのラベルを表します。
|
リストアイテムの実際の値を表します。この値は SelectedText プロパティにも保存されます。
|
リスト内のアイテムの状態を表すオプションのインフォテーブルフィールド。このプロパティを使用して、リスト内のアイテムを有効または無効にできます。サポートされている値: Enabled または Disabled
|
|
ベースタイプ
|
STRING または NUMBER
|
STRING または NUMBER
|
STRING
|
リストアイテムの定義
リストアイテムを定義するには、必要なデータフォーマットを使用してフォーマットされているインフォテーブルをバインドします。
1. 「データ」パネルで、ウィジェットのリストアイテムを定義するデータサービスを追加します。前のセクションで概要を説明したインフォテーブルのフォーマットを使用してアイテムを定義できます。
2. データサービスの All Data プロパティをリストウィジェットの Data プロパティにバインドします。バインドが作成されます。
3. 「プロパティ」パネルで、次の各プロパティのインフォテーブルフィールドを選択します。
◦ DisplayField - アイテムのラベルのデータ。
◦ ValueField - アイテムのラベルの実際の値。
◦ StateField - 各データアイテムの有効/無効状態を定義するオプションのフィールド。
4. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
リストアイテムはランタイムでウィジェット内に表示されます。
複数選択の有効化
ウィジェットの MutliSelect プロパティを true に設定することで、リストでの複数選択を有効にできます。複数選択では、リスト内の 1 つ以上のアイテムを選択できるようにチェックボックスが追加されます。さらに、すべてのアイテムを選択解除または選択するための制御がアイテムの上に追加されます。
単一選択の設定
デフォルトでは、ウィジェットでは単一アイテムの選択がサポートされています。選択したアイテムは背景色でハイライトされます。
単一選択モードを使用しているときにラジオボタン選択を有効にするには、プロパティ RadioButtonSelection を true に設定します。ボタンはリストの左側に表示されます。リストアイテムはラジオボタングループとして表示され、ユーザーは一度に 1 つのアイテムのみを選択できます。
フィルタの追加
ウィジェットの Filter プロパティを true に設定することで、リストにフィルタを追加できます。リストの上部にフィルタが表示され、フィルタを使用してリスト内のアイテムを簡単にフィルタできます。
アイテムの選択解除
ウィジェットの ClearSelection プロパティを true に設定することで、単一選択リスト内の選択を解除するための空のアイテムを追加できます。ClearSelectionLable プロパティを使用して、空のアイテムのラベルを変更することもできます。
| | 複数選択モードが有効になっている場合、このプロパティは使用できません。 |
状態のフォーマットの適用
State Formatting を使用することで、文字列または数値に基づいてリストアイテムの現在のステータスをハイライトできます。詳細については、「例: リストウィジェットへの状態フォーマットの適用 (ptc.com)」を参照してください。
ウィジェットのプロパティ
プロパティ名 | 説明 | ベースタイプ | デフォルト値 | バインド可能か (Y/N) | ローカライズ可能か (Y/N) | ||
|---|---|---|---|---|---|---|---|
Label | ウィジェットのラベルとして表示されるテキスト。 | STRING | リスト | Y | Y | ||
LabelAligment | ラベルを左、右、または中央に整列します。 | STRING | 左 | Y | N | ||
Aligment | リスト内のアイテムを左、右、または中央に整列します。 | STRING | 左 | Y | N | ||
ClearselectionItem | 空の選択アイテムをリストに追加します。ユーザーが選択を解除できるようになります。 | BOOLEAN | True | Y | N | ||
ClearselectionLabel | リスト内の空の選択アイテムのカスタムテキストを指定します。デフォルトでは「なし」に設定されています。 | STRING | なし | Y | Y | ||
MultiSelect | リスト内の複数のアイテムを選択できます。 | BOOLEAN | False | N | N | ||
StateField | リスト上のアイテムを無効または有効にするときに使用するインフォテーブルを指定します。 | INFOTABLE | 該当なし | N | N | ||
Disabled | マッシュアップ内のウィジェットを無効にします。ウィジェットはマッシュアップ内に表示されますが、クリックできません。 | BOOLEAN | False | Y | N | ||
ShowListFilter | ランタイムでリストアイテムをフィルタするためのフィルタをリスト内に追加します。 | BOOLEAN | False | N | N | ||
FilterHintText | リストのフィルタにヒントテキストを表示します。 | STRING | 該当なし | N | Y | ||
AutoSelectFirstRow | リストの 1 つ目の行を選択済みオプションとして設定します。
| BOOLEAN | 該当なし | N | N | ||
RadioButtonSelection | 単一選択モードの使用時に、リストアイテムの隣にラジオボタンを表示します。 | BOOLEAN | False | N | N | ||
RowHeight | 1 行の行高さを設定します。 | NUMBER | 34 | Y | N | ||
CustomClass | ウィジェットの最上位の Div に CSS を定義します。スペースで区切って、複数のクラスを入力できます。 | STRING | 該当なし | Y | N | ||
TabSequence | ユーザーが Tab キーを押したときにウィジェットがハイライトされる順序。 | NUMBER | 該当なし | N | N | ||
Data | ウィジェットデータのインフォテーブルまたはデータソース。 | INFOTABLE | 該当なし | Y | N | ||
DisplayField | データ値を表すインフォテーブルフィールド。 | 該当なし | 該当なし | N | N | ||
ValueField | SelectedText に使用するフィールド。 | 該当なし | 該当なし | N | N | ||
SelectedText | リストからアイテムを選択できます。 | STRING | 該当なし | Y | Y | ||
SelectedItems | リスト上の選択したアイテムのインフォテーブルソースを定義します。 | INFOTABLE | 該当なし | Y | N | ||
DoubleClicked | このウィジェットをダブルクリックすると、イベントがトリガーされます。 | 該当なし | 該当なし | Y | N | ||
ListFormat | このプロパティは、データに特定のレンダリングを適用するときに使用します。 このプロパティでは次のレンダリングフォーマットがサポートされています: NUMBER、INTEGER、LONG、DATETIME、LOCATION、VEC2、VEC3、VEC4、THINGCODE、HYPERLINK、IMAGELINK、IMAGE、STRING、BOOLEAN、TAGS、HTML、THINGNAME、THINGSHAPENAME、THINGTEMPLATENAME、USERNAME、MASHUPS、INFOTABLE、PASSWORD、XML、JSON、VALUES。 | 該当なし | 該当なし | 該当なし | 該当なし |
リストウィジェットのデータの検証
検証プロパティを使用して、ランタイムでリストアイテムの選択を検証できます。たとえば、リストでアイテムを必須にして、アイテムが選択されていない場合にエラーメッセージを表示できます。
検証プロパティの詳細については、ウィジェットへの検証の適用を参照してください。
次の表に、「検証」パネルで使用可能な検証プロパティを示します。
プロパティ | 説明 | ベースタイプ | デフォルト値 | バインド可能か (Y/N) | ローカライズ可能か (Y/N) |
|---|---|---|---|---|---|
CriteriaMessage | 検証に失敗したとき、および検証基準で表示されるメッセージ。 | STRING | 該当なし | Y | Y |
CriteriaMessageDetails | 検証基準および失敗のメッセージで表示される詳細。 | STRING | 該当なし | Y | Y |
RequiredMessage | ValueRequired が true に設定されているときにアイテムが選択されていない場合に表示されるメッセージ。 | STRING | 選択は必須です | Y | Y |
ShowValidationCriteria | リストを編集しているときに、必須の入力に関するヒントメッセージを表示します。 | BOOLEAN | False | Y | N |
ShowValidationFailure | 入力した値が検証に失敗したときに、失敗のメッセージを表示します。 | BOOLEAN | False | Y | N |
ShowValidationState | ユーザーがランタイムでウィジェットを操作する前に検証状態を表示するために使用できるバインド可能なサービス。デフォルトでは、検証状態はユーザー操作の後にのみ表示されます。 | Service | 該当なし | 入力 | N |
ShowValidationSuccess | 入力した値が正しく検証されたときに、成功のメッセージを表示します。 | BOOLEAN | False | Y | N |
SuccessMessage | 検証に成功したときに表示されるメッセージ。 | STRING | 該当なし | Y | Y |
SuccessMessageDetails | 検証成功のメッセージに関する詳細情報を表示するセカンダリメッセージ。 | STRING | 該当なし | Y | Y |
Validate | ウィジェットの値が変更されたときにトリガーされるバインド可能なイベント。このイベントをサービスまたは関数にバインドして、検証のパターンまたは定義式を適用します。 | イベント | 該当なし | Y | N |
ValidationCriteriaIcon | 検証基準のヒントメッセージ内に表示する SVG アイコンを選択します。 | IMAGELINK | info | N | N |
ValidationFailureIcon | 検証に失敗した場合にステータスメッセージ内に表示する SVG アイコンを設定します。 | IMAGELINK | error | N | N |
ValidationOutput | ウィジェット検証の出力を取得します。戻り値は Undefined、Unvalidated、Valid、または Invalid です。 | STRING | 該当なし | Y | N |
ValidationState | 検証状態を設定するバインド可能なプロパティ。このプロパティは Undefined、Unvalidated、Valid、または Invalid に設定できます。 | STRING | Undefined | Y | N |
ValidationSuccessIcon | 検証に成功した場合にステータスメッセージ内に表示する SVG アイコンを選択します。 | IMAGELINK | success | N | N |
ValueRequired | リスト内のアイテムの選択は必須です。 | BOOLEAN | False | Y | N |