SharePoint 2010 Create custom fieldtype with picker & dialog

In my last posts i explained already how to create a custom fieldtype and how to create a custom picker. This time i would like to combine these two really cool functionalities and provide you a nice possibility to improve the user experience at your SharePoint application. So please start first with the project with the custom picker from this post –  we will extend this project.

Ok the project is opened and we are ready. What do we need for a custom fieldtype? Right, we need a xml file, a class for the field and a class for the fieldcontrol and a cup of coffee before we start putting things together.

Fieldtype Definition

Update: thank you Craig – i wrote controltemplates/xml but in fact it is templates/xml as mapped folder!

Add a mapped folder to templates/xml. In this folder you have to add a xml file. This xml file should contain our fieldtype definition which looks like this:

[sourcecode language=”csharp”]

SPCustomPicker
Text
Custom Picker
Custom Picker
TRUE
TRUE
TRUE
TRUE
TRUE
TRUE
SPCustomPicker.FieldCode.SPCustomPickerField,$SharePoint.Project.AssemblyFullName$

[/sourcecode]

Important note: Everything should be written with starting capital letters: FieldType and Field – not fieldtype. The editor above does not save capital letters, so sorry for this.

Field Class

The field class has not so many lines of code.

[sourcecode language=”csharp”]

namespace SPCustomPicker.FieldCode
{
public class SPCustomPickerField : SPFieldText
{
public SPCustomPickerField(SPFieldCollection fields, string fieldName) : base(fields, fieldName)
{

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

}

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

[/sourcecode]

Field Control

In the field control we define what happens. Nothing special at this time – the most logic is implemented in the custom picker classes. But we have to make sure that the values will be saved and displayed which are choosen from picker.

[sourcecode language=”csharp”]

namespace SPCustomPicker.FieldCode
{
public class SPCustomPickerFieldControl : BaseFieldControl
{
private SPCustomPickerEditor picker = null;

public override object Value
{
get
{
this.EnsureChildControls();

string val = null;
if (this.picker != null)
{
if (this.picker.ResolvedEntities.Count > 0)
{
PickerEntity pickerEntity = (PickerEntity)this.picker.ResolvedEntities[0];
val = pickerEntity.EntityData[pickerEntity.Key] as string;
}

if (val == null)
picker.IsValid = false;
}

return val;
}

set
{
this.EnsureChildControls();

string val = value.ToString();

PickerEntity pickerEntity = new PickerEntity
{
Key = val,
IsResolved = true,
DisplayText = val,
Description = val
};
pickerEntity.EntityData.Add(pickerEntity.Key, pickerEntity.DisplayText);
ArrayList arrayList = new ArrayList();
arrayList.Add(pickerEntity);
picker.UpdateEntities(arrayList);
}
}

protected override string DefaultTemplateName
{
get
{
return “SPCustomPickerField”;
}
}
public override void Validate()
{
base.Validate();
if (base.Field.Required)
{
if (picker.ResolvedEntities.Count > 0)
{
this.IsValid = true;
}
else
this.IsValid = false;
}
}
public override void UpdateFieldValueInItem()
{
ItemFieldValue = Value;
}

protected override void CreateChildControls()
{
base.CreateChildControls();
try
{
if (this.ControlMode != SPControlMode.Display)
{

 

picker = (SPCustomPickerEditor)this.TemplateContainer.FindControl(“myCustomPicker”);

picker.Validate();
}
}
catch
{

}
}
}
}

[/sourcecode]

RenderingTemplate

Of course we also need to define a rendering template for the control, but we already did it in my last post about creating the picker dialog. We can use this one. I created a mapped folder to controltemplates and added a user control with the name “SPCustomPicker.ascx”

[sourcecode language=”csharp”]

< %@ 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#" Debug="true" %>
< %@ Register TagPrefix="custPicker" Namespace="SPCustomPicker.FieldCode" Assembly="$SharePoint.Project.AssemblyFullName$" %>

[/sourcecode]

DEPLOY & TEST

After deployment the custom fieldtype should be available also for lists. So we can use our custom picker in a normal list.

Is that cool, isn’t it? I like to use picker and i like to use custom fieldtypes, but using both together is really fantastic.

Just for info the structure:

..:: I LIKE SHAREPOINT ::..