Mashup Builder > ウィジェット > 標準ウィジェット > ドロップダウンウィジェット (テーマ指定可能)
ドロップダウンウィジェット (テーマ指定可能)
* 
このウィジェットはレガシーリストウィジェットのコンボボックスビューに置き換わるものです。
ドロップダウンウィジェットを使用すると、ランタイムでアイテムのリストを開くドロップダウンメニューを追加できます。このウィジェットでは単一選択または複数選択を設定できます。選択したアイテムはウィジェットの SelectedText プロパティに保存され、ほかのウィジェット、関数、またはデータサービスの入力としてバインドできます。インフォテーブルを返すデータサービスを作成することで、アイテムとその状態を定義できます。ウィジェットのプロパティを使用して実行可能なコンフィギュレーションの例を以下に示します。
アイテムのラベルをドロップダウンリストの左、右、中央に整列する
単一選択または複数選択を有効にする
フィルタボックスを追加して、ユーザーが長いリスト内のアイテムをより短時間で見つけられるようにする
リストアイテムにスタイルフォーマットを適用する
* 
ドロップダウンは、プラットフォーム内の標準ウィジェットとして、および SDK からインポート可能な Web コンポーネントとして使用できます。
データ形式
ドロップダウンウィジェットのリストアイテムを設定するには、以下のフィールド定義を含むインフォテーブルを返すデータサービスを作成する必要があります。
表示フィールド
値フィールド
状態フィールド
ベースタイプ
STRING
STRING
STRING
説明
ドロップダウンリストに表示するアイテムのラベル。
各アイテムに使用する実際の値。この値は、ほかのウィジェットまたはデータサービスにバインドするときにウィジェットの SelectedItems プロパティで使用されます。
アイテムを有効にするか無効にするかを指定するオプションのフィールド。サポートされている値: Enabled または Disabled
行の例
English
en
Enabled
インフォテーブルの各行は、ドロップダウンリスト内のアイテムを定義します。アイテムを静的に生成するようにデータサービスを設定することも、ほかのウィジェットまたはデータサービスからの入力に基づいて動的に生成するように設定することもできます。
リストアイテムのデータのバインド
コンフィギュレーションデータをドロップダウンウィジェットにバインドするには、次の手順を実行します。
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
ListMaxWidth
ドロップダウンリストの最大幅を設定できます。この値はテキストフィールドの幅以上でなければなりません。
NUMBER
該当なし
Y
N
StateField
ドロップダウンリスト内の品目の状態を表すインフォテーブル。
このプロパティを使用して、ドロップダウンリスト内の品目を有効または無効にできます。
INFOTABLE
該当なし
N
N
MultiSelect
ドロップダウンリスト内の複数のアイテムを選択できます。
BOOLEAN
False
N
N
AutoSelectFirstRow
ドロップダウンリストで 1 つ目の行を選択済みオプションとして設定できます。
* 
このプロパティはプロパティ MultiSelect が選択されていない場合にのみ使用できます。
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 つの方法で機能します。
入力 - プロパティの値と一致するラベルの付いたアイテムを選択します。
出力 - リストで選択されているアイテムのテキストを読み込みます。
* 
複数選択が有効になっている場合、このプロパティはサポートされません。代わりに SelectedItems プロパティを使用します。
STRING
該当なし
Y
Y
SelectedItems
リスト内の選択したアイテムのインフォテーブルソース。
INFOTABLE
該当なし
Y
N
ListFormat
ダイアログボックスが開き、ウィジェットデータのレンダリング規則とフォーマット規則を指定できます。
レンダラーと状態フォーマット
該当なし
N
N
ListMarginTop
ドロップダウンとアイテムリストの間のスペースを設定します。
NUMBER
8
N
N
TooltipField
ドロップダウンに関連付けられているラベルや、ドロップダウンで現在選択されている値にマウスポインタを合わせたときに、ツールヒントテキストを表示します。
STRING
該当なし
Y
Y
TooltipIcon
ドロップダウンウィジェットのツールヒントのアイコンイメージを設定します。
メディアエンティティ
該当なし
N
N
ドロップダウンウィジェットのデータの検証
検証プロパティを使用して、ランタイムでアイテムの選択を検証できます。たとえば、ドロップダウンリストでの選択を必須にして、アイテムが選択されていない場合にエラーメッセージを表示できます。
検証プロパティの詳細については、ウィジェットへの検証の適用を参照してください。
次の表に、「検証」パネルで使用可能な検証プロパティを示します。
プロパティ
説明
ベースタイプ
デフォルト値
バインド可能か (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
ウィジェット検証の出力を取得します。戻り値は UndefinedUnvalidatedValid、または Invalid です。
STRING
該当なし
Y
N
ValidationState
検証状態を設定するバインド可能なプロパティ。このプロパティは UndefinedUnvalidatedValidInvalid に設定できます。
STRING
Undefined
Y
N
ValidationSuccessIcon
検証に成功した場合にメッセージ内に表示する SVG アイコンを選択します。
IMAGELINK
success
N
N
ValueRequired
リスト内のアイテムの選択は必須です。
BOOLEAN
False
Y
N
これは役に立ちましたか?