Mashup Builder > ウィジェット > リストウィジェット
リストウィジェット
リストウィジェットを使用すると、任意のデータセットを単一の列で構成されるリストビューで表示できます。リストでは、さまざまな方法で単一の列をレンダーできます (カラーコンテキストの設定やセル内のイメージのレンダリングなど)。リストウィジェットのプロパティを使用して、基本的なレンダリングタイプ、表示する列、および状態のフォーマットを設定できます。表示するリストは、単一のリストボックス、コンボボックス、ドロップダウンリストボックス、またはラジオボタンリストのいずれかに設定できます。
リストのコンフィギュレーション
データサービスをリストにリンクすると、ウィジェットプロパティパネルで表示する列を選択できるようになります。
データに対して特定のレンダラーを使用したり、状態のフォーマットを使用したりするには、ListFormat プロパティの横の「レンダラー」および「状態」ボタンを押します。表示された列に対しては以下の操作を実行できます。
• セルのレンダラーを選択します (表示するデータ内の特定のデータ型の処理に使用)。
• スタイル (固定または状態のフォーマット) を選択します。
• 固定 (動的ではない) スタイルを適用する場合は、「固定スタイル」を選択し、以前に定義したスタイル定義を選択します。動的なフォーマット (行で返されるデータ基づくカラーコンテキストなど) を行う場合は、状態ベースのフォーマットを選択します。
状態ベースのフォーマットでは、リスト内の行に、その行の任意の列に基づいてスタイルを適用できます。状態フォーマッタを定義するには、次の操作を行います。
1. フォーマットの依存先となる列を選択します (返されるデータサービス内の任意の列を選択できます)。
2. 表示する列に対して使用する状態定義を選択します (依存フィールドのデータ型と一致する必要があります)。
3. 状態定義のデフォルト値をそのまま使用するか、このリスト定義とレンダリングに対してはデフォルト値をオーバーライドします。
コンボボックス
コンボボックスでは、先行入力サーチを使用して、ドロップダウン内のオプションのリストを絞り込むことができます。Multiselect プロパティを使用して、すべてのリストアイテムの横にチェックボックスを追加できます (Ctrl + Shift キーを使用する代わりとして)。
コンボボックスでは以下のスタイル定義を使用できます。
• ComboTextboxStyle
• ComboDropdownButtonStyle
プロパティ名
説明
ベースタイプ
デフォルト値
バインド可能か(Y/N)
ローカライズ可能か(Y/N)
CustomClass
ウィジェットの最上位の div に適用するユーザー定義の CSS クラス。スペースで区切って、複数のクラスを入力できます。
STRING
該当なし
Y
N
ListFormat
ListFormat プロパティは、データに特定のレンダラーを適用したり、表示されるデータに固定スタイルまたは状態ベースのフォーマットを適用したりするために使用されます。
該当なし
Renderer and State Value Formatting
N
N
MultiSelect
リスト内で複数のアイテムを選択できるようにします。チェックボックスが各リストアイテムに追加されます。
BOOLEAN
False
N
N
AutoSelectFirstRow
データサービスのロード時にデータの最初の行を自動選択します。
BOOLEAN
False
N
N
View
リストのタイプを決定します (リスト、ドロップダウン、コンボボックス、ラジオボタンリスト)。コンボボックスでは先行入力サーチを実行してリストを絞り込むことができます。
STRING
リスト
N
N
WidthOfDropdownView
ドロップダウンビューの幅 (ピクセル)。ウィジェットのドロップダウン部分は、ウィジェットよりも広くすることができます。
NUMBER
110
N
N
NumberOfItemsInDropdownView
ドロップダウンビューのリストに表示するアイテムの数。
NUMBER
6
N
N
NumberOfItemsPerPage
コンボボックスリストビューの各ページに表示されるアイテムの数を設定できます。
改ページを無効にするには、0 以下の値を入力します。
NUMBER
500
N
N
TabSequence
ウィジェットのタブシーケンス内のインデックス。
NUMBER
0
N
N
Alignment
ウィジェットの整列 (左揃え、右揃え、中央揃え)。
STRING
左揃え
N
N
LabelAlignment
ラベルの整列 (左、右、中央)。
STRING
左
N
N
Data
ウィジェットのデータのソース。
INFOTABLE
該当なし
Y
N
DisplayField
表示されるデータを表すインフォテーブルフィールド。
該当なし
該当なし
N
N
ValueField
値を表すインフォテーブルフィールド。
該当なし
該当なし
N
N
EnableKeyboardSelections
キーボード選択が有効になります。
BOOLEAN
True
N
N
TextIfNoSelection
リストで何も選択されていない場合に表示するテキスト。
STRING
該当なし
N
Y
TextIfNoSelectionType
TextIfNoSelection プロパティフィールドに入力したテキストが、マッシュアップ内でプレースホルダーまたは編集可能テキストとして表示されるように設定します。
STRING
editable
N
N
ClearIfNoSelection
何も選択されていない場合は SelectedText をクリアします。
BOOLEAN
False
N
N
DisableSelectedStyle
選択されている任意のコンボアイテムに適用されたスタイルを無効にします。
BOOLEAN
False
N
N
SelectedText
現在選択されているインフォテーブルフィールドの値。
* 
ユーザーが入力したテキストがリスト内に存在しているかどうかにかかわらず、「コンボボックス」ビューには、SelectedText のバインド後は、ユーザーが入力したテキストが表示されます。
* 
その他すべてのリストビューでは、SelectedText のバインド後は、現在選択されていてリストに存在するアイテムのみが表示され、その他のユーザーが入力したテキストは表示されません。
STRING
該当なし
Y
N
SelectedItems
現在選択されているインフォテーブルフィールドの値。
* 
ユーザーが入力したテキストがリスト内に存在しているかどうかにかかわらず、「コンボボックス」ビューには、SelectedItems のバインド後は、ユーザーが入力したテキストが表示されます。
* 
Multiselect プロパティが使用できるその他すべてのリストビューでは、SelectedItems のバインド後は、現在選択されていてリストに存在するアイテムのみが表示されます。ユーザーが入力したテキストは表示されません。
INFOTABLE
該当なし
Y
N
ListBackgroundStyle
リストの背景のスタイル。
STYLEDEFINITION
該当なし
N
N
ListItemStyle
ドロップダウンアイテムのスタイル。
STYLEDEFINITION
該当なし
N
N
ListItemAlternateStyle
ドロップダウンの代替行のスタイル。
STYLEDEFINITION
該当なし
N
N
ListItemHoverStyle
ドロップダウンでマウスポインタを合わせたときのアイテムのスタイル。
STYLEDEFINITION
該当なし
N
N
ListItemSelectedStyle
ドロップダウンで選択されたアイテムのスタイル。
STYLEDEFINITION
該当なし
N
N
ListLabelStyle
コンボボックスの上に表示されるドロップダウンラベルのテキストのスタイル。
STYLEDEFINITION
該当なし
N
N
ListFocusStyle
フォーカスされているときのテキストボックスのスタイル。
STYLEDEFINITION
該当なし
N
N
ToolTipStyle
有効時のツールヒントのスタイル。
STYLEDEFINITION
該当なし
N
N
DropdownButtonStyle
ドロップダウンボタンのスタイル。
STYLEDEFINITION
該当なし
N
N
DropdownStyle
ドロップダウンコンテナのスタイル。
STYLEDEFINITION
該当なし
N
N
DropdownSelectedStyle
選択されたアイテムのテキストの色のスタイル。
STYLEDEFINITION
該当なし
N
N
ComboTextboxStyle
コンボボックスのテキストボックスのスタイル。
STYLEDEFINITION
該当なし
N
N
ComboDropdownButtonStyle
コンボボックスのドロップダウンアイコンのスタイル。
STYLEDEFINITION
該当なし
N
N
ComboItemHighlightedStyle
コンボアイテムのハイライトされたスタイル。
STYLEDEFINITION
該当なし
N
N
RowHeight
ランタイムでの各行の高さ。
NUMBER
28
N
N
TextVerticalAlignment
行のテキストの縦方向の整列を有効にします。デフォルト値は 30 で、これは 14 px より小さいフォントサイズに適用されます。それよりも大きいフォントサイズの場合、この値を調整して設定を大きくし、テキストが行に完全に表示されるようにします。
* 
ブラウザで開発者ツールを使用して、リスト行の line height CSS プロパティを調整することで、テキストを正しく整列させる正確な値を設定します。フォントサイズが 11 px の場合、この行の高さの設定は約 30 です。最大フォントサイズの 72 px では、行の高さを 72 ～ 90 に調整して、選択した行の高さに応じた最適な整列を行います。ブラウザによってフォントサイズの解釈が異なるため、この手動調整が必要になる場合があります。入力した値が正確でないと、適切なテキスト整列が行われず、マッシュアップ内にテキストが一部しか表示されなくなります。
NUMBER
30
N
N
DoubleClicked
イベント。DoubleClicked イベントを使用すると、データオブジェクトはシングルクリックで選択できる状態のまま、別のイベントにダブルクリックを使用できます (ダブルクリックをナビゲーションリンクのトリガとリンクするなど)。
該当なし
該当なし
Y
N
Label
ウィジェットに表示するラベル。
STRING
該当なし
Y
Y