Share via

SharePoint 2013 検索結果のホバー パネルにカスタムのアクションを追加する

こんにちは、SharePoint サポートの佐伯です。
今回の投稿では、検索結果のホバー パネルにカスタムのアクションを追加するカスタマイズをご紹介します。

ホバー パネル表示テンプレートについて
ホバー パネル表示テンプレートとは、検索結果のアイテムにオンマウスした際に表示されるホバー パネルを定義した表示テンプレートです。
参考) SharePoint 2013 検索結果の表示を制御する表示テンプレート(検索結果のホバー パネル) さらに、ホバー パネル表示テンプレートは、ホバー パネルのヘッダー、本体、アクションでそれぞれ定義された表示テンプレートを参照しています。
参考) SharePoint 2013 すべての検索結果の種類に共通する表示をカスタマイズする

今回は、このアクション部分の表示テンプレートを編集し、カスタムのアクションを追加するカスタマイズについてご紹介します。

例) ホバー パネルにリストへのリンクを追加する
SharePoint 既定では、リスト アイテムのホバー パネルには、 [開く] リンクおよび [送信] リンクが表示されます。ここに、リスト ページへ移動するカスタム アクションを追加するカスタマイズを行いましょう。

1. [サイトの設定] – [Web デザイナー ギャラリー] – [マスター ページ] をクリックし、マスター ページ ギャラリーを開きます。
2. [Display Template]、[Search] の順にフォルダを展開し、Item_CommonHoverPanel_Actions.html をダウンロードします。
3. Item_CommonHoverPanel_Actions.html ファイルを開き、リストへのリンクを表示する以下のコードを追加し、保存します。

<!--#_
        if(!Srch.U.e(ctx.CurrentItem.ParentLink)
           && !$isNull(ctx.CurrentItem.contentclass)
           && ctx.CurrentItem.contentclass.indexOf("STS_ListItem") > -1
           && !ctx.CurrentItem.IsDocument) {
_#-->
<div class="ms-srch-hover-action">
                <a clicktype="ActionViewList" id="_#= $htmlEncode(id + HP.ids.parentLink) =#_" class="ms-calloutLink ms-uppercase" title="この結果が含まれるリストを開きます" href="_#= $urlHtmlEncode(ctx.CurrentItem.ParentLink) =#_">リストの表示</a>
            </div>
<!--#_
        }
_#-->

補足) [送信] リンクの右側に表示させたい場合は、下記のコードの後に、リストへのリンクを表示する上記のコードを追加します。
        <div class="ms-srch-hover-action">
<!--#_
            var emailLink = HP.GetEmailLink(ctx.CurrentItem.Title, ctx.CurrentItem.Path, ctx.CurrentItem.csr_ClientType, ctx.CurrentItem.ServerRedirectedURL);
_#-->
<a clicktype="ActionSend" id="_#= $htmlEncode(id + HP.ids.send) =#_" class="ms-calloutLink ms-uppercase" title="_#= $htmlEncode(Srch.Res.hp_Tooltip_Send) =#_" href="_#= $htmlEncode(emailLink) =#_">
                _#= $htmlEncode(Srch.Res.hp_Send) =#_
</a>
</div>
4. 編集した Item_CommonHoverPanel_Actions.html をマスター ページ ギャラリーの [Display Template] - [Search] フォルダに上書きアップロードします。

検索を行うと・・・
このように、リストへのリンクが表示されました！
上記は参考例となりますので、ご要件に合わせて編集を行ってください。
今回の投稿は以上です。

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

  • Last updated on