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.

Picker11

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:

Picker12

..:: I LIKE SHAREPOINT ::..

The article or information provided here represents completely my own personal view & thought. It is recommended to test the content or scripts of the site in the lab, before making use in the production environment & use it completely at your own risk. The articles, scripts, suggestions or tricks published on the site are provided AS-IS with no warranties or guarantees and confers no rights.

About Karsten Schneider 312 Articles
Consultant for Microsoft 365 Applications with a strong focus in Teams, SharePoint Online, OneDrive for Business as well as PowerPlatform with PowerApps, Flow and PowerBI. I provide Workshops for Governance & Security in Office 365 and Development of Solutions in the area of Collaboration and Teamwork based on Microsoft 365 and Azure Cloud Solutions. In his free time he tries to collect tipps and worthy experience in this blog.

6 Comments

  1. Great post but so far I can’t seem to get it working yet. I feel like I’m really close. I noticed in your instructions that you have us create the xml file in controltemplates/xml but in the image you have it under the root of the project in a folder called xml. Which is correct?

    • Hi Craig,
      thank you, i updated the post. You’re totally right, the mapped folder is the xml folder below template (14\template). There you put your xml file into.
      Hope it helps you! And thanks for your comment, great!

  2. Hello,

    Nice post. I followed the first tutorial and it worked fine as an application page.

    However when I tried to deploy it as a custom field after following this second part it does not appear as a type when i want to create a column for a list.

    Do you have any idea why it doesn’t work.
    I’m working with SharePoint 2013.

  3. FieldType definition xml file name should start with “fldtypes” word. I use fldtypes_SPCustomPicker.xml name for example. Then everything works fine.

Leave a Reply

Your email address will not be published.


*