我们知道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来开发另一种自定义栏。