前回のポスト
コンテンツ検索webパーツの表示をカスタマイズする
のオマケです。
SharePoint2013では、検索結果のアイテムにカーソルをあてると詳細がホバーパネルで表示されます。
しかし、コンテンツ検索 web パーツではホバーパネルが表示されません。そこで、なんとか表示させるべくカスタマイズしてみました。
完成イメージはこちら。
ホバーパネルの表示テンプレートは、マスターページギャラリー＞Display Templates＞Searchフォルダの中にあります。
このうち、Item_xxx_HoverPanel.htmlというのがそれです。検索結果のファイルタイプによって、表示テンプレートが細かく分けられているのですね。
今回は、Item_Default_HoverPanel.htmlをダウンロードして使います。
ダウンロードしたItem_Default_HoverPanel.htmlを開き、中身を以下のように書き換えます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> | |
| <head> | |
| <title>Blog Hover Panel</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','AuthorOWSUSER':'AuthorOWSUSER','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','DiscussionPost':'DiscussionPost','Created':'Created'</mso:ManagedPropertyMapping> | |
| </mso:CustomDocumentProperties> | |
| </xml><![endif]–> | |
| </head> | |
| <body> | |
| <div id="Item_Blog_HoverPanel"> | |
| <!–#_ | |
| var postMaxLengthInChars = 500; | |
| var i = 0; | |
| var id = ctx.CurrentItem.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; | |
| var userPersonaId = id + "_peopleUserPersona"; | |
| var authorUsername = Srch.U.getUsernameFromAuthorField(ctx.CurrentItem.AuthorOWSUSER); | |
| AddPostRenderCallback(ctx, function() | |
| { | |
| Srch.SSU.renderPersona(authorUsername, userPersonaId); | |
| }); | |
| _#–> | |
| <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="BlogHoverPanel"> | |
| <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 class="ms-srch-hover-post"> | |
| <div id="_#= $htmlEncode(userPersonaId) =#_" class="ms-srch-hover-postPersona"></div> | |
| <div><p> | |
| <h4> | |
| <!–#_ | |
| var author = ""; | |
| if (!$isEmptyString(ctx.CurrentItem.AuthorOWSUSER)) | |
| { | |
| author = Srch.U.getDisplayNameFromAuthorField(ctx.CurrentItem.AuthorOWSUSER); | |
| } | |
| _#–> | |
| _#= $htmlEncode(author) =#_ | |
| </h4></p> | |
| <div class="ms-srch-hover-text ms-srch-hover-postText"> | |
| _#= $htmlEncode(Srch.U.truncateEnd(ctx.CurrentItem.DiscussionPost, postMaxLengthInChars)) =#_ | |
| </div> | |
| <div class="ms-metadata"> | |
| <!–#_ | |
| if(!$isNull(ctx.CurrentItem.Created)) | |
| { | |
| var timeSincePostId = id + "_timeSincePost"; | |
| AddPostRenderCallback(ctx, function() | |
| { | |
| Srch.U.renderFriendlyTimeIntervalString(ctx.CurrentItem.Created, timeSincePostId); | |
| }); | |
| _#–> | |
| <span class="ms-srch-hover-dateMetadata" id="_#= $htmlEncode(timeSincePostId) =#_"></span> | |
| <!–#_ | |
| } | |
| _#–> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="_#= $htmlEncode(id + HP.ids.actions) =#_" class="ms-srch-hover-actions"> | |
| _#= ctx.RenderFooter(ctx) =#_ | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
書き換えたファイルを「Item_Blog_HoverPanel.html」とリネームして保存し、Searchフォルダにアップロードします。
次に、前回のポストで作成した「Item_BlogPost.html」をダウンロードし、以下のように書き換えます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"> | |
| <head> | |
| <title>For Blog Post</title> | |
| <!–[if gte mso 9]><xml> | |
| <mso:CustomDocumentProperties> | |
| <mso:TemplateHidden msdt:dt="string">0</mso:TemplateHidden> | |
| <mso:ManagedPropertyMapping msdt:dt="string">'Picture URL'{画像の URL}:'PublishingImage;PictureURL;PictureThumbnailURL','Link URL'{リンクの URL}:'Path','Line 1'{行 1}:'Title','Line 2'{行 2}:'DiscussionPost','Line 3'{行 3}:'Created','Line 4'{行 4}:'AuthorOWSUSER','Line 5'{行 5}:'LikesCount', 'SecondaryFileExtension','ContentTypeId'</mso:ManagedPropertyMapping> | |
| <mso:MasterPageDescription msdt:dt="string">このアイテム表示テンプレートでは、100 x 100 の大きさでアイテムの画像が左側に表示されます。画像の右側には、タイトル、既定アイテムの説明、カスタムの管理プロパティ用の行が表示されます。</mso:MasterPageDescription> | |
| <mso:ContentTypeId msdt:dt="string">0x0101002039C03B61C64EC4A04F5361F385106603</mso:ContentTypeId> | |
| <mso:TargetControlType msdt:dt="string">;#Content Web Parts;#</mso:TargetControlType> | |
| <mso:HtmlDesignAssociated msdt:dt="string">1</mso:HtmlDesignAssociated> | |
| </mso:CustomDocumentProperties> | |
| </xml><![endif]–> | |
| </head> | |
| <body> | |
| <!– | |
| Warning: Do not try to add HTML to this section. Only the contents of the first <div> | |
| inside the <body> tag will be used while executing Display Template code. Any HTML that | |
| you add to this section will NOT become part of your Display Template. | |
| –> | |
| <script> | |
| $includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js"); | |
| </script> | |
| <!– | |
| Use the div below to author your Display Template. Here are some things to keep in mind: | |
| * Surround any JavaScript logic as shown below using a "pound underscore" (#_ … _#) token | |
| inside a comment. | |
| * Use the values assigned to your variables using an "underscore pound equals" | |
| (_#= … =#_) token. | |
| –> | |
| <div id="Item_BlogPost"> | |
| <!–#_ | |
| var id = ctx.ClientControl.get_nextUniqueId(); | |
| var itemId = id + Srch.U.Ids.item; | |
| var hoverId = id + Srch.U.Ids.hover; | |
| var hoverUrl = "~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_Blog_HoverPanel.js"; | |
| $setResultItem(itemId, ctx.CurrentItem); | |
| if(ctx.CurrentItem.IsContainer){ | |
| ctx.CurrentItem.csr_Icon = Srch.U.getFolderIconUrl(); | |
| } | |
| ctx.currentItem_ShowHoverPanelCallback = Srch.U.getShowHoverPanelCallback(itemId, hoverId, hoverUrl); | |
| ctx.currentItem_HideHoverPanelCallback = Srch.U.getHideHoverPanelCallback(); | |
| var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + "_BlogPost_"); | |
| var linkURL = $getItemValue(ctx, "Link URL"); | |
| linkURL.overrideValueRenderer($urlHtmlEncodeValueObject); | |
| var line1 = $getItemValue(ctx, "Line 1"); | |
| var line2 = $getItemValue(ctx, "Line 2"); | |
| var line3 = $getItemValue(ctx, "Line 3"); | |
| var line4 = $getItemValue(ctx, "Line 4"); | |
| var line5 = $getItemValue(ctx, "Line 5"); | |
| var StrLine5 = 0; | |
| if(!line5.isEmpty){ | |
| StrLine5 = line5.value; | |
| } | |
| var StrLine2 = line2.value; | |
| if (StrLine2.length > 150){ | |
| StrLine2 = StrLine2.substr(0, 150) + "…"; | |
| } | |
| var pictureURL = $getItemValue(ctx, "Picture URL"); | |
| var pictureId = encodedId + "picture"; | |
| var pictureMarkup = Srch.ContentBySearch.getPictureMarkup(pictureURL, 100, 100, ctx.CurrentItem, "cbs-picture3LinesImg", line1, pictureId); | |
| line1.overrideValueRenderer($contentLineText); | |
| line2.overrideValueRenderer($contentLineText); | |
| line3.overrideValueRenderer($contentLineText); | |
| line4.overrideValueRenderer($contentLineText); | |
| line5.overrideValueRenderer($contentLineText); | |
| var containerId = encodedId + "container"; | |
| var pictureLinkId = encodedId + "pictureLink"; | |
| var pictureContainerId = encodedId + "pictureContainer"; | |
| var dataContainerId = encodedId + "dataContainer"; | |
| var line1LinkId = encodedId + "line1Link"; | |
| var line1Id = encodedId + "line1"; | |
| var line2Id = encodedId + "line2"; | |
| var line3Id = encodedId + "line3"; | |
| var line4Id = encodedId + "line4"; | |
| var line5Id = encodedId + "line5"; | |
| var dataDisplayTemplateTitle = "BlogPost"; | |
| _#–> | |
| <div class="cbs-picture3LinesContainer ms-srch-item" id="_#= $htmlEncode(itemId) =#_" onmouseover="_#= ctx.currentItem_ShowHoverPanelCallback =#_" onmouseout="_#= ctx.currentItem_HideHoverPanelCallback =#_" data-displaytemplate="_#= $htmlEncode(dataDisplayTemplateTitle) =#_"> | |
| <div id="_#= $htmlEncode(hoverId) =#_" class="ms-srch-hover-outerContainer"></div> | |
| <div class="cbs-picture3LinesImageContainer" id="_#= pictureContainerId =#_"> | |
| <!–#_ | |
| if(!linkURL.isEmpty) | |
| { | |
| _#–> | |
| <a class="cbs-pictureImgLink" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_"> | |
| <!–#_ | |
| } | |
| _#–> | |
| _#= pictureMarkup =#_ | |
| <!–#_ | |
| if(!linkURL.isEmpty) | |
| { | |
| _#–> | |
| </a> | |
| <!–#_ | |
| } | |
| _#–> | |
| </div> | |
| <div class="cbs-picture3LinesDataContainer" id="_#= dataContainerId =#_"> | |
| <div style="overflow:hidden"> | |
| <a class="cbs-picture3LinesLine1Link" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= line1LinkId =#_" style="display:block"> | |
| <h4 class="cbs-picture3LinesLine1 ms-accentText2 ms-noWrap" id="_#= line1Id =#_"> _#= line1 =#_</h4> | |
| </a> | |
| <span class="cbs-picture3LinesLine4 ms-textSmall ms-noWrap" id="_#= line4Id =#_" style="float:right;">Posted By _#= line4 =#_</span> | |
| </div> | |
| <!–#_ | |
| if(!line2.isEmpty) | |
| { | |
| _#–> | |
| <div class="cbs-picture3LinesLine2" style="height:auto;" id="_#= line2Id =#_" > _#= StrLine2 =#_ </div> | |
| <!–#_ | |
| } | |
| _#–> | |
| <div style="overflow:hidden;"> | |
| <!–#_ | |
| if(!line3.isEmpty) | |
| { | |
| _#–> | |
| <span class="cbs-picture3LinesLine3 ms-textSmall ms-noWrap" id="_#= line3Id =#_" style="float:left;">[Posted : _#= line3 =#_]</span> | |
| <span class="cbs-picture3LinesLine5 ms-textSmall ms-noWrap" id="_#= line5Id =#_" style="float:right;">Likes Count : _#= StrLine5 =#_</span> | |
| <!–#_ | |
| } | |
| _#–> | |
| </div> | |
| <div> | |
| <a class="cbs-button1" href="_#= linkURL =#_" style="float:right;">Read More</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
書き換えたItem_BlogPost.htmlを、Content Web Partsフォルダにアップロードします。
以上です！
もし、カスタマイズが反映されない場合はコンテンツ検索webパーツの表示テンプレートで「For Blog Post」をえらびなおし、プロパティのマッピングで以下のように選択しなおしてみてください。
なお、カスタマイズにあたってはこちらの記事を参考にしました。
The SharepointWallah: Sharepoint 2013 Search – Adding a hover panel to a content search webpart display template.
C/D/H Talks Tech » Custom Hover Panel on the Content Search Web Part using a Custom Display Template
若干、無理やりな感じもありますが・・・参考になればうれしいです。
Me & SharePoint 