リストコントロール

性質

• 名称: 説明
• 外見
• AllowMultipleColumnSorting
  、ユーザーは ListControl コントロールの列を一度に1つずつしかソートできません。 ListControl コントロールが列をソートすると、他の列は「未ソート」状態に設定されます。
• 挙動: ListControl コントロールは EndlessPageScroll、 MultiSelectList、 Scrollbarなど複数の挙動をサポートしています。
• 高さ
  。
• IconViewDisplayFieldName: IconList ViewModeでコントロールが表示されるテキストを指定します。
• IsActiveResizeEnabled: もしtrueの場合、 ListControl コントロールはユーザーが列の境界をドラッグすると動的に列のサイズを変更します。falseの場合は、ユーザーが境界線をドラッグするのをやめたときにコントロールが列のサイズを変更します。コントロールは、ユーザーがドラッグしている間に境界線を配置する位置を示します。
• IsEndlessScrollEnabled
  、 ListControl コントロールは無限にスクロールします。ScrollMoreDataイベントを参照してください。
• MaxHeight
  。
• MaxIconSize
  ViewModeで ListControl コントロールがアイコンに使用する最大アイコンのサイズを設定します。ピクセル単位でサイズを指定します。
• MinHeight
  。
• ソート
  .Sortingにバインドできます。ユーザーがソート方向を変更すると、ListControlコントロールがデータソースに通知します。Sortingプロパティの値をJavaScriptから読み書きできます。ListControlコントロールは、3つの異なるソート値に対してこの慣例を用いています:「a"+fieldname: 昇順ソート"d"+fieldname: 降順sortempty: no sort directionsソート方向このように並べ替え方向を設定できます: 複数のソート可能なフィールドを指定する場合、ソート値はソート値のパイプ分離リストとなります。

javascript

• TileCssFileName: TileListモードでListControl コントロールが使用するCSSスタイルシートの名前を指定します。
• TileHtmlFileName: ListControl コントロールがTileListモードで使用するHTMLファイル名を指定します。
• ViewMode: ListControl コントロールのアイテム表示方法を指定します
  – サムネイルフィールドがないアイテムにはアイコンを表示します。サムネイルフィールドがあるアイテムにはサムネイルを表示します。DetailList – 設定で設定した列を表示します。TileList – Using the TileListViewModeプロパティを参照してください。
• データ
• HasSelectedItem
  、 ListControl コントロールに表示されるアイテムのいずれかを選択します。
• SelectedItemId
  。通常は値を設定しません。なぜなら、ユーザーが選択した際にコントロールが値を更新するからです。
• データバインディング
• Items: コントロールに表示されるアイテムを指します。ドロップダウンリストを使って別のコントロールへのバインディングを選択できます。通常はデータソースコンポーネントのアイテムプロパティへのバインディングを選択します。注意
  、このデータソースが提供するアイテムにitemIdというフィールドがあることが重要です。
• イベント
• ScrollMoreData
  、ユーザーが現在利用可能なデータの末尾までスクロールしたときに、コントロールが実行されるJavaScriptを指定します。例えば、ListControlコントロールに次のデータページのリクエストをDatasource1に伝える“next
  ”を指定することができます。
• 州
• IsStateDiscarded
  、ユーザーが設定した列幅は破棄され、ページが読み込まれるたびに幅が同じになります。

構成

ListControlコントロールの構成アイテムは、ListControlパラメータテンプレートに基づいてアイテムを作成することで作成できます。

設定項目には以下の特定のフィールドがあります:

• 価値
• ビューモード
• 高さ
• ソーティング
• アイテム
• SelectedItemId

以下の場を継承します:

• IsVisible(見えるもの)
• アクセスキー
• ツールチップ
• 行動
• ID

ListControlとColumnFieldテンプレート

ListControlコントロールの一部の機能を設定項目で指定します。この設定はDetailListビューモードを使用する場合に必要です。

構成を指定するために:

• PageSettings項目の子としてListControlテンプレートに基づくアイテムを追加します。
• 表示したい各データ列に対して、ColumnFieldテンプレートの子項目を元に追加します。

ListControlテンプレートに基づいてアイテム内の何かを編集する必要はありません。

ColumnFieldテンプレートには以下のフィールドがあります:

フィールド

概要

ヘッダーテキスト

列見出しを指定します。コントロールはDetailListモードでこれを使用します。

DataField

この列のデータフィールド名を指定します。 ListControl コントロールで表示したいアイテムのテンプレートに名前を正確に入力してください。

また、データフィールドの代わりに以下のトークンのいずれかを使うこともできます:

• itemId(アイテムID)

• itemName(アイテム名)

• $displayName(表示名)

• $database(アイテムが属するデータベース名)

• $language(アイテムの言語)

• $version(アイテムのバージョン)

• $templateName(アイテムの元となるテンプレートの名前)

• $templateId(このテンプレートのアイテムのID)

• $hasChildren(子項目があるかどうか表示)

• $path(アイテムのSitecoreパス)

• $url(アイテムのSitecore URL)

• $mediaurl(アイテムのアイコン資産のSitecore URL)

• $icon(アイテムのアイコンのSitecore経路)

ソートには$itemName、$itemTemplate、$pathしか使えません

ソート可能

このフィールドを選択すると、 ListControl コントロールはソート可能で、ユーザーがクリックできるソートボタンが表示されます。このボタンは、ユーザーがクリックすると3つの状態を切り替えます

ListControlコントロールは実際のソートを行いません。データソースコンポーネント(例えばSearchDataSourceコンポーネント)がソートプロパティにバインドしてソート方向を受信できます。この情報を利用するのはデータソースコンポーネントの責任です。

ソートフィールド

インデックスフィールドの名前がコンテンツフィールド名と異なる場合は指定してください。フィールド名が同じでない場合、SortFieldを指定しない限りソートは機能しません。

フォーマター

書式文字列を指定します。日付の値をフォーマットするためにyy、yyyy、m、mm、d、ddを使用します。例えば、「m-d-y」は日付を「11-23-14」、「dd/mm/yyyy」を「02/09/2011」とフォーマットします。以下のトークンを使いましょう:

• YYとYYYY

  。

• MとMM

  、または先頭にゼロが付いている月。

• DとDD

  、あるいは先導ゼロがある日。

• HとHH

  、または先導ゼロがある時間。

• MとMM

  、または先頭にゼロを付ける分。

データソースコンポーネントで日付書式を指定することもできます。データソースで書式を指定すると、ColumnField Formatterフィールドで指定した書式が上書きされます。

HTMLテンプレート

「 HTMLテンプレートの使用」を参照してください。

ヘッダーアラインメント

列のヘッダーテキストのアラインメントを指定します。Center、Left、Rightを使えます。

ContentAlignment

列の内容のアラインメントを指定します。中央、左、右を使えます。

幅

列の幅をピクセル単位またはテーブル全体の幅のパーセンテージで指定します。

HTMLテンプレートの使用

詳細リストビューはHTMLテンプレートでフォーマットできます。こうすることで、自分でフォーマットをコントロールでき、例えばハイパーリンクを作成できます。

HTMLテンプレートを指定するには、以下の条件を満たす必要があります:

• ListControlコントロールが作成するテーブル内の各列に対して、ColumnFieldテンプレートに基づく設定項目を追加してください。
• これらの項目でHeaderTextフィールドは指定し、DataFieldフィールドは指定しないでください。これが列見出しです。
• HTMLテンプレートフィールドに書式設定文字列を指定します。取得した項目から次のようにフィールドを挿入できます:{{<fieldname}} ここで、fieldnameは取得アイテムの元となるテンプレート内のフィールドの正確な名前です。名前は大文字を区別します。

!注各HTMLテンプレートで取得した項目のフィールドは自由に使用できます。

ListControlコントロールに表示される項目がすべて同じフィールドでない場合、HTMLテンプレートで指定したフィールドが存在しない項目が存在する可能性があります。この場合、ListControlコントロールはフィールドプレースホルダーをそのまま出力します(例: {{Dimensions}})。

例えば、取得した項目のフィールドがurl、_Created、Alt、image、itemNameと呼ばれている場合、次のHTMLテンプレートは、imageとitemNameを目に見える部分、urlを宛先とするハイパーリンクを作成します。

<a href=”{{url}} title=”Item was created{{_Created}}”> {{itemName}}

TileList ViewModeプロパティの使用

TileListViewModeプロパティを使って、ListControlコントロールがアイテムをレンダリングするために使うHTMLやCSSをより細かくコントロールできます:

• ViewModeプロパティをTileListに設定してください。
• HTMLファイルを作成し、TileHtmlFileNameプロパティでこのファイルを指定します。このファイルを使って ListControl コントロールがレンダリングするHTMLをデザインします。
• CSSファイルを作成し、TileCssFileNameプロパティでこのファイルを指定します。このファイルを使って、TileHtmlFileNameプロパティで指定したファイルでレンダリングされたHTMLをスタイル化します。

デフォルトのTileHtmlFileNameファイルは以下のsitecore/shell/client/Business Component Library/Layouts/Renderings/ListsAndGrids/ListControls/DefaultTile.cshtmlにあります。デフォルトのCSSファイルはありません。

例えば、ListControlコントロールが出力するアイテムフィールドをデータバインディングで指定します。例えば: data-bind="text: $displayName". バインディングはknockout.jsと同じ構文を使っています。

!注タイル内のリンク(「クリック可能なURL」)はデフォルトでは機能しません。JavaScriptを使ってそのようなリンクを機能させることができます。 clickイベントにサブスクライブし、期待される動作を実装します。例えば、URLを抽出してwindow.location.hrefプロパティを設定することができます。