SharepPoint 2013-自定義顯示模板

時間 2019-12-18

標籤 shareppoint 自定義顯示模板简体版

原文原文鏈接

一、顯示模板介紹
css

SharePoint Server 2013中的顯示模板用於Web部件中，使用搜索技術（本文中指搜索 Web 部件，只有搜索 Web 部件可使用顯示模板。內容查詢 Web 部件不是搜索驅動部件，所以不使用顯示模板。）顯示對搜索索引的查詢結果。顯示模板控制顯示在搜索結果中的託管屬性，以及在 Web 部件中顯示的方式。每一個顯示模板都由兩個文件組成：一個是能夠在 HTML 編輯器中進行編輯的 HTML 版顯示模板，另外一個是 SharePoint 使用的 .js 文件（對 HTML 顯示模板所作的更改將同步到關聯的 .js 文件。與母版頁和頁面佈局不一樣，在使用顯示模板時，您沒法經過破壞文件之間的關聯選擇僅使用 .js 文件。必須在 HTML 文件中輸入全部 HTML 和 JavaScript。）html

二、顯示模板和Web部件的關係架構

顯示模板有兩種主要類型：app

控件模板決定結果顯示方式的總體架構。包括列表、分頁列表和幻燈片放映。編輯器
項模板決定集中的每一個結果的顯示方式。包括圖像、文本、視頻以及其餘項目。ide

控件顯示模板提供了 HTML，以構建但願的搜索結果顯示方式的總體佈局。例如，控件顯示模板可能會提供列表標頭及開頭和結尾的 HTML。控件顯示模板僅在 Web 部件中呈現一次。佈局

項顯示模板提供的 HTML 決定每一個項目在結果集中的顯示方式。例如，項顯示模板可能會提供列表項的 HTML，其中包含的圖片和三行文本映射到與項目關聯的不一樣託管屬性。每一個項目的項顯示模板在結果集中呈現一次。所以，若是結果集包含十個項目，則項顯示模板會建立 HTML 部分十次。網站

三、顯示模板結構
this

用於顯示模板的 HTML 文件是全形 HTML 文檔，但不顯示完整的 HTML 網頁。SharePoint 將顯示模板 HTML 文件片斷轉換爲 JavaScript。本節將說明顯示模板的四個主要部分。編碼

Title 標記

搜索 Web 部件處於編輯模式時，顯示模板文件的 <title> 標記中的文本用做 Web 部件編輯窗格"顯示模板"部分的顯示名稱。如下示例是名稱爲"Item_Picture3Lines.html" 的項顯示模板：

<title>Picture on left, 3 lines on right</title>

標頭屬性

緊接着 <title> 標記的是如下標記綁定的自定義元素集：

<!--[if gte mso 9]><xml>
<mso:CustomDocumentProperties>
…
</mso:CustomDocumentProperties>
</xml><![endif]-->

這些元素及其屬性爲 SharePoint 環境提供了有關顯示模板的重要信息。表 1 說明了用於顯示模板的自定義屬性。

表 1. CustomDocumentProperties 條目列表

屬性	說明
TemplateHidden	指示是否在 Web 部件的可用模板列表中隱藏顯示模板的布爾值。此值可在顯示模板文件屬性中進行更改。
ManagedPropertyMapping	將搜索結果項目公開的字段映射到 JavaScript 可用的屬性中。僅用於項目模板中。
MasterPageDescription	提供顯示模板簡單易懂的描述。此屬性在 SharePoint 編輯環境中顯示。此值可在顯示模板文件屬性中進行更改。
ContentTypeId	與顯示模板關聯的內容類型的 ID。
TargetControlType	指示顯示模板所使用的上下文。此值可在顯示模板文件屬性中進行更改。
HtmlDesignAssociated	指示顯示模板 HTML 文件是否具備與其相關聯的 .js 文件的布爾值。
HtmlDesignConversionSucceeded	指示轉換過程是否成功。此值由 SharePoint 自動添加到文件中，且僅用於自定義顯示模板中。
HtmlDesignStatusAndPreview	包含 HTML 文件的 URL 和狀態列（"轉換成功"或"警告和錯誤"）的文本。此值由 SharePoint 自動添加到文件，且僅用於自定義顯示模板中。

腳本塊

在 <body> 標記內，能夠看到如下 <script> 標記：

<script>
     $includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");
</script>

默認狀況下，此行包括在全部顯示模板中。能夠將 <script> 標記中的更多代碼行添加到引用 CSS 文件或主顯示模板 HTML 文件外部的其餘 JavaScript 文件。表 2 顯示瞭如何包括其餘資源的示例。

表 2. 在 <script> 標記中包括外部資源的示例

若是您想要包括如下外部資源：	使用如下代碼：
做爲當前網站集的一部分的 JavaScript 文件	$includeScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/MyScripts.js");
外部 JavaScript 文件	$includeScript(this.url, "http://www.contoso.com/ExternalScript.js");
做爲當前網站集的一部分的 CSS 文件	$includeCSS(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/MyCSS.css");
與當前顯示模板相對的位置中的 CSS 文件	$includeCSS(this.url,"../../MyStyles/MyCSS.css");

DIV 塊

註釋
若是您但願爲運行時呈現於頁面上的 HTML 塊分配 CSS 樣式或 ID，能夠添加一個新的標記到第一個 <div> 標記內。還能夠爲控件模板中包圍變量 _#= ctx.RenderGroups(ctx) =#_ 的 HTML 分配 CSS 樣式或 ID。變量 _#= ctx.RenderGroups(ctx) =#_ 用於呈現包圍項目模板呈現的查詢結果的 HTML。

您在第一個 <div> 標記中能夠看到以  結尾的註釋塊中的代碼。可使用這些塊中的 JavaScript 代碼，以及塊以外的 HTML。還可使用這些塊控制帶有條件語句的 HTML。爲此，使用帶有條件語句和左方括號的註釋塊，而後是 HTML，而後是另外一個帶有右方括號的註釋塊。如下示例中的定位標記僅在 linkURL 對象的值不爲空時呈如今頁面上。

<!--#_
if(!linkURL.isEmpty)
{
_#-->
     <a class="cbs-pictureImgLink" href="_#= linkURL =#_" title="_#= $htmlEncode(line1.defaultValueRenderer(line1)) =#_" id="_#= pictureLinkId =#_"><!--#_
}
_#-->

映射輸入屬性並獲取其值

項顯示模板的標頭部分具備一個名稱爲 ManagedPropertyMapping 的自定義文檔屬性。此屬性採用搜索使用的託管屬性，並將它們映射到可由顯示模板使用的值。此屬性是以逗號分隔的值的列表，使用如下格式：'屬性顯示名稱'{屬性名稱}:'託管屬性'。例如，'Picture URL'{Picture URL}:'PublishingImage;PictureURL;PictureThumbnailURL'。

咱們來看看詳細的格式：

屬性顯示名稱是在選定顯示模板後，顯示於 Web 部件編輯窗格中的屬性名稱。
屬性名稱是使用本地化字符串資源查找託管屬性的名稱的標識符。也是顯示在 Web 部件設置菜單"屬性映射"部分的值。編輯 Web 部件的設置時，能夠更改此值，以更改關聯到 Web 部件中顯示的字段的託管屬性。
託管屬性是一個或多個託管屬性的字符串，用分號隔開。在運行時，對列表從左至右求值，與當前搜索項目的託管屬性名稱匹配的第一個值將映射到此槽。這讓您能夠對可使用多個項目類型，以及能夠在存在兼容屬性時使用一致呈現的顯示模板進行寫入。

映射屬性以後，能夠經過使用如下代碼獲取腳本中的值：var pictureURL = $getItemValue(ctx, "Picture URL");

傳遞給 $getItemValue() 的第二個參數必須與用於 ManagedPropertyMapping 元素中單引號中的屬性顯示名稱匹配。本示例中，Picture URL 是傳遞給 $getItemValue() 的屬性名稱。

此代碼返回值信息對象 (valueInfoObj)。此對象包含輸入值的原始表示形式，以及使用適用默認編碼的值。

能夠像往常那樣使用 JavaScript 部分中的變量，對變量進行操做並建立 HTML 字符串以在運行時呈如今頁面上。可是，若要引用 HTML 的腳本中直接聲明的變量，必須使用如下格式：_#= variableName =#_。例如，若要使用變量 pictureURL 做爲圖像的值，請使用如下 HTML：<img src="_#= pictureURL =#_" />

經過顯示模板使用 jQuery

能夠經過顯示模板使用 jQuery。可是請注意兩個重要因素：

若要在顯示模板中包括 jQuery 庫，請按照本文以前所述的腳本塊一節中的說明執行操做。
若是使用 jQuery 中的 ID 選擇器，請使用如下代碼建立 ID 的變量：var containerQueryId = '#' + '_#= containerId =#_';
使用如下代碼引用 jQuery 中的選擇器：$('_#= containerQueryId =#_')

原文連接：http://msdn.microsoft.com/library/jj945138.aspx

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。