Create custom field type with user control

Hello everybody,

Today I will talk about a problem I had with Custom Field Type.

The goal was to create a custom field type and have a user control for display. Control was necessary because I had to apply a regular expression that conditioned the formatting.

There are many tutorials explaining step by step how to do this operation but for the sake of cohesion I will remember those steps.

1) Add a class field definition

For this example we are going from the standard type of field, type “text”. We will therefore inherit “SPFieldText.” In this class we will define the two constructors of our standard custom field.


2) Mapping xml folder:

To do this, right click on the project, add a folder mapped SharePoint

The xml folder is located in the folder “SharePointRoot\template”

3) Add an xml file in the folder mapped xml

Very important! : The file name must begin with fldtypes_

For this example I called it: fldtypes_TutoCustomField.xml

In this xml file we will describe the properties of our field.

Once these two files are created, we can already see the field in action if we deploy the solution.

Very important! : For the new file type being visible when we create a new field, we must perform a iisreset, recycle the application is not enough.

Create a new list and add our new column.

Until here no problem, we will now add a control to our field.

4) Add the User control.

Very very very very important ! : Here we touch upon the main reason for this tutorial. Namely, avoid you to pull your hair out and send the pc through the window being frustrated (yes I admit it smells lived).

When we add a user control with Visual Studio 2010, this is what it does.

A) If absent, it adds a mapped folder on the file “ControlTemplates”

B) If absent, it adds a folder named by our project

C) it adds the control.

Handy you might say, except that by default, SharePoint does not search the subfolders of the folder ControlTemplates for customs field type, it looks only for components in folder ControlTemplates.

Let’s put our control in the correct folder. Also delete files “. Cs” control, the only thing we need is the “ascx”.

In our ascx file, delete the links to the code behind class of the line “Control”

Became

Now add “RenderingTemplate” that will be used to display our control in the page “edit item” and “view item”.

In the first, “TutoCustomFieldControl” we will have a textbox to retrieve the data. In the second, “TutoCustomFieldControlForDisplay” we will have a label to display the field value.

5) Add the class definition of control.

In this class we will define the behavior of our control, including the possible treatments for display and perform the save.

So let’s create our class “TutoCustomFieldControl” which inherits from “BaseFieldControl”. In this class we will start by declaring the components of our “RenderingTemplate” label “MyCustomNameLabel” and the textbox “MyCustomNameText”

We also need to override two variables: DefaultTemplateName and DisplayTemplateName as follows.

With this override, we specify the name of our custom “RenderingTemplate.

Now let’s override CreateChildControl function.

In this override, we test the type of view. If this is an edition, we fill the textbox with the contents of the field.

We still need a thing. If we allow this class like this, the field changes will not be saved. We must add a saving event on our field.

After loading control, we add the event which, after validation of the page, performs the update of the item.

6) Override the “FieldRenderingControl” class of our field.

The last step is to modify our “TutoCustomField” class to add a surcharge calling our new class “TutoCustomFieldControl”.

Well, now we can deploy our solution. If you did the test field at the end of section 3 the updated code will not be effective in this field. Remove and re-create it to have a solution that works!

7) Change the display in the list.

We can go one step further by changing the rendering of the field in the list.

For this we must add an xsl file. Begin by mapping the xsl folder, this one is in the folder “SharePointRoot\template\layouts”

Then add an xsl file

Very important ! : We need the xsl file named the same as the xml file of our field. It should be called “fldtypes_TutoCustomField.xsl”

We will change the text color in red, for it just add a “span” around the field

Pay close attention to “FieldType” which must match the type of our field.

Let’s deploy our solution without forgetting to make an iisreset for the new file being used.

And voila!

Happy coding to everyone !

Christopher.

Advertisements