リストコントロール

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

ListControlコントロールに項目が表示されます。データ自体は含まれず、アイテムは取得されません。データバインディングを使用して、ListControlコントロールに表示される項目を指定する必要があります。通常、ListControlコントロールをデータソースコンポーネント (SearchDataSourceコンポーネントなど) にバインドするには、ListControlコントロールのItemsプロパティを使用します。

ListControlコントロールは、項目をアイコン (ViewModeプロパティをIconに設定した場合) または行と列のテキスト (ViewModeプロパティをDetailListに設定した場合) として表します。DataSourceプロパティは、DetailList表示モードの列に表示するフィールドを指定する構成アイテムを指します。

ListControlコントロールには、データソースが提供するすべての項目が表示されます。SearchDataSourceコンポーネントなどのデータソースコンポーネントは、サーバー側のページネーションと無限スクロールをサポートします。

メモ

独自のデータソースを作成し、それをListControlコントロールで使用する場合は、このデータソースが提供するアイテムにitemIdというフィールドがあり、このフィールドの値が各アイテムで一意であることが重要です。これは、特にMultiSelectList動作に必要です。

プロパティ

Name	Description	Default
Appearance
AllowMultipleColumnSorting (複数列の並べ替えを許可)	falseの場合、ユーザーはListControlコントロール列を一度に1つだけ並べ替えることができます。 ListControlコントロールが列を並べ替えると、他の列は "並べ替えられていない" 状態に設定されます。	真
動作	ListControlコントロールは、EndlessPageScroll、MultiSelectList、Scrollbarなど、さまざまな動作をサポートしています。
高さ	コントロールの高さをピクセル単位で指定します。	何一つ。
アイコンビューディスプレイフィールド名	コントロールがViewModeで表示するテキストを指定しますIconList 。	$displayName
IsActiveResizeEnabled (英語)	trueの場合、ListControlコントロールは、ユーザーが列の境界線をドラッグしたときに列のサイズを動的に変更します。 falseの場合、ユーザーが列の境界線のドラッグを停止したときに、コントロールは列のサイズを変更します。コントロールは、ユーザーがドラッグしている間に境界線を配置する位置を示します。	偽。
IsEndlessScrollEnabled (英語)	trueの場合、ListControlコントロールは無限にスクロールします。ScrollMoreDataイベントを参照してください。	偽。
マックスハイト	Heightプロパティの最大値を指定します。
MaxIconSize(マックスアイコンサイズ)	ListControlコントロールがViewModeのアイコンに使用するアイコンの最大サイズIconView設定します。サイズをピクセル単位で指定します。
最小高さ	Heightプロパティの最小値を指定します。
分別	データを並べ替えることができるデータソース ( SearchDataSourceコンポーネントなど) をListControl.Sortingにバインドできます。ユーザーが並べ替え方向を変更すると、ListControlコントロールからデータソースに通知されます。 JavaScriptからSortingプロパティの値を読み書きできます。 ListControlコントロールは、次の3つの異なる並べ替え値にこの規則を使用します。 "a"+fieldname: 昇順で並べ替える "d"+fieldname: 降順ソート空: ソート方向なしソート方向は次のように設定できます。 `javascript:app.ListControl1.set("sorting","aitemName");` 複数のソート可能なフィールドを指定した場合、ソート値はパイプで区切られたソート値のリストになります。
TileCssFileName (英語)	ListControlコントロールがTileListモードで使用するCSSスタイルシートの名前を指定します。
タイルHtmlファイル名	ListControlコントロールがTileListモードで使用するHTMLファイルの名前を指定します。	/sitecore/shell/client/Business Component Library/Layouts/Renderings/ListsAndGrids/ListControls/DefaultTile.cshtml
ビューモード	ListControlコントロールで項目を表示する方法を指定します。 IconList – アイテムにサムネイルフィールドがない場合はアイコンを表示し、サムネイルフィールドがあるアイテムにはサムネイルを表示します。 DetailList – 設定で設定した列が表示されます。 TileList – 「TileListViewModeプロパティの使用」を参照してください。	DetailListです。
Data
HasSelectedItem (選択項目あり)	この読み取り専用プロパティがtrueの場合、ListControlコントロールに表示される項目の1つが選択されます。
選択済みアイテムID	現在選択されているアイテムのIDを設定または取得します。ユーザーが選択を行うとコントロールが値を更新するため、通常は値を設定しません。
Data bindings
項目	コントロールに表示される項目をポイントします。ドロップダウンリストを使用して、別のコントロールへのバインディングを選択できます。通常は、データソースコンポーネントのitemプロパティへのバインディングを選択します。手記独自のデータソースを作成する場合は、このデータソースが提供するアイテムにitemIdというフィールドがあることが重要です。
Events
スクロールモアデータ	IsEndlessScrollEnabledがtrueで、ユーザーが現在使用可能なデータの末尾までスクロールしたときにコントロールが実行するJavaScriptを指定します。たとえば、ListControlコントロールにデータの次のページを要求するように指示する“next:Datasource1”を指定できますDatasource1。
State
IsStateDiscarded	trueの場合、ユーザーが設定した列幅は破棄され、ページが読み込まれるたびに幅は同じになります。	偽

構成

ListControlコントロールの構成項目を作成するには、ListControl Parametersテンプレートに基づいて項目を作成します。

構成アイテムには、次の特定のフィールドがあります。

価値
ビューモード
高さ
分別
項目
選択済みアイテムID

次のフィールドを継承します。

目に見える
アクセスキー
ツールチップ
動作
身分証明書

ListControlテンプレートとColumnFieldテンプレート

ListControlコントロールの機能の一部は、構成アイテムで指定します。この設定は、DetailList表示モードを使用する場合に必要です。

設定を指定するには、次のようにします。

ListControlテンプレートに基づくアイテムを、PageSettingsアイテムの子として追加します。
ColumnFieldテンプレートに基づく項目を、追加したばかりの項目の子として、表示するデータの列ごとに追加します。

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

ColumnFieldテンプレートには、次のフィールドがあります。

畑	形容
ヘッダーテキスト	列見出しを指定します。コントロールはこれをDetailListモードで使用されます。
データフィールド	この列のデータ・フィールドの名前を指定します。 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コンポーネントなど) はSortingプロパティにバインドしてソート方向をリッスンできます。この情報を使用するかどうかは、データソースコンポーネントに委ねられています。
ソートフィールド	インデックス・フィールドの名前がコンテンツ・フィールド名と異なる場合は、その名前を指定します。フィールドの名前が同じでない場合、SortFieldを指定しない限り、ソートは機能しません。
フォーマッタ	書式設定文字列を指定します。日付値の書式を設定するには、yy、yyyy、m、mm、d、ddを使用します。たとえば、「m-d-y」は日付を「11-23-14」、"dd/mm/yyyy"を「02/09/2011」とフォーマットします。次のトークンを使用します。 yyとyyyy: 2桁または4桁の年。 mとmm: 必要に応じて先頭に0を付ける月または先頭に0を付ける月。 dとdd: 必要に応じて先頭に0を付ける、または先頭に0を付ける日。 hとhh: 必要に応じて先頭に0を付けない、または先頭に0を付ける時間。 mとmm: 必要に応じて先頭に0を付けない、または先頭に0を付けた分。データソースコンポーネントで日付形式を指定することもできます。データソースで書式設定を指定すると、ColumnField Formatterフィールドで指定した書式設定が無効になります。
HTMLテンプレート	「HTMLテンプレートの使用」を参照してください。
ヘッダーアライメント	列のヘッダーテキストの配置を指定します。「中央」、「左」、および「右」を使用できます。
コンテンツアライメント	列の内容の配置を指定します。「中央」、「左」、および「右」を使用できます。
幅	列の幅をピクセル単位またはテーブル全体の幅に対するパーセントで指定します。

HTMLテンプレートの使用

DetailListビューはHTMLテンプレートで書式設定できます。このようにして、自分でフォーマットを制御したり、ハイパーリンクを作成したりできます。

HTMLテンプレートを指定するには、次の操作を行う必要があります。

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

手記

取得したアイテムの任意のフィールドを各HTMLテンプレートで自由に使用できます。

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

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

<a href=”{{url}} title=”Item was created{{_Created}}”><img alt=”{{Alt}}” src=”{{image}} /> {{itemName}}</a>

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プロパティを設定できます。

この記事を改善するための提案がある場合は、お知らせください!