SharePoint 2013 コントロール表示テンプレートを使用して検索結果アイテムの一覧表示のデザインを変更する

Article
05/09/2014

こんにちは、SharePoint サポートの佐伯です。
今回の投稿では、コントロール表示テンプレートのカスタマイズについてご紹介します。

コントロール表示テンプレートについて
コントロール表示テンプレートには、検索結果を表示する全体的な構造が定義されています。例えば、検索結果全体のレイアウト、ページングや並べ替え等の共通の機能が含まれます。
参考) SharePoint 2013 検索結果の表示を制御する表示テンプレート今回は、コントロール表示テンプレートに定義されたアイテムの一覧表示についてとりあげます。実際に、SharePoint 既定で用意されているコントロール表示テンプレートを見てみましょう。以下は、コンテンツ検索 Web パーツのコントロール表示テンプレートです。コントロール表示テンプレートによって、アイテムの一覧がどのように表示されるかが異なります。

(Control_ から始まるテンプレートがコントロール表示テンプレート、Item_ から始まるテンプレートがアイテム表示テンプレートです。アイテム表示テンプレートには、アイテムのどの情報を表示させるか、またどのように表示させるかが定義されています。)今回はコントロール表示テンプレートをカスタマイズして、検索結果アイテムの一覧表示のデザインを変更する方法をご紹介します。

例) 検索結果アイテムの一覧表示のデザインを変更する
それでは、コンテンツ検索 Web パーツの検索結果アイテムが以下のように表示されるようカスタマイズしましょう。

まずは、検索結果アイテムの画像が上に、詳細が下に表示されるよう、アイテム表示テンプレートを編集します。

- アイテム表示テンプレートを編集する
ファイル名を Item_PictureDetail.html とし、以下のようなコードを記述します。

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head><title>上に画像、下に詳細を表示</title></head><body><script>$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");</script><div id="Item_PictureDetails"><div id="_#= containerId =#_" data-displaytemplate="ItemPictureOnTop" style='padding-right:24px;padding-bottom:24px;width:100px;'><div id="_#= pictureContainerId =#_" style='width:100px;height:100px;'><a class="cbs-pictureImgLink" href="_#= linkURL =#_" title="_#= $htmlEncode(line1) =#_" id="_#= pictureLinkId =#_">_#= pictureMarkup =#_</a></div><div class="cbs-pictureOnTopDataContainer ms-noWrap" id="_#= dataContainerId =#_"><a class="cbs-pictureOnTopLine1Link" href="_#= linkURL =#_" title="_#= $htmlEncode(line1) =#_" id="_#= line1LinkId =#_">_#= line1 =#_</a><div class="cbs-pictureOnTopLine2 ms-textSmall ms-noWrap" title="_#= $htmlEncode(line2) =#_" id="_#= line2Id =#_" > _#= line2 =#_</div></div></div></div></body></html>

マスターページギャラリーの [Display Templates] - [Content Web Parts] に Item_PictureDetail.html をアップロードし、コンテンツ検索 Web パーツのアイテム表示テンプレートに設定します。
アイテムはこのような表示になりました。

次に、検索結果アイテムが 4 つずつ横並びに表示されるよう、コントロール表示テンプレートを編集しましょう。

- コントロール表示テンプレートを編集する
ファイル名を Control_Table.html とし、以下のようなコードを記述します。

<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head><title>表形式</title></head><body><script>$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");</script><div id="Control_Table"><ul class="cbs-List">_#= ctx.RenderGroups(ctx) =#_</ul><div class="_#= noResultsClassName =#_">_#= $noResults =#_</div></div></body></html>

マスターページギャラリーの [Display Templates] - [Content Web Parts] に Control_Table.html をアップロードし、コンテンツ検索 Web パーツのコントロール表示テンプレートに設定します。
また、1 行につき 4 アイテムずつ表示させるため、Web パーツの幅を 500 ピクセルに指定します。

検索結果アイテムが以下のように表示されました！ いかがでしたか。ご要件に合わせて表示テンプレートの編集を行ってください。

検索結果のカスタマイズや設定について、過去の投稿もご参考にしていただけますと幸いです。
SharePoint 2013 検索の設定やカスタマイズに関する投稿まとめ

SharePoint 2013 コントロール表示テンプレートを使用して検索結果アイテムの一覧表示のデザインを変更する

Additional resources