チュートリアル : ListControlのカスタマイズ
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
ListControlで灰色のボックスだけでなく、任意のコンテンツを表示するには、カスタマイズする必要があります。
このチュートリアルでは、次の方法について説明します。
-
ViewModeプロパティを設定する
-
列の定義
-
コントロールがデータを取得する方法を指定する
-
ソート可能な列を有効にする
ListControlには多くのプロパティがあり、さまざまなものをカスタマイズできることに注意してください。このトピックでは、作業を開始するのに十分な情報を提供しますが、詳細については、SPEAKコンポーネント リファレンスを参照してください。
ViewModeプロパティを設定する
ViewModeプロパティを設定する
ViewModeプロパティを使用して、ListControlが項目を表示する方法を指定します。
-
ListControlプロパティ シートで、ViewModeプロパティの3つの値のいずれかを選択します。
-
コンテンツを表形式で表示するには、DetailList をクリックします。
-
コンテンツを画像と関連するタイトルのグリッドとして表示するには、IconList をクリックします。
-
コンテンツを自由に書式設定するには、TileList を選択します。
-
DetailListを選択した場合、ListControlは行と列を含むテーブルにコンテンツを表示します。
HTMLテンプレートを使用すると、DetailListモードでListControlが各項目を表示する方法をより詳細に制御できます。
「 IconListを選択した場合、ListControlは、イメージと関連するタイトルのグリッドとしてコンテンツを表示します。
TileListを選択すると、コンテンツをかなり自由にフォーマットできます。DetailListを使用する場合は、テーブル形式の制限を考慮してHTMLテンプレートを使用してコンテンツを書式設定できますが、TileListを使用する場合は、プレースホルダを含むHTMLファイルと (必要に応じて) CSSファイルを提供します。厳密な表形式に縛られることはありません。
ViewModeは、ボタンのClickイベントなどでプログラムによって変更できます。これは、さまざまなViewModeで表示できるコンテンツがあり、ユーザーがViewMode設定を変更できるようにする場合に使用します。
列の定義
列の定義
DetailList ViewModeを使用する場合は、ListControlが列として表示するフィールド ("列フィールド") を指定する必要があります。列フィールドを指定しない場合、ListControlはコンテンツを表示しません。
列フィールドを定義するには:
-
ListControlテンプレートに基づいて構成項目を作成します。
-
この設定アイテムのSitecore IDをListControlのDataSourceプロパティにコピーします。
-
各列について、ColumnFieldテンプレートに基づいて構成アイテムを作成します。これらの項目は、ListControl構成項目の子として作成します。
-
各列フィールド項目で、以下を指定します。
-
ヘッダー テキスト – ListControlはこれを列見出しとして表示します。
-
列に表示されるデータのフィールド名。フィールド名は、ListControlに表示される項目のテンプレートに表示されるとおりに正確に指定する必要があります。
-
ListControlがデータを取得する方法を指定します
ListControlがデータを取得する方法を指定します
ListControlには項目のみが表示されます。
ListControlにデータの取得方法を伝えるには、次のようにします。
-
ListControlがItemsプロパティに表示する項目を指定します
一般的なパターンは、ListControlのItemsプロパティを、SearchDataSourceコンポーネントなどのデータ ソース コンポーネントのItemsプロパティにバインドすることです。ListControlは、SearchDataSourceが取得する項目を自動的に表示します。
ListControlは、データの取得、フィルター処理、または並べ替えを行いません。この設定の大部分は、データソースコンポーネントにあります。ListControlは、データ ソースがデータを並べ替える方法をデータ ソースに伝達できます。
ソート可能な列を有効にする
ソート可能な列を有効にする
並べ替えを有効にするには、1つ以上の列を並べ替え可能にし、アイテムを提供するデータ ソースで並べ替えを設定します。
-
列フィールド項目で、ユーザーが並べ替えられるようにする列フィールド項目ごとに、Sortableフィールドを選択します。
-
データ ソースのSortingプロパティをListControlのSortingプロパティにバインドします。
ListControlを使用すると、ユーザーは並べ替えを有効にした列で並べ替えることができます。ユーザーが並べ替え順序を変更すると、このバインディングにより、データ ソースはすぐに更新されます。