SharePoint 2013 検索結果のホバーパネルをカスタマイズする

こんにちは、SharePoint サポートの佐伯です。
今回の投稿では、検索結果のホバーパネルのカスタマイズについて取り上げます。

検索結果にマウスポインターを移動すると、上の画像のようにホバーパネルが表示されます。
ホバーパネルには、アイテムの種類や更新者といったアイテムの情報が表示されます。ここで表示される内容は、ホバーパネル表示テンプレートによって定義されています。このホバーパネル表示テンプレートを編集することで、検索結果のホバーパネルをカスタマイズすることができます。
※表示テンプレートの概要については、過去の投稿をご参照ください。

この投稿の後半では、ホバーパネル表示テンプレート (*.html) を作成する方法をご紹介します。
まずは、ホバーパネル表示テンプレートについて説明していきます。

[ホバーパネル表示テンプレートについて]
ホバーパネルで表示される内容は、ホバーパネル表示テンプレートに定義されています。SharePoint では、既定で用意されているホバーパネル表示テンプレートがあります。
例えば、サイトアイテム用のホバーパネル表示テンプレートでは、以下のようなホバーパネルが表示されます。このような情報が表示されることで、検索結果のアイテムのページに移動する前に、どのようなアイテムかをイメージすることができますね。

こちらはコミュニティアイテム用のホバーパネル表示テンプレートを使用して表示しています。

こちらは投稿アイテム用のホバーパネル表示テンプレートを使用して表示しています。

以上で、ホバーパネル表示テンプレートの定義によってホバーパネルの表示が変わることがイメージできましたでしょうか。それでは次に、検索結果のアイテムにマウスポインターを移動した際、どのようにして使用するホバーパネル表示テンプレートが決まり、ホバーパネルが表示されるのかを見ていきましょう。

アイテム表示テンプレートを確認していきましょう。
検索結果のアイテムを表示するアイテム表示テンプレート内に、使用するホバーパネル表示テンプレートと、検索結果にマウスポインターを合わせた際の動作が記述されています。

以下は "既定のアイテム" というアイテム表示テンプレート (*.html) です。

以下のコードによって、このアイテム表示テンプレートが適用された検索結果で使用する、ホバーパネルの表示テンプレートが指定されています。
var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_Default_HoverPanel.js";

このコードから、Item_Default では Item_Default_HoverPanel がホバーパネル表示テンプレートとして指定されていることが分かります。
(補足) 検索結果の描画には *.js ファイルが使用されます。そのため、上記のように Item_Default_HoverPanel.js ファイルを指定します。詳しくは過去の投稿をご覧下さい。

さらに、検索結果にマウスポインターを合わせた際およびマウスポインターをはずした際の動作が onmouseover、onmouseout イベントによって記述されています。
<div id="_#= $htmlEncode(itemId) =#_" name="Item" data-displaytemplate="DefaultItem" class="ms-srch-item" onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_">

もし、検索結果でホバーパネルを非表示にしたい場合は、上の記述を削除すれば OK です。つまり、以下のような記述に変更します。
例) <div id="_#= $htmlEncode(itemId) =#_" name="Item" data-displaytemplate="DefaultItem" class="ms-srch-item" >

ホバーパネル表示テンプレート (*.html) の作成
それでは実際に、ホバーパネル表示テンプレートを作成してみましょう。
SharePoint 既定で用意されている、”既定のホバーパネル” というホバーパネル表示テンプレートを適用すると、以下の画像のようなホバーパネルが表示されます。
こちらでは変更者や変更日時が表示されていますが、今回はアイテムのプレビューを表示するホバーパネル表示テンプレート (*.html) を作成し、以下の検索結果に適用してみましょう。

SharePoint 既定のホバーパネル表示テンプレート "既定のホバーパネル" をコピーして、作成します。
なお、*.html ファイルは発行インフラストラクチャをアクティブにしている場合のみ作成できます。この投稿では、発行インフラストラクチャをアクティブにしたサイトで *.html ファイルを作成する方法をご紹介します。
1. [サイトの設定] - [Web デザイナーギャラリー] - [マスターページ] をクリックし、マスターページギャラリーを開きます。
2. [Display Templates]、[Search] の順にフォルダを展開し、Item_Default_HoverPanel.html ファイルをダウンロードします。
3. ダウンロードした Item_Default_HoverPanel.html ファイルのファイル名を変更します。ここでは、Item_Custom_HoverPanel.html に変更します。
4. Item_Custom_HoverPanel.html ファイルを開き、<body> タグの直後にある <div> の id に、この *.html ファイルのファイル名を記述します。
<body>
<div id="Item_Custom_HoverPanel">

5. <title> には表示テンプレートのタイトルを入力します。
<title>カスタムのホバーパネル</title>

6. <mso:MasterPageDescription> には表示テンプレートの説明を記述します。
<mso:MasterPageDescription msdt:dt="string">結果アイテムのプレビューを表示します。</mso:MasterPageDescription>

7. 変更者や変更日時を表示していた、以下のコードを削除します。
_#= ctx.RenderBody(ctx) =#_

(補足) 上記のコードにより、共通のホバーパネル表示テンプレート Item_CommonHoverPanel_Body を参照します。詳細は過去の投稿をご参照ください。

8. 手順 7 でコードを削除した箇所に、アイテムのプレビューを表示する以下のコードを追加します。

<div id="_#= idGlassViewerEncoded =#_" class="ms-srch-hover-glass-siteViewer"></div>
<iframe id="_#=idViewerEncoded=#_" src="_#= $urlHtmlEncode(ctx.CurrentItem.csr_Path) =#_" scrolling="no" frameborder="0px" class="ms-srch-hover-siteViewer">
</iframe>

9. Item_Custom_HoverPanel.html ファイルを保存します。これでホバーパネル表示テンプレートの作成は完了です。
Item_Custom_HoverPanel.html ファイルは下記のようになります。
<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">
<head>
<title>カスタムのホバーパネル</title>

</head>
<body>
    <div id="Item_Custom_HoverPanel">

        <div class="ms-srch-hover-innerContainer ms-srch-hover-standardSize" id="_#= $htmlEncode(id + HP.ids.inner) =#_">
            <div class="ms-srch-hover-arrowBorder" id="_#= $htmlEncode(id + HP.ids.arrowBorder) =#_"></div>
            <div class="ms-srch-hover-arrow" id="_#= $htmlEncode(id + HP.ids.arrow) =#_"></div>
            <div class="ms-srch-hover-content" id="_#= $htmlEncode(id + HP.ids.content) =#_" data-displaytemplate="DefaultHoverPanel">
                <div id="_#= $htmlEncode(id + HP.ids.header) =#_" class="ms-srch-hover-header">
                    _#= ctx.RenderHeader(ctx) =#_
                </div>
                <div id="_#= $htmlEncode(id + HP.ids.body) =#_" class="ms-srch-hover-body">

<div id="_#= idGlassViewerEncoded =#_" class="ms-srch-hover-glass-siteViewer"></div>
<iframe id="_#=idViewerEncoded=#_" src="_#= $urlHtmlEncode(ctx.CurrentItem.csr_Path) =#_" scrolling="no" frameborder="0px" class="ms-srch-hover-siteViewer">
</iframe>

                </div>
                <div id="_#= $htmlEncode(id + HP.ids.actions) =#_" class="ms-srch-hover-actions">
                    _#= ctx.RenderFooter(ctx) =#_
                </div>
            </div>
        </div>
    </div>
</body>
</html>

ホバーパネル表示テンプレートが作成できたら、アイテム表示テンプレートに、検索結果にマウスオーバーした際に表示するホバーパネル表示テンプレートを設定します。
今回は、既定のアイテム表示テンプレート Item_Default に、上の手順で作成したホバーパネル表示テンプレート Item_Custom_HoverPanel を表示させるよう、設定してみましょう。

- アイテム表示テンプレートにホバーパネル表示テンプレートを設定する
Item_Default.html ファイルを開き、Item_Default_HoverPanel.js の指定を以下のように Item_Custom_HoverPanel.js に変更し、保存します。
var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_Custom_HoverPanel.js";

- 表示テンプレートファイルのアップロードと適用
編集した Item_Custom_HoverPanel.html ファイルと Item_Default.html をマスターページギャラリーにアップロードします。

それでは検索ボックスに検索キーワードを入力し、検索をしてみましょう！

ホバーパネルにアイテムのプレビューが表示されました！！
(アイテムの変更者や変更日時から、アイテムのプレビューに変更されましたね。)

今回の投稿は以上です。

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

Last updated on 2013-12-19

Share via

SharePoint 2013 検索結果のホバー パネルをカスタマイズする

Additional resources

SharePoint 2013 検索結果のホバーパネルをカスタマイズする