Nibble

Extending Umbraco Contour 2.0 for Umbraco 5, creating a custom field type

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

image

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:

image

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

image

Once that is created drop your assembly in the lib subfolder (create it first)

image

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).

image

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

image

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.

Download the example project

3 Comments so far

  1. Ciwan on April 20th, 2012

    Hello

    Can you please do a post (aimed at n00bs) on how you would go about creating a content managed image slider.

    It would be a great help, and very useful to Umbraco n00bs such as myself.

    Thank You.

  2. Martin Griffiths on December 7th, 2012

    Hi Tim

    This post is now relevant to Contour 3 and Umbraco 4.11.1 when using a partial view rather than a user control.

    How on earth do I extract the custom properties from something like, the reCaptcha so that I can get the public key stored in the form???

    Martin.

  3. Tai iwin on December 10th, 2012

    It is great post. thanks

Leave a Reply