リストシャトルウィジェット (テーマ指定可能)
リストシャトルウィジェットを使用して、既存のリスト (ソース) からアイテムを選択して新規リスト (ターゲット) に配置できます。ターゲットリストで、選択したアイテムの順序を指定したり、ソースリストから不要なアイテムを除去したりします。
 |
リストシャトルウィジェットは、プラットフォーム内の標準ウィジェットとして、および SDK からインポート可能な Web コンポーネントとして使用できます。
|
データ形式
次の構造に従ってフォーマットされているインフォテーブルのデータを使用して、ListShuttle ウィジェットのアイテムを設定できます。
|
フィールド定義
|
表示フィールド
|
IDField
|
|---|---|---|
|
説明
|
ランタイムでのリストシャトルのアイテムのラベルを表します。
|
リストシャトルのアイテムの実際の ID を表します。この値は SelectedItems プロパティにも保存されます。
|
|
ベースタイプ
|
STRING または NUMBER
|
STRING または NUMBER
|
リストアイテムの定義
リストアイテムを定義するには、必要なデータフォーマットを使用してフォーマットされているインフォテーブルをバインドします。
1. 「データ」パネルで、ウィジェットのリストアイテムを定義するデータサービスを追加します。前のセクションで概要を説明したインフォテーブルのフォーマットを使用してアイテムを定義できます。
2. データサービスの All Data プロパティをリストシャトルウィジェットの Data プロパティにバインドします。
3. 「プロパティ」パネルで、以下のプロパティのインフォテーブルフィールドを選択します。
◦ DisplayField - アイテムのラベルのデータ。
◦ IDField - アイテムの ID。
4. 「保存」をクリックし、「マッシュアップを表示」をクリックします。
リストアイテムはランタイムでウィジェット内に表示されます。
選択されているアイテムの数の検証
NumberOfSelectedItems プロパティを使用して、ランタイムでリスト内の選択されているアイテムの数を追跡および検証できます。たとえば、バリデータ関数にプロパティをバインドできます。また、選択されているアイテムの数が特定の値と一致しない場合は、エラーメッセージを表示し、ユーザーがページを保存できないように制限することもできます。
次の例は、プロパティとバリデータ関数の間のバインドを示しています。SelectedItemsChanged イベントは、関数を使用して NumberOfSelectedItems プロパティを検証するために使用されます。ランタイムで、関数は選択されているアイテムの数をチェックし、検証が失敗した場合はエラーメッセージを表示します。
ウィジェットのプロパティ:
プロパティ名 | 説明 | ベースタイプ | デフォルト値 | バインド可能か(Y/N) | ローカライズ可能か(Y/N) | ||
|---|---|---|---|---|---|---|---|
TabSequence | Tab キーを押したときにウィジェットがハイライトされるシーケンスを設定します。 | NUMBER | 該当なし | N | N | ||
DisplayField | データ値を表すインフォテーブルフィールド。 | INFOTABLE | 該当なし | N | N | ||
ListFormat | リストアイテムに状態フォーマットを適用します。 | レンダラーと状態フォーマット | 該当なし | N | N | ||
Disabled | マッシュアップ内のウィジェットを無効にします。ウィジェットは表示されますが、使用できません。 | BOOLEAN | false | Y | N | ||
CustomClass | ウィジェットの最上位の div エレメントの CSS クラス名を定義します。複数のクラスを入力する場合、各クラスをスペースで区切ります。 | STRING | 該当なし | Y | N | ||
SelectedItems | リスト内で選択されたアイテムのインフォテーブルソース。 | INFOTABLE | 該当なし | Y | N | ||
SingleSelect | 単一選択または複数選択を設定します。 | BOOLEAN | false | Y | N | ||
HideFilter | ソースリストでのフィルタの表示/非表示を切り替えます。 | BOOLEAN | false | Y | N | ||
IDField | リストアイテムの ID が含まれているインフォテーブルフィールド。アイテムが同じ表示名を共有している場合、ID フィールドを指定する必要があります。 | フィールド名 | 該当なし | 該当なし | N | ||
Data | ウィジェットのデータソース。 | INFOTABLE | 該当なし | Y | N | ||
ListShuttleLabel | リストシャトルウィジェットのラベルに表示されるテキスト。 | STRING | リストシャトル | Y | Y | ||
ListShuttleLabelAlignment | ウィジェット内で、「左」、「右」、または「中央」にラベルを整列します。 | STRING | 左 | Y | N | ||
ListShuttleLabelType | ラベルのタイプを、「ヘッダー」、「サブヘッダー」、「ラベル」、または「本文」に設定します。 | STRING | サブヘッダー | Y | N | ||
NumberOfSelectedItems | List Shuttle で選択されたアイテムの数を返します。
| NUMBER | 該当なし | Y | N | ||
SourceListLabel | ソースリストのラベルに表示されるテキスト。 | STRING | ソース | Y | Y | ||
SourceListLabelAlignment | ソースリスト内で、「左」、「右」、または「中央」にラベルを整列します。 | STRING | 左 | Y | N | ||
SourceListLabelType | ラベルのタイプを、「ヘッダー」、「サブヘッダー」、「ラベル」、または「本文」に設定します。 | STRING | ラベル | Y | N | ||
TargetListLabel | ターゲットリストのラベルに表示されるテキスト。 | STRING | ターゲット | Y | Y | ||
TargetListLabelAlignment | ターゲットリスト内で、「左」、「右」、または「中央」にラベルを整列します。 | STRING | 左 | Y | N | ||
TargetListLabelType | ラベルのタイプを、「ヘッダー」、「サブヘッダー」、「ラベル」、または「本文」に設定します。 | STRING | ラベル | Y | N | ||
ResetToDefaultValue | リストを各デフォルト値にリセットします。 | 該当なし | 該当なし | Y | N |
検証プロパティ
共通の検証プロパティに加え、TargetListMinItems プロパティと TargetListMaxItems プロパティを使用して、ウィジェットで選択されているアイテムの数を制限できます。選択されているアイテムの数が範囲外の場合、失敗メッセージが表示されます。
プロパティ名 | 説明 | ベースタイプ | デフォルト値 | バインド可能か(Y/N) | ローカライズ可能か(Y/N) |
|---|---|---|---|---|---|
ValidationState | 検証状態を設定するバインド可能なプロパティ。このプロパティは、未定義、未検証、有効、または無効に設定できます。 | STRING | Undefined | 入力 | N |
ValidationOutput | ウィジェット検証の出力を取得するために使用されるバインド可能なプロパティ。返される値は、未定義、未検証、有効、または無効です。 | STRING | 該当なし | 出力 | N |
ValueRequired | ターゲットリストに追加するアイテムが必要です。 | BOOLEAN | False | 入力 | N |
RequiredMessage | ValueRequired が true に設定され、アイテムがターゲットリストに追加されない場合に表示されるメッセージ。 | STRING | 選択は必須です | 入力 | Y |
Validate | ウィジェットの値が変更されたときにトリガーされるイベント。このイベントをサービスまたは関数にバインドして、検証式を適用します。 | EVENT | 該当なし | 出力 | N |
ShowValidationState | ユーザーがランタイムでウィジェットを操作する前に、検証状態を表示するために使用できるバインド可能なサービス。デフォルトでは、検証状態はユーザー操作の後にのみ表示されます。 | Service | 該当なし | 入力 | N |
ShowValidationSuccess | 検証に成功したときに、成功のメッセージを表示します。 | BOOLEAN | False | 入力 | N |
ValidationSuccessIcon | 検証に成功したときに、ステータスメッセージ内に表示する SVG アイコンを選択します。 | IMAGELINK |  success | 該当なし | N |
ShowValidationFailure | 検証に失敗したときに、失敗のメッセージを表示します。 | BOOLEAN | False | 入力 | N |
ValidationFailureIcon | 検証に失敗したときに、ステータスメッセージ内に表示する SVG アイコンを選択します。 | IMAGELINK |  error | 該当なし | N |
ShowValidationCritera | リストを編集しているときに、必須の入力に関するヒントメッセージを表示します。 | BOOLEAN | False | 入力 | N |
ValidationCriteriaIcon | 検証基準のヒントメッセージ内に表示する SVG アイコンを選択します。 | IMAGELINK |  Info | 該当なし | N |
SuccessMessage | 検証に成功したときに表示されるメッセージ。 | STRING | 該当なし | 入力 | N |
SuccessMessageDetails | 検証成功のメッセージに関する詳細情報を表示するセカンダリメッセージ。 | STRING | 該当なし | 入力 | Y |
CriteriaMessage | 検証に失敗したときに表示されるメッセージ。 | STRING | 該当なし | Y | Y |
CriteriaMessageDetails | 検証失敗のメッセージに関する詳細情報を表示するセカンダリメッセージ。 | STRING | 該当なし | 入力 | Y |
TargetListMinItems | ターゲットリスト内の最小数を設定します。 | NUMBER | 該当なし | 入力 | N |
TargetListMinItemsFailureMessage | ターゲットリストで選択されているアイテムの数が TargetListMinItems の値より小さい場合に表示されるメッセージ。 | STRING | ${value} Is the minimum number of items | 入力 | Y |
TargetListMaxItems | ターゲットリスト内のアイテムの最大数を設定します。 | NUMBER | 該当なし | 入力 | N |
TargetListMaxItemsFailureMessage | ターゲットリストで選択されているアイテムの数が TargetListMaxItems の値より大きい場合に表示されるメッセージ。 | STRING | ${value} Is the maximum number of items | 入力 | Y |