ドロップダウンウィジェット (テーマ指定可能)
 |
このウィジェットはレガシーリストウィジェットのコンボボックスビューに置き換わるものです。
|
ドロップダウンウィジェットを使用すると、ランタイムでアイテムのリストを開くドロップダウンメニューを追加できます。このウィジェットでは単一選択または複数選択を設定できます。選択したアイテムはウィジェットの SelectedText プロパティに保存され、ほかのウィジェット、関数、またはデータサービスの入力としてバインドできます。インフォテーブルを返すデータサービスを作成することで、アイテムとその状態を定義できます。ウィジェットのプロパティを使用して実行可能なコンフィギュレーションの例を以下に示します。
• アイテムのラベルをドロップダウンリストの左、右、中央に整列する
• 単一選択または複数選択を有効にする
• フィルタボックスを追加して、ユーザーが長いリスト内のアイテムをより短時間で見つけられるようにする
• リストアイテムにスタイルフォーマットを適用する
| | ドロップダウンは、プラットフォーム内の標準ウィジェットとして、および SDK からインポート可能な Web コンポーネントとして使用できます。 |
データ形式
ドロップダウンウィジェットのリストアイテムを設定するには、以下のフィールド定義を含むインフォテーブルを返すデータサービスを作成する必要があります。
表示フィールド | 値フィールド | 状態フィールド | |
|---|---|---|---|
ベースタイプ | STRING | STRING | ブール |
説明 | ドロップダウンリストに表示するアイテムのラベル。 | 各アイテムに使用する実際の値。この値は、ほかのウィジェットまたはデータサービスにバインドするときにウィジェットの SelectedItems プロパティで使用されます。 | アイテムを有効にするか無効にするかを指定します。無効なアイテムを選択することはできません。 |
行の例 | English | en | True |
インフォテーブルの各行は、ドロップダウンリスト内のアイテムを定義します。アイテムを静的に生成するようにデータサービスを設定することも、ほかのウィジェットまたはデータサービスからの入力に基づいて動的に生成するように設定することもできます。
リストアイテムのデータのバインド
コンフィギュレーションデータをドロップダウンウィジェットにバインドするには、次の手順を実行します。
1. 「データ」パネルを使用して、リストアイテムのデータサービスが含まれている Thing を追加します。
2. サービスの All Data プロパティをウィジェットの Data プロパティにバインドします。
3. このサービスを Loaded マッシュアップイベントにバインドします。
4. 「プロパティ」パネルで、ドロップダウンリストアイテムの設定に使用するインフォテーブル列を指定します。
◦ DisplayField - アイテムのラベルに使用する列を選択します。
◦ ValueField - アイテムの実際の値に使用する列を選択します。
◦ StateField - アイテムの状態に使用する列を選択します。
5. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
ランタイムで、ドロップダウンリストを開くとリストアイテムが表示されます。
リストとドロップダウンの間のスペースの設定
ドロップダウンとアイテムリストの間のスペースを指定するには、ウィジェットの ListMarginTop プロパティを使用します。デフォルトでは、スペースは 8 ピクセルに設定されています。スペースを除去するには、このプロパティの値を 0 に設定します。
選択をクリアするためのアイテムの追加
デフォルトでは、ドロップダウンウィジェットでユーザーがランタイムにリスト選択をクリアすることはできません。ユーザーがランタイムに選択をクリアできるようにするには、プロパティ ClearSelectionItem を有効にします。デフォルトのラベル「(なし)」が付いた追加のアイテムがリストに追加されます。ユーザーはドロップダウンリストでの選択を回避するためにこのアイテムを選択できます。
ウィジェットのプロパティ
プロパティ名 | 説明 | ベースタイプ | デフォルト値 | バインド可能か(Y/N) | ローカライズ可能か(Y/N) | ||
|---|---|---|---|---|---|---|---|
HintText | このフィールドに何を入力すべきかを示すプレースホルダーテキストが表示されます。 | STRING | 以下のいずれかを選択します。 | Y | Y | ||
Label | ウィジェットのラベルとして表示されるテキスト。 | STRING | 該当なし | Y | Y | ||
LabelAlignment | ラベルを左、右、または中央に整列できます。 | STRING | 左 | Y | N | ||
Alignment | ドロップダウンリスト内のテキストアイテムを左、右、または中央に整列できます。 | STRING | 左 | Y | |||
ClearSelectionItem | 空の選択アイテムをドロップダウンリストに追加します。ユーザーが選択を解除できるようになります。 | BOOLEAN | True | Y | |||
ClearSelectionLabel | ドロップダウンリスト内の空の選択アイテムのカスタムテキストを指定します。デフォルトでは「なし」に設定されています。 | STRING | なし | Y | Y | ||
Disabled | このプロパティを使用して、マッシュアップ内のウィジェットを無効にします。ウィジェットはマッシュアップ内に表示されますが、クリックできません。 | BOOLEAN | False | Y | N | ||
ShowListFilter | ドロップダウンリスト内にフィルタを追加し、ランタイムでリストアイテムをフィルタできます。 | BOOLEAN | False | N | N | ||
FilterHintText | ドロップダウンリストのフィルタにヒントテキストを表示します。 | STRING | 該当なし | Y | Y | ||
ListMaxHeight | 表示されるドロップダウンリストの最大高さを設定できます。 ドロップダウンリスト内のアイテムの数が、設定されているリストの高さを超える場合、スクロールバーが表示に追加されます。 | NUMBER | 該当なし | Y | N | ||
StateField | ドロップダウンリスト内の品目の状態を表すインフォテーブル。 このプロパティを使用して、ドロップダウンリスト内の品目を有効または無効にできます。 | INFOTABLE | 該当なし | N | N | ||
MultiSelect | ドロップダウンリスト内の複数のアイテムを選択できます。 | BOOLEAN | False | N | N | ||
AutoSelectFirstRow | ドロップダウンリストで 1 つ目の行を選択済みオプションとして設定できます。
| 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 | このプロパティは、単一選択モードを使用している場合、バインド方向に応じて、次の 2 つの方法で機能します。 • 入力 - プロパティの値と一致するラベルの付いたアイテムを選択します。 • 出力 - リストで選択されているアイテムのテキストを読み込みます。
| STRING | 該当なし | Y | Y | ||
SelectedItems | リスト内の選択したアイテムのインフォテーブルソース。 | INFOTABLE | 該当なし | Y | N | ||
ListFormat | ダイアログボックスが開き、ウィジェットデータのレンダリング規則とフォーマット規則を指定できます。ThingWorx 9.1 以降では、ウィジェットに状態フォーマットを適用することもできます。 | レンダラーと状態フォーマット | 該当なし | N | N | ||
ListMarginTop | ドロップダウンとアイテムリストの間のスペースを設定します。 | NUMBER | 8 | N | N | ||
TooltipField | ドロップダウンに関連付けられているラベルや、ドロップダウンで現在選択されている値にマウスポインタを合わせたときに、ツールヒントテキストを表示します。
| STRING | 該当なし | Y | Y | ||
TooltipIcon | ドロップダウンウィジェットのツールヒントのアイコンイメージを設定します。
| メディアエンティティ | 該当なし | N | N |
ドロップダウンウィジェットのデータの検証
検証プロパティを使用して、ランタイムでアイテムの選択を検証できます。たとえば、ドロップダウンリストでの選択を必須にして、アイテムが選択されていない場合にエラーメッセージを表示できます。
検証プロパティの詳細については、ウィジェットへの検証の適用を参照してください。
次の表に、ThingWorx 9.3.4 以降の「検証」パネルで使用可能な検証プロパティを示します。
プロパティ | 説明 | ベースタイプ | デフォルト値 | バインド可能か (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 |
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 |