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