Mashup Builder > ウィジェット > 標準ウィジェット > コレクションウィジェット (テーマ指定可能)
コレクションウィジェット (テーマ指定可能)
コレクションウィジェットは、一連のリピートされたマッシュアップをコレクション内のセルとして表示できるレスポンシブウィジェットです。高度なレイアウトを設定し、セルをグループ化することで、ユーザーはさまざまな画面サイズでコレクションを簡単に表示できるようになります。コレクションセル内にデータを表示するには、マッシュアップセルのデータから成るインフォテーブルを定義する必要があります。大きなデータセットをロードする際のパフォーマンスを最適化するために、データロードの動作を設定することもできます。
* 
このウィジェットは Web Component SDK で Web コンポーネントとしても使用できます。
ベストプラクティス
各コレクションマッシュアップセル内でサービスを実行することは避けてください。コレクション内のセルごとに複数のサービスを繰り返し実行するには、多数のネットワークリクエストが必要です。親マッシュアップが初期化されるときにコレクションマッシュアップ内のサービスが繰り返し実行されるため、各セルがロードすることによって重大なパフォーマンスの問題が生じる可能性があります。パフォーマンスの問題を防止するには、親マッシュアップでデータサービスを実行してから、マッシュアップパラメータと MashupPropertyBinding プロパティを使用してデータを組み込みマッシュアップに渡します。パラメータの操作の詳細については、マッシュアップパラメータの設定を参照してください。
セル内でのクリックイベントの動作
コレクションセルには、複数の対話型ウィジェットと非対話型ウィジェットを表示できます。セルに対話型ウィジェットが含まれているときに、それがクリックされると、イベントハンドラはバインドされている Clicked イベントがウィジェットにあるかどうかをチェックします。イベントがバインドされている場合、ウィジェットのクリックイベントがトリガーされます。イベントがバインドされていない場合、ウィジェットは非対話型と見なされ、代わりにセルが選択されます。たとえば、コレクションには、オプションの Clicked イベントがある KPI ダイヤルウィジェットを表示できます。イベントがバインドされている場合、イベントハンドラはイベントを登録し、バインドされているサービスまたは関数が実行されます。イベントがバインドされていない場合、コレクションセルが選択されます。
プロパティ
プロパティ名
説明
ベースタイプ
デフォルト値
バインド可能
ローカライズ可能か (Y/N)
Data
コレクションウィジェットのインフォテーブルのデータソース。
INFOTABLE
Y
N
DragActionsData
ドラッグアンドドロップ操作時にコレクションセルへの変更を保存する JSON プロパティ。追加、除去、および順序変更されたセルのインデックス番号が保存されます。
JSON
該当なし
Y
N
DragCells
コレクション内のセルをランタイムにドラッグアンドドロップする機能を有効にします。これが有効になっている場合、並べ替えとセクションはサポートされません。
BOOLEAN
False
Y
N
DragCellsBetweenWidgets
2 つの異なるコレクションウィジェット間でセルをランタイムにドラッグアンドドロップする機能を有効にします。この機能をサポートするには、両方のウィジェットでこのプロパティを有効化し、同じデータシェイプを使用する必要があります。
BOOLEAN
False
Y
N
ItemLoadBehavior
コレクションデータのロードの動作を制御します。スクロール中にデータをロード/アンロードでき、データをオンデマンドで段階的にロードすることも、データセット全体を最初にロードすることもできます。
STRING
ロード/アンロード
N
N
Layout
コレクションセルに使用するレイアウトのタイプを指定します。オプション: フレキシブル、グリッド、テーブル。
STRING
フレキシブル
Y
N
Mashup
コレクションデータの表示に使用するマッシュアップ。
MASHUPNAME
Y
N
Width
ウィジェットの幅を設定します。
NUMBER
400
N
N
Height
ウィジェットの高さを設定します。
NUMBER
300
N
N
MashupHeight
コレクションマッシュアップの高さを設定します。
NUMBER
Y
N
MashupWidth
コレクションマッシュアップの幅を設定します。
NUMBER
Y
N
MashupWidthField
サービスを使用してセル幅を定義するインフォテーブルフィールドを指定します。値は MashupHeight をオーバーライドします。
インフォテーブル列
N
N
MashupHeightField
サービスを使用してセル高さを定義するインフォテーブルフィールドを指定します。値は MashupHeight をオーバーライドします。
インフォテーブル列
N
N
UIDField
必須。各セルの一意の識別子を持つインフォテーブルフィールドを指定します。
インフォテーブル列
N
N
LastRowAlignment
コレクションの最後の行内にあるセルの整列を制御します。オプション: 「デフォルト」「等間隔」「間隔」「左」「中央」「右」「伸縮」
STRING
デフォルト
N
N
ContentAlignment
セル数が少なすぎてレイアウト内の使用可能なスペースを埋められない場合の、コレクションコンテンツの垂直方向の整列を制御します。
オプション: 「上」「中央」「下」
STRING
中央
N
N
RowHorizontalAlignment
コレクションの行内にあるセルの水平方向の整列を制御します。オプション: 「等間隔」「間隔」「左」「中央」「右」「伸縮」
STRING
等間隔
N
N
RowVerticalAlignment
コレクションの行内にあるセルの垂直方向の整列を制御します。オプション: 「上」「中央」「伸縮」「下」
STRING
中央
N
N
UniformRowHeight
同じ高さを使用して行を表示します。
BOOLEAN
False
N
N
RowGap
コレクション行間のスペースを設定します。
NUMBER
40
N
N
ColumnGap
コレクション列間のスペースを設定します。
NUMBER
40
N
N
SectionGap
コレクションセクション間のスペースを設定します。
NUMBER
48
N
N
TopPadding
コレクションの上部余白と最初のセルとの間のパディングを設定します。
NUMBER
24
N
N
BottomPadding
コレクションの下部余白と最後のセルとの間のパディングを設定します。
NUMBER
24
N
N
RightPadding
ウィジェットの右側の境界とセルコレクションの間のパディングを設定します。
NUMBER
24
N
N
LeftPadding
ウィジェットの左側の境界とセルコレクションの間のパディングを設定します。
NUMBER
0
N
N
MashupBackground
コレクションマッシュアップとそのすべてのコンテナの背景を制御します。マッシュアップの背景が透明な場合、セルの背景に適用されているスタイルが表示されます。オプション: 「透明」「表示」
STRING
表示
N
N
MashupNameField
データサービスを使用して、マッシュアップ名を指定するインフォテーブルフィールドを指定できます。このプロパティはマッシュアッププロパティをオーバーライドします。
インフォテーブル列
N
N
MashupPropertyBinding
インフォテーブルフィールドをそのキーとして持ち、マッシュアップパラメータを値として持つ、シリアル化された JSON オブジェクト。例:
{
"min_temp": "minTemp"
}
JSON
N
N
MashupGlobalPropertyBinding
グローバルパラメータ名をそのキーとして持ち、データ型を値として持つ、シリアル化された JSON オブジェクト。これらのプロパティをコレクションウィジェットにバインドし、値を各セルマッシュアップに送信できます。
{
"minTemp": "STRING"
}
JSON
N
N
SelectedCellMashupField
コレクション内の各セルの選択した状態を設定するインフォテーブルフィールドを指定できます。
インフォテーブル列
N
N
UseMashupDimensions
セルサイズをマッシュアップ寸法と一致させます。
BOOLEAN
False
N
N
SelectionMode
ランタイムにユーザーが選択することができるセルの数を制御できます。オプション: 「なし」「単一」「複数」
STRING
なし
N
N
HasSelectedCells
選択されたセルがウィジェットにある場合、True を返します。
BOOLEAN
False
Y
N
SelectedCellsCount
コレクションで選択されたセルの数を返します。
NUMBER
0
N
N
ScrollToSelectedCell
セルが選択されているときに、そのセルに自動的にスクロールします。
BOOLEAN
False
N
N
AutoSelectFirstRow
データがコレクションにロードされたときに、最初の行を自動的に選択できます。
BOOLEAN
False
N
N
SelectedCells
インフォテーブルを使用して選択するコレクションセルを指定します。
INFOTABLE
Y
N
SelectedCellMashup
コレクションで選択されたセルに表示する代替マッシュアップを指定します。このマッシュアップには、デフォルトのマッシュアップと同じプロパティが含まれている必要があります。
マッシュアップピッカー
Y
N
HandleSelectionUpdates
有効な場合、ウィジェットは選択の更新を、そのデータサービスに送信したり、そのデータサービスから受信したりします。
BOOLEAN
True
N
N
CellMenu
タッチデバイスのセル上でスライドしたときに表示されるセルメニューを定義するときに使用される状態定義を指定します。タッチインタフェースがないデバイスでは、セルを右クリックすることでこのメニューが表示されます。
STATEDEFINITION
N
N
CellMenuIconSize
セルメニュー内のアイコンのサイズを指定します。
NUMBER
20
N
N
CellActionsPosition
セルメニューボタンの位置を制御します。オプション: 「上」「下」「右」「左」
STRING
N
N
CellTabKeyScope
キーボードを使用してセルのコンテンツを操作するときのナビゲーションの範囲を制御します。オプション: 「セル」「コレクション」「アイテムのみ」。範囲がセルに設定されている場合、Tab キーを押すと、セル内のエレメントでフォーカスがループします。範囲がコレクションに設定されている場合、Tab キーを押すと、最後のエレメントが選択された後にフォーカスがセルに戻ります。セル間の移動時に、セルコンテンツにのみフォーカスし、セル自体をスキップするには、「アイテムのみ」を選択します。
* 
レガシーコレクションウィジェットから移行する場合、このプロパティはデフォルトで「アイテムのみ」に設定されます。
STRING
セル
N
N
CellUnloadDelay
コレクションセルがビューの外にあるときに、コレクションセルを DOM からアンロードするまでの遅延時間 (秒) を指定します。このプロパティは、ItemLoadBehavior が「オンデマンドでロード」に設定されている場合にのみ適用されます。
NUMBER
該当なし
N
N
CellPointer
コレクション内のセルにマウスポインタを合わせたときのスタイルを制御します。オプション: 「自動」「pointer」「デフォルト」
STRING
自動
N
N
SectionField
セクション内でセルをグループ化するために使用できる識別子の値を持つインフォテーブルフィールドを指定します。
INFOTABLE
N
N
SectionInsetLeft
セルをグループ化する際のセクションの左差込図の値を設定します。
NUMBER
0
N
N
SectionInsetTop
セルをグループ化する際のセクションの上差込図の値を設定します。
NUMBER
0
N
N
SectionInsetRight
セルをグループ化する際のセクションの右差込図の値を設定します。
NUMBER
0
N
N
SectionInsetBottom
セルをグループ化する際のセクションの下差込図の値を設定します。
NUMBER
0
N
N
SortField
セクションのコンテンツを並べ替えるインフォテーブルフィールドを指定します。並べ替えはクライアント側で実行され、ソースインフォテーブルやデータセットにバインドされているその他のウィジェットには影響しません。
INFOTABLE
Y
N
SortAscending
SortField プロパティが有効になっているときに、セクションコンテンツを昇順に並べ替えます。デフォルトでは、セクションは降順に並べ替えられます。
BOOLEAN
False
Y
N
SectionHeaders
コレクション内のセルをグループ化する際のセクションヘッダーの表示を制御します。オプション: 「なし」「表示」「ピン留め」
STRING
None
N
N
HeaderMashup
コレクション内のセルをグループ化する際にセクションヘッダーに使用するマッシュアップを指定します。
MASHUPNAME
None
N
N
HeaderSectionParam
セクション識別子を受け取るヘッダーマッシュアップパラメータの名前。
STRING
N
N
HeaderHeight
コレクションのセクションヘッダーの高さを設定します。
NUMBER
40
N
N
SectionFooters
コレクション内のセルをグループ化する際のセクションフッターの表示を制御します。オプション: 「なし」「表示」「ピン留め」
STRING
なし
N
N
FooterMashup
コレクション内のセルをグループ化する際にセクションフッターに使用するマッシュアップを指定します。
MASHUPNAME
N
N
FooterSectionParam
セクション識別子を受け取るフッターマッシュアップパラメータの名前。
STRING
N
N
FooterHeight
コレクション内のセルをグループ化する際のセクションフッターの高さを設定します。
NUMBER
40
N
N
EmptyMashup
コレクション内のセルにデータが含まれていない場合に表示するマッシュアップを指定します。
MASHUPNAME
None
N
N
Deselect
コレクション内のすべての選択をクリアするバインド可能なサービス。
サービス
Y
N
SelectAll
コレクション内のすべてのセルを選択するバインド可能なサービス。
サービス
Y
N
DisableWrapping
有効にすると、1 つの行にセルが水平スクロールバー付きで表示されます。無効にすると、水平方向のスペースがコレクション全体を表示するために十分でない場合に、セルは新しい行に折り返されます。このプロパティは、「フレキシブル」レイアウトモードを使用してコレクションが設定されている場合にのみサポートされます。
BOOLEAN
False
N
N
イベント
プロパティ名
説明
ベースタイプ
バインド可能
ローカライズ可能か (Y/N)
CellClicked
ユーザーがコレクション内のセルをクリックまたはタップしたときにトリガーされるイベント。
イベント
Y
N
CellDoubleClicked
ユーザーがコレクション内のセルをダブルクリックまたはダブルタップしたときにトリガーされるイベント。
イベント
Y
N
CellLongClicked
ユーザーが 400 ミリ秒を超える間コレクション内のセルをクリックして押し続けるか、タップしてホールドしたときにトリガーされるイベント。
イベント
Y
N
CellRightClicked
ユーザーがコレクション内のセルを右クリックしたときにトリガーされるイベント。
イベント
Y
N
CellAdded
ドラッグアンドドロップを使用してセルがコレクションに追加されたときにトリガーされるイベント。
イベント
Y
N
CellRemoved
コレクションからセルが除去されたときにトリガーされるイベント。
イベント
Y
N
CellMoved
コレクション内でセルが移動されたときにトリガーされるイベント。このイベントは、セルがコレクション内の別のセクションに移動されたときにもトリガーされます。
イベント
Y
N
これは役に立ちましたか?