JSLink文件中使用field的自定义属性

SharePoint 2013提供了JSLink这种非常方便的方式来自定义field的展示。例如一个自定义的field为ColorField, 有一个自定义的属性为Color，下面是一个最简单的在list view form种展示field的值的js代码：

首先在field的定义中重写JSLink属性：

public override string JSLink
{
get
{
return "/_layouts/15/mysolutions/colorfield.js";
}
}

然后在colorfield.js文件中，添加以下代码，就完成了最简单的field值的展示，代码中只是把ColorField的值展示在list view form中，没有任何其他的功能了。

(function () {
var colorFieldContext = {};
colorFieldContext.Templates = {};
colorFieldContext.Templates.Fields = {
"MySolution.ColorField": {
"View": function (ctx, field) {
var fieldName = ctx.CurrentFieldSchema.RealFieldName;
var fieldValue = ctx.CurrentItem[fieldName];
return fieldValue;
}
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(cbfContext);
})();

现在需要做的是根据自定义的Color属性的值，为ColorField的值添加不同的样式，这里需要用到一个trick，首先在重写JSLink的地方，添加查询字符串，把自定义的field的name和Color属性的值放到查询字符串中，这样我们在客户端就可以读取到当前的field的Color属性了：

public override string JSLink
{
get
{
return stirng.Format("/_layouts/15/mysolutions/colorfield.js?fieldname={0}&color={1}", this.InternalName, this.Color);
}
}

然后在colorfield.js文件中添加下面代码，把field的Color属性使用数组保存起来（因为一个list中可能有多个ColorField）。

var ColorFieldsConfigs = [];  //保存list中所有ColorField的配置
var allScripts = document.scripts || document.getElementsByTagName('script');
var scriptAmount = allScripts.length;
for (i = 0, i < scriptAmount; i++)
{
var script = allScripts[i];
if (script .src && (script .src.indexOf('/colorfield.js?') != -1))
{
var query = script .src.split('?')[1];
var args = query.split('&');
var config = {};
var fieldName = null;
for (var j in args)
{
var arg = args[j].split('=');
if (arg[0] == 'fieldname')
fieldName = arg[1];
else
config[arg[0]] = arg[1];
}
if (fieldName)
ColorFieldsConfigs[fieldName] = config;
}
}

取到了Color属性的配置信息，就可以根据field的Color属性的值来展示不同的样式了，所以colorfield.js的完整代码为：

var ColorFieldsConfigs = [];  //保存list中所有ColorField的配置
var allScripts = document.scripts || document.getElementsByTagName('script');
for (i = 0, l = allScripts.length; i < l; i++)
{
var script = allScripts[i];
if (script .src && (script .src.indexOf('/colorfield.js?') != -1))
{
var query = script .src.split('?')[1];
var args = query.split('&');
var config = {};
var fieldName = null;
for (var j in args)
{
var arg = args[j].split('=');
if (arg[0] == 'fieldname')
fieldName = arg[1];
else
config[arg[0]] = arg[1];
}
if (fieldName)
ColorFieldsConfigs[fieldName] = config;
}
}

(function () {
var colorFieldContext = {};
colorFieldContext.Templates = {};
colorFieldContext.Templates.Fields = {
"MySolution.ColorField": {
"View": function (ctx, field) {
var fieldName = ctx.CurrentFieldSchema.RealFieldName;
var fieldValue = ctx.CurrentItem[fieldName];
var color = ColorFieldsConfigs[fieldName];
if (color == "Red")
{
fieldValue = "<div class='RedColor'>" + fieldValue + "</div>";
}
else if (color == "Green")
{
fieldValue = "<div class='GreenColor'>" + fieldValue + "</div>";
}
return fieldValue;
}
}
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(cbfContext);
})();

参考：https://social.msdn.microsoft.com/Forums/office/en-US/7f9935a4-4d5c-494c-90bc-863b28c1e6eb/how-to-make-custom-field-properties-custom-schema-of-a-custom-field-type-available-for-csr?forum=sharepointdevelopment