Thursday, September 5, 2013

Creating a custom field type using client-side rendering

1. Right-click the farm solution project and add a new class. Name the class file FavoriteColorFieldType.cs.
2. Copy the following code and paste it in the FavoriteColorFieldType.cs file.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
namespace CustomField
    public class FavoriteColorField : SPFieldText
        private const string JSLinkUrl = "~site/_layouts/15/CustomField/CSRFieldType.js";
        public FavoriteColorField(SPFieldCollection fields, string name)
            : base(fields, name) { }
        public FavoriteColorField(SPFieldCollection fields, string typename, string name)
            : base(fields, typename, name) {}
        public override string JSLink
                return JSLinkUrl;
                base.JSLink = value;

1.Right-click the farm solution project, and add a SharePoint mapped folder. In the dialog box, select the {SharePointRoot}\Template\XML folder.
2.Right-click the XML folder created in the last step, and add a new XML file. Name the XML file fldtypes_FavoriteColorFieldType.xml.

<?xml version="1.0" encoding="utf-8" ?>
    <Field Name="TypeName">FavoriteColorField</Field>
    <Field Name="TypeDisplayName">Favorite color field</Field>
    <Field Name="TypeShortDescription">Favorite color field</Field>
    <Field Name="InternalType">Text</Field>
    <Field Name="SQLType">nvarchar</Field>
    <Field Name="FieldTypeClass">CustomField.FavoriteColorField, $SharePoint.Project.AssemblyFullName$</Field>
    <Field Name="ParentType">Text</Field>
    <Field Name="Sortable">TRUE</Field>
    <Field Name="Filterable">TRUE</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>

1.Right-click the farm solution project, and add the SharePoint Layouts mapped folder. A folder created with solutin name
2.Right-click the Layouts->'solution name folder' folder that you created in the last step, and add a new JavaScript file. Name the JavaScript file CSRFieldType.js.

(function () {
    var favoriteColorContext = {};
    favoriteColorContext.Templates = {};
    favoriteColorContext.Templates.Fields = {
        "FavoriteColorField": {
            "View": favoriteColorViewTemplate
function favoriteColorViewTemplate(ctx) {
    var color = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    return "<span style='background-color : " + color + "' >&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;" + color;

Now Cteate a Custom List in SharePoint.
And Create a Custom Field using "Custom files type" namely "Favorite color field".
now add few records and in 'FavColFld' give these values "red", "yellow", "green"
Thank You.

No comments:

Post a Comment