在SharePoint 2013中使用JSLink + Callout 展示信息（1）

我们知道SharePoint 2013提供了一个新功能，即使用JSLink来改变列表中字段的显示方式。下面就写一个简单的自定义字段，并使用JSLink来改变字段的显示方式。

第一步，打开VS 2012，创建一个solution，添加一个SharePoint project，添加一个feature，取名为FlyingField：

第二步，添加“CONTROLTEMPLATES”这个mapping folder，在其中定义User Control “FlyingFieldUserControl.ascx” 来提供模板:

<SharePoint:RenderingTemplate ID="FlyingFieldRenderingTemplate" runat="server">    <Template>        <asp:TextBox runat="server" ID="txtValue"></asp:TextBox>    </Template></SharePoint:RenderingTemplate>

模板非常简单，只有一个文本框，相应后台代码：

public partial class FlyingFieldUserControl : BaseFieldControl    {        protected TextBox txtValue;        protected override string DefaultTemplateName        {            get            {                return "FlyingFieldRenderingTemplate";            }        }        public override object Value        {            get            {                EnsureChildControls();                return txtValue;            }            set            {                try                {                    EnsureChildControls();                    txtValue.Text = value.ToString();                }                catch                {                }            }        }        protected override void CreateChildControls()        {            if (Field == null) return;            base.CreateChildControls();            if (ControlMode == SPControlMode.Display) return;            txtValue = (TextBox)TemplateContainer.FindControl("txtValue");            if(ControlMode == SPControlMode.New)            {                txtValue.Text = "";            }        }    }

第三步，添加一个文件FlyingField.cs，定义FlyingField这个自定义的栏（继承自SPFieldText类）：

public class FlyingField : SPFieldText    {        public FlyingField(SPFieldCollection fields, string fieldName) : base(fields, fieldName)        {        }        public FlyingField(SPFieldCollection fields, string typeName, string displayName) : base(fields, typeName, displayName)        {        }        public override BaseFieldControl FieldRenderingControl        {            get            {                BaseFieldControl fieldControl = new FlyingFieldUserControl();                fieldControl.FieldName = this.InternalName;                return fieldControl;            }        }        public override string JSLink        {            get            {                return "/_layouts/15/FlyingField/scripts/flyscript.js";            }            set            {                base.JSLink = value;            }        }    }

这里重写了JSLink这个属性，其指向的js文件稍后会详细介绍。

第四步就是添加自定义栏的xml文件fldtypes_custom.xml，其中指定一些属性：

<?xml version="1.0" encoding="utf-8"?><FieldTypes>  <FieldType>    <Field Name="TypeName">FlyingField</Field>    <Field Name="ParentType">Text</Field>    <Field Name="TypeDisplayName">Flying Field</Field>    <Field Name="TypeShortDescription">Flying Field Description</Field>    <Field Name="UserCreatable">TRUE</Field>    <Field Name="ShowOnListCreate">TRUE</Field>    <Field Name="ShowOnSurveyCreate">TRUE</Field>    <Field Name="ShowOnDocumentLibrary">TRUE</Field>    <Field Name="ShowOnColumnTemplateCreate">TRUE</Field>    <Field Name="Sortable">TRUE</Field>    <Field Name="Filterable">TRUE</Field>    <Field Name="FieldTypeClass">FlyingField.FlyingField, FlyingField, Version=1.0.0.0, Culture=neutral, PublicKeyToken=b9fef60d81126a0e</Field>    <Field Name="SQLType">nvarchar</Field>  </FieldType></FieldTypes>

注意请修改PublicKeyToken的值。

最后一步添加JSLink使用的文件“flyscript.js”：

(function() {    var fieldJsLinkOverride = { };    fieldJsLinkOverride.Templates = { };    fieldJsLinkOverride.Templates.Fields = {        'FlyingField': { 'View': GetFlyingCallout }    };    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldJsLinkOverride);})(); function GetFlyingCallout(ctx) {    var flyValue = ctx.CurrentItem.fly;    return "test - " + flyValue;}

请注意这行代码：

return "test - " + flyValue;

就是将自定义栏的值，加上了“test -”前缀并返回，于是在list中，自定义栏的值都会加上这个前缀。

所以这个solution的结构应该是：

部署之后，就可以使用这个自定义栏了。将这个栏添加到list中去，并在list中添加一个item的结果如下：

可以看到，fly的值加上了“test -”前缀。因此只要我们修改方法“GetFlyingCallout”就可以随意改变自定义栏的展示方式了。

以上就是在自定义栏中使用JSLink的方法，现在可以抛弃SharePoint 2007和2010中使用的xsl的方法来修改字段的展示方式了，使用JSLink大大简化了工作，使我们可以使用js自定义展示方式，非常方便。下一篇会结合JSLink和SharePoint的另一个新功能Callout来开发另一种自定义栏。