Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Drew Garratt 44 posts 192 karma points
    Apr 24, 2013 @ 14:59
    Drew Garratt

    Creating custom FieldType with multiple SingleLine textboxes

    I'm just getting started with creating my own field type and after following a few examples I have the basics down. But I seem to have fallen of perhaps a lack of experience with System.Web.UI.WebControls.

    What I'd like to do with a number of Datatypes is include multiple <inpt type="text"> elements in a single FieldType. That I might generate output like the example bellow.

    <div class="contourField firstname textfield">
      <label for="e9a2373e-405a-488a-81d9-bf0b37044c6e" class="fieldLabel">Name</label>  
      <input type="text" name="First-Name" id="First-Name" class="text" value="" maxlength="500">
        <input type="text" name="Last-Name" id="Last-Name" class="text" vale="" maxLength="500">
      <span class="field-validation-valid" data-valmsg-for="e9a2373e-405a-488a-81d9-bf0b37044c6e" data-valmsg-replace="true"></span>

    My trouble I is I'm not sure what element to create to return in the public override WebControl Editor or indeed if I will need to define a custom Control to match up with this.

    I also believe I'd be right in thinking that I would need to add an additional view to control the rendered output.

    Has anyone tackled this previously who might be able to point me in the right direction?

    Thanks everyone ^-^

    Umbraco 6.0.3 - Contour 3.0.10

  • Comment author was deleted

    Apr 24, 2013 @ 15:01

    Hey Drew,

    The webcontrols are needed if you want to render the form with the usercontrol macro if you want to render with the razor macro you'll need to setup the view

    What will you be using then I can give you some extra details 

  • Drew Garratt 44 posts 192 karma points
    Apr 24, 2013 @ 15:06
    Drew Garratt

    Hi Tim,

    The project I'm working on is MVC based so it's razor Macros for me at pressent. I've got custom controllers setup to handle social sign in but for dealing with the longer forms where data requirements may chop and change I was hoping to use custom FieldTypes and Contour to collect data.

    I've already made little modifications to my forms view files so I'm pretty sure I know what I'm doing that end, it's at the FieldType and Control end I've managed to get lost.


  • Comment author was deleted

    Apr 24, 2013 @ 15:07

    Ok you don't need to worry about the webcontrol stuff then, gimme a couple of minutes and I'll post an example here

  • Drew Garratt 44 posts 192 karma points
    Apr 24, 2013 @ 15:27
    Drew Garratt

    Thanks Tim thats very much appreciated. With a working example I should be able to repurpose this to all my multi textbox tasks.

  • Comment author was deleted

    Apr 24, 2013 @ 15:33

    Ok this is an example of an mvc only fieldtype 

    The fieldtype:

       public class DoubleNameFieldType : FieldType
            public DoubleNameFieldType()
                this.Id = new Guid("26CCC50E-502F-4ED7-9000-BA1A7FDFABD3");
                this.Name = "Double name Textfield";
                this.Description = "Renders a double html input fieldKey";
                this.Icon = "textfield.png";
                this.DataType = FieldDataType.String;
            public override string RenderPreview()
                return "<input type=\"text\" class=\"textfield\" /> <input type=\"text\" class=\"textfield\" />";
            public override string RenderPreviewWithPrevalues(List<object> prevalues)
                return RenderPreview();
            public override List<object> ProcessValue(HttpContextBase httpContext)
                List<Object> vals = new List<object>();
                var firstval = httpContext.Request[this.AssociatedField.Id.ToString()] ?? "";
                var secondval = httpContext.Request[this.AssociatedField.Id.ToString() + "_second"] ?? "";
                vals.Add(string.Concat(firstval," ",secondval));
                return vals;

    The view:

    @model Umbraco.Forms.Mvc.Models.FieldViewModel
    <input type="text" name="@Model.Name" id="@Model.Id" class="text" value="" maxlength="500"
        @{if(Model.Mandatory || Model.Validate){<text>data-val="true"</text>}}
        @{if (Model.Mandatory) {<text> data-val-required="@Model.RequiredErrorMessage"</text>}}
        @{if (Model.Validate) {<text> data-val-regex="@Model.InvalidErrorMessage" data-regex="@Model.Regex"</text>}}
    <input type="text" name="@{@Model.Name}_second" id="@{@Model.Id}_second" class="text" value="" maxlength="500"
  • Comment author was deleted

    Apr 24, 2013 @ 15:34

    basicly I added a second input but added _second to the name of the input

    then in the fieldtype I need to override the ProcessValue method to make sure the value of this one also get's added

  • Comment author was deleted

    Apr 24, 2013 @ 15:35

    Link to the sourcecode: (give it a couple of minutes it's still uploading)

  • Drew Garratt 44 posts 192 karma points
    Apr 24, 2013 @ 15:38
    Drew Garratt

    Thanks Tim that is enoumously handy and has saved me hours of confusion. Looks like this whole process is much simpler than I thought it would be once your looking at it in MVC.

    Just one more reason I can be glad I stuck to keeping this a Umbraco 6 MVC project =)

  • Comment author was deleted

    Apr 24, 2013 @ 15:41

    Well you'll probably need to fine tune it a bit but the basics are working and yes you don't need to worry about the webcontrols stuff :) glad I could help :)

  • Jonas 123 posts 206 karma points
    Aug 21, 2014 @ 11:40

    How do I install this in Umbraco?

  • Comment author was deleted

    Aug 25, 2014 @ 15:45

    Unzip and drop the dll in the bin directory

  • Kunal 19 posts 116 karma points
    Jan 18, 2019 @ 02:33

    Thank you Tim! Your sample helped me in getting something similar done.

Please Sign in or register to post replies

Write your reply to: