Chapter 6 – Custom Field Types

While working through Sahil Malik’s book (Building Solutions for SharePoint 2010), the first really tough example you could face is in above mentioned Chapter 6. Here the author guides you in creating custom type columns with custom behavior, which results in a solution glued from various different pieces. This could be disturbing at the first glance, so let me help you understand what’s going on using some diagrams displaying those interrelated pieces. At the end of the day this kind of visualization helped me greatly in understanding the orchestration behind the scenes.

First of all regarding Ajax toolkit, please don’t try to use any other (newer) versions of the mentioned Toolkit except the suggested “Version=3.0.30930.28736”. My mistake was downloading and integrating rather the Version 3.5 from this codeplex site. Deploying and running the solution I have got a large number of Script-Related Exceptions. I have learned that SharePoint 2010 by default does not work with those newer Ajax Control Toolkit releases. Here the related article in this regard.

Back to the solution. Here (Picture 1) I’m trying to visualize the interrelated parts. Just click on the picture to enlarge and see more details. Let’s start at Number 1 on the left hand side. This is the screenshot of the …\14\TEMPLATE\XML file-subsystem which keeps the particular xml-file named fldTypes_AutoComplete.xml which turns out to be the starting piece in this recent puzzle.


Picture 1

The content of this xml-file is depicted here as well (Number 2; Picture 1). Two element values are essential.  Firstly the field named TypeDisplayName which is directly wired with the list of available column types and inserts the “Auto Complete Song” type into the list (Number 4; Picture 1). Check out how in SharePoint 2010 the available column-types list is displayed (Numbers 3; Picture 1).

In other words, in order to display & offer to the user the custom type column named “Auto Complete Song” we have to create the appropriate Type-Definition for that column in form of an xml-file. Secondly one more essential element in that xml-file the TypeName is directly referencing the Type represented by the  AutoCompleteField C# class (Number 5 at Picture 1). So Picture 1 is purely about the Façade which is solely for the optic yet without any internal logic.

The next Picture 2 is trying to display the engine behind the Façade. After the user in action selects the “Auto Complete Song” type column she will surely proceed with adding an item to her customized list. This is the starting point to kick on the engine (Number 1; Picture 2). The TextBox Control’s destiny is to display matching lines from a previously defined songs list. This TextBox Control is however special (Number 2; Picture 2) and is defined in the AutoCompleteField.ascx control-template.


Picture 2

The AutoCompleteFiled.ascx control template resides on the file-system (Number 3; Picture 2) in the folder  …\14\TEMPLATE\CONTROLTEMPLATES similarly to the previously mentioned xml template (different location however). The major responsibility of this ascx-control is the visualization of the suggested lines of songs achieved using the Auto-Complete behavior. That behavior is defined here as well (Number 2; Picture 2) and is referencing the AutoCompleteExtender control from the Ajax Control Toolkit. So this is the definitive engine doing the logic and running some additional custom code as well (e.g. the Web Service ==> see Number 5). Furthermore note the Attribute ID=”autoCompleteField” (Number 2; Picture 2). This ID is the glue between the popping up DialogBox and the visualization itself (Number 4; Picture 2).

Lastly the bridge between the Pictures 1 and 2 is depicted within Picture 3. As soon AutoCompleteField is asked to do the predefined search & auto-complete job, it will trigger the rendering of it’s child controls which subsequently will ignite the engine and run the Ajax Control Toolkit extender including the Web Service.


Picture 3

Here the list of major components contained in this solution

  1. Column’s Field-Template, xml definition
  2. Text box’s Control-Template, ascx defintion
  3. C# class related to the above Field-Template (AutoCompleteField)
  4. C# class related to the above Control-Template (AutoCompleteFieldControl)
  5. Web Service, svc definition along with the query engine
This entry was posted in SharePoint 2010. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s