Try It Yourself: Create a Custom Field Type

1. Create a new Empty SharePoint project called AdvancedDropDownList.

2. Add a user control named CountryDropDownListTemplateControl.

3. Remove the codebehind and designer files.

4. Move the user control directly to the ControlTemplates folder.

5. Edit the user control as shown in the following code:

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %>
<%@ Assembly Name= "Microsoft.Web.CommandUI,
Version=14.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint"
Namespace="Microsoft.SharePoint.WebControls"
    Assembly="Microsoft.SharePoint,
Version=14.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="Utilities"
Namespace="Microsoft.SharePoint.Utilities"
Assembly="Microsoft.SharePoint,
Version=14.0.0.0, Culture=neutral,
PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="asp"
Namespace="System.Web.UI"
Assembly="System.Web.Extensions, Version=3.5.0.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35" %>
<%@ Import Namespace="Microsoft.SharePoint" %>
<%@ Register TagPrefix="WebPartPages"
Namespace="Microsoft.SharePoint.WebPartPages"
    Assembly="Microsoft.SharePoint,
    Version=14.0.0.0, Culture=neutral,
    PublicKeyToken=71e9bce111e9429c" %>
<%@ Control Language="C#" %>
<SharePoint:RenderingTemplate ID="CountryDropDownListTemplate" runat="server">
    <Template>
        <asp:DropDownList runat="server" ID="countryDropDownList" >
        </asp:DropDownList>
    </Template>
</SharePoint:RenderingTemplate>

The preceding code creates a user control for the field control. As you see in the following example this will be the rendering template for your field control. Note that this class must not have any codebehind and must be directly in the ControlTemplates folder and not in its subdirectory.

6. Add two new classes, CountryDropDownListField and CountryDropDownListFieldControl.

7. Update the code for the CountryDropDownListFieldControl class as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.SharePoint.WebControls;
using System.Web.UI.WebControls;
using Microsoft.SharePoint;

namespace AdvancedDropDownList
{
    public class CountryDropDownListFieldControl : BaseFieldControl
    {
        protected DropDownList countryDropDownList;

        public override object Value
        {
            get
            {
                EnsureChildControls();
                return countryDropDownList.SelectedValue;
            }
            set
            {
                EnsureChildControls();
                countryDropDownList.SelectedValue = this.ItemFieldValue as String;
            }
        }

        protected override void CreateChildControls()
        {
            if (this.Field == null | | this.ControlMode == SPControlMode.Display)
                return;
            base.CreateChildControls();
            countryDropDownList =
           TemplateContainer.FindControl("countryDropDownList")
           as DropDownList;

            string []countries =new string[]{
                "Australia",
                "Brazil",
                "Canada",
                "France",
                "Germany",
                "India",
                "Russia",
                "U.K.",
                "U.S.A."
            };

            // we could bind data from database or external source here
            countryDropDownList.DataSource = countries;
            countryDropDownList.DataBind();
        }

        protected override string DefaultTemplateName
        {
            get
            {
                return "CountryDropDownListTemplate";
            }
        }
    }
}

The preceding class represents your field control, which inherits from the BaseFieldControl, which is the base for all the other field controls. The interesting thing to note is the DefaultTemplateName property. The code overrides this property and returns the id of the rendering template defined in the user control you created.

8. Edit the CountryDropDownListField class and update as shown in the following code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;

namespace AdvancedDropDownList
{
    public class CountryDropDownListField : SPFieldChoice
    {
        public CountryDropDownListField(
SPFieldCollection fields, string fieldName) :
            base(fields, fieldName) {  }

        public CountryDropDownListField(
SPFieldCollection fields,
string typeName, string displayName) :
            base(fields, typeName, displayName) {  }

        public override BaseFieldControl FieldRenderingControl
        {
            get
            {
                BaseFieldControl fieldControl =
                new CountryDropDownListFieldControl();
                fieldControl.FieldName = InternalName;
                return fieldControl;
            }
        }
    }
}

This class is simple. The important thing to note is the FieldRenderingControl property where the field type is associated with the custom country field control. Finally you need to create your field type definition file.

9. Add a mapped folder for TEMPLATEXML and inside that folder add a new XML file; name it fldTypes_SearchableDropDownList.xml. Edit the XML as shown here:

<?xml version="1.0" encoding="utf-8" ?>
<FieldTypes>
  <FieldType>
    <Field Name="TypeName">CountryDropDownList</Field>
    <Field Name="ParentType">Choice</Field>
    <Field Name="TypeDisplayName">Country Drop Down List</Field>
    <Field Name="TypeShortDescription">Country Drop Down List</Field>
    <Field Name="UserCreatable">TRUE</Field>
    <Field Name="ShowInListCreate">TRUE</Field>
    <Field Name="ShowInSurveyCreate">TRUE</Field>
    <Field Name="ShowInDocumentLibraryCreate">TRUE</Field>
    <Field Name="ShowInColumnTemplateCreate">TRUE</Field>
    <Field Name="FieldTypeClass">
      AdvancedDropDownList.CountryDropDownListField,
      AdvancedDropDownList, Version=1.0.0.0, Culture=neutral,
      PublicKeyToken=d7df0b2df995d128
    </Field>
  </FieldType>
</FieldTypes>

This code specifies information like the TypeName, which is a unique name for the field type in the entire SharePoint farm. In addition you specify the field type class and assembly used for this field type.

Note that the final project structure should look as shown in Figure 11.1.

Figure 11.1. AdvancedDropDownList project structure

10. Deploy the solution.

11. Try to add a new site column to the simple list. You see the option to create a field using your new field type as shown in Figure 11.2.

Figure 11.2. Creating a new site column from a custom field type

12. Create the new site column and add it to the SimpleList created earlier.

13. Try to create a new item. You should see the drop-down list with the list of countries as shown in Figure 11.3.

Figure 11.3. The Create New Item Screen with a custom field