Extending Umbraco Contour 2.0 for Umbraco 5, creating a custom field type 3
Like mentioned in the previous post there are some changes in Contour 2.0 when creating custom field types for Contour running on Umbraco v5. So in this post I’ll show a first complete example.
A custom field type consists of 2 main things:
- A class containing the definition
- The view that will be used to render the fields of the custom field types
Fieldtype class
So similar to how it is when extending Contour 1.x you’ll need a class that inherits from Umbraco.Forms.Core.FieldType (need to reference Umbraco.Forms.Core).
public class CustomFieldType: FieldType
In the constructor you’ll need to set the id of the provider.
this.Id = new Guid("4EF14104-2334-42F4-85D2-C426CA2800C8");
And some stuff that will be used by the form designer, the name (will appear in the field type selector of the form designer), the icon (also shown in the form designer).
this.Name = "Custom fieldtype";
this.Icon = "../../../../ExampleFieldType/Content/Images/custom.png";
Will result in the following (assuming that the icon is located at \App_Plugins\Packages\ExampleFieldType\Content\Images~\custom.png
You’ll also have to specify the html code that will be shown as a preview in the form designer
public override string RenderPreview()
{
return "<input type=\"text\" class=\"textfield\" value=\"custom preview\" />";
}
Will result in the following preview shown on the form designer:
Here is the full code snippet (you can download the source at the bottom of this post)
using System;
using System.Collections.Generic;
using Umbraco.Forms.Core;
namespace ContourV5.ExampleFieldType
{
public class CustomFieldType: FieldType
{
public CustomFieldType()
{
this.Id = new Guid("4EF14104-2334-42F4-85D2-C426CA2800C8");
this.Name = "Custom fieldtype";
this.Description = "Renders an example fieldtype";
this.Icon = "../../../../ExampleFieldType/Content/Images/custom.png";
this.DataType = FieldDataType.LongString;
}
public override string RenderPreview()
{
return "<input type=\"text\" class=\"textfield\" value=\"custom preview\" />";
}
public override string RenderPreviewWithPrevalues(List<object> prevalues)
{
return RenderPreview();
}
}
}
Fieldtype view
Another part that is needed is a view that will be used to output the fields of your custom fieldtype.
The minimum, so important here is to use the FieldViewModel (need to reference Umbraco.Forms.MVC) and that the name of the input is set to @Model.Name since this will be used to fetch and save the value.
@model Umbraco.Forms.MVC.Models.FieldViewModel
@{
Layout = null;
}
<input type="text" name="@Model.Name" id="@Model.Id" class="text" value="" />
If you also want to support record editing and showing the stored value when moving back and forth in multi step forms you’ll need to check if there are already record values and then set the value of your control
@model Umbraco.Forms.MVC.Models.FieldViewModel
@{
Layout = null;
string val = string.Empty;
if(Model.RecordValues != null)
{
val = Model.RecordValues.First().ToString();
}
}
<input type="text" name="@Model.Name" id="@Model.Id" class="text" value="@val" />
And in order to support client side validation there are also some additions to be made (extra attributes)
@model Umbraco.Forms.MVC.Models.FieldViewModel
@{
Layout = null;
string val = string.Empty;
if(Model.RecordValues != null)
{
val = Model.RecordValues.First().ToString();
}
}
<input type="text" name="@Model.Name" id="@Model.Id" class="text" value="@val"
@{if(Model.Field.Mandatory)
{
<text>data-val="true" data-val-required="@Model.RequiredErrorMessage"</text>
}
}
/>
Adding the custom fieldtype
You’ll of course need to have Contour installed first, once that is installed you can add your custom fieldtype. To keep a clean overview of the extensions installed on your Umbraco v5 site simply create a new folder in the /App_Plugins/Packages directory
Once that is created drop your assembly in the lib subfolder (create it first)
You can then drop other resources like the field type icon in your custom directory (make sure this matches the path of the icon property on your fieldtype).
The view however needs to go in the
/App_Plugins/Packages/Contour/Views/Partial/ directory and needs to be named following the convention FieldType.FieldTypeClassName.cshtml
Porting existing fieldtypes to Contour 2.0 for Umbraco v5
Basically you’ll just have to create the view and if you want to do some additional processing of the value(s) also override the ProcessValue method on your field type class.

