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 でコードを削除した箇所に、アイテムのプレビューを表示する以下のコードを追加します。
<!--#_
var loadSiteFrame = false;
if(!Srch.U.w(ctx.CurrentItem.csr_Path) && Srch.U.isSameHost(ctx.CurrentItem.csr_Path, Srch.U.getHostName())) {
    loadSiteFrame = true;
    var idViewerEncoded = $htmlEncode(id + HP.ids.viewer);
    var idGlassViewerEncoded = "glass_" + idViewerEncoded;
_#-->
<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>
<!--#_
}
if(loadSiteFrame){
              AddPostRenderCallback(ctx, function(){
                            HP.loadSiteViewer(ctx.CurrentItem.id, ctx.CurrentItem.id + HP.ids.inner, id + HP.ids.viewer, ctx.CurrentItem.csr_Path, "glass_" + id + HP.ids.viewer);
              });
}
_#-->

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>

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
<mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden>
<mso:MasterPageDescription msdt:dt="string">結果アイテムのプレビューを表示します。</mso:MasterPageDescription>
<mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId>
<mso:TargetControlType msdt:dt="string">;#SearchHoverPanel;#</mso:TargetControlType>
<mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated>
<mso:ManagedPropertyMapping msdt:dt="string">'Title':'Title','Path':'Path','Description':'Description','EditorOWSUSER':'EditorOWSUSER','LastModifiedTime':'LastModifiedTime','CollapsingStatus':'CollapsingStatus','DocId':'DocId','HitHighlightedSummary':'HitHighlightedSummary','HitHighlightedProperties':'HitHighlightedProperties','FileExtension':'FileExtension','ViewsLifeTime':'ViewsLifeTime','ParentLink':'ParentLink','FileType':'FileType','IsContainer':'IsContainer','SecondaryFileExtension':'SecondaryFileExtension','DisplayAuthor':'DisplayAuthor'</mso:ManagedPropertyMapping>
</mso:CustomDocumentProperties>
</xml><![endif]-->
</head>
<body>
    <div id="Item_Custom_HoverPanel">
<!--#_
        var i = 0;
        var id = ctx.CurrentItem.csr_id;
        ctx.CurrentItem.csr_ShowViewLibrary = !Srch.U.isWebPage(ctx.CurrentItem.FileExtension);
        if(ctx.CurrentItem.IsContainer)
        {
            ctx.CurrentItem.csr_FileType = Srch.Res.ct_Folder
        }
        ctx.currentItem_ShowChangedBySnippet = true;
_#-->
        <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">
<!--#_
var loadSiteFrame = false;
if(!Srch.U.w(ctx.CurrentItem.csr_Path) && Srch.U.isSameHost(ctx.CurrentItem.csr_Path, Srch.U.getHostName())) {
    loadSiteFrame = true;
    var idViewerEncoded = $htmlEncode(id + HP.ids.viewer);
    var idGlassViewerEncoded = "glass_" + idViewerEncoded;
_#-->
<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>
<!--#_
}
if(loadSiteFrame){
              AddPostRenderCallback(ctx, function(){
                            HP.loadSiteViewer(ctx.CurrentItem.id, ctx.CurrentItem.id + HP.ids.inner, id + HP.ids.viewer, ctx.CurrentItem.csr_Path, "glass_" + id + HP.ids.viewer);
              });
}
_#-->
                </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 検索の設定やカスタマイズに関する投稿まとめ

Comments (0)

Skip to main content