Copied to clipboard

Flag this post as spam?

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


  • Ben McKean 272 posts 549 karma points
    Feb 13, 2013 @ 16:03
    Ben McKean
    0

    Custom Field Type in V3

    Hi

    I want to add a new field type in Contour V3. Is it as straight forward as doing it in < V2? 

    I want my field type to be a date picker but be restricted to a date in the past. I know how to do this with JQuery UI and by editing the Script.cshtml file.

    Just need to know how to add the custom field type in V3.

    Thanks

    Ben

  • Comment author was deleted

    Feb 13, 2013 @ 16:58

    Maybe you don't need a custom fieldtype and can do it by customizing the markup

    http://our.umbraco.org/projects/umbraco-pro/contour/documentation/Developer/Custom-Markup/

    If you do need a custom fieldtype yes it should be the same as <v2 

  • Ben McKean 272 posts 549 karma points
    Feb 13, 2013 @ 17:04
    Ben McKean
    104

    I've managed to do this if anybody is interested. It involved the following steps:

    1. Create class for custom data type. Rather than doing this in separate project I just did this in App_Code folder but you could do this in a separate project and copy the dll over. After doing this the field type will then appear in the Type drop down when adding a field in Contour.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Umbraco.Forms.Core;
    using Umbraco.Forms.Core.Controls;
    using System.Web.UI.WebControls;
    
    /// <summary>
    /// Summary description for DatePickerPastDate_ContourFieldType
    /// </summary>
    public class DatePickerPastDate_ContourFieldType : FieldType
    {
        public DatePicker dp;
        public List<object> _value;
    
        public override WebControl Editor
        {
          get
          {
            this.dp = new DatePicker();
            this.dp.ID = "dp" + (object) this.Id;
            if (this._value.Count > 0)
              this.dp.SelectedDate = new DateTime?((DateTime) this._value[0]);
            return (WebControl) this.dp;
          }
          set
          {
            base.Editor = value;
          }
        }
    
        public override List<object> Values
        {
          get
          {
            if (this.dp != null && this.dp.SelectedDate.HasValue)
            {
              this._value.Clear();
              this._value.Add((object) this.dp.SelectedDate);
            }
            return this._value;
          }
          set
          {
            this._value = value;
          }
        }
    
        public override bool SupportsRegex
        {
          get
          {
            return false;
          }
        }
    
        public DatePickerPastDate_ContourFieldType()
        {
          this.Id = new Guid("9e881b5f-7ca6-4567-9f2d-32f07b2b119d");
          this.Name = "DatePicker - past date";
          this.Description = "Renders a date picker that is restricted to date in the past";
          this.Icon = "datepicker.png";
          this.DataType = FieldDataType.DateTime;
          this.RequiresScriptManager = true;
          this._value = new List<object>();
        }
    
        public override string RenderPreview()
        {
          return "<input type=\"text\" class=\"textfield\" /> <img src=\"images/Calendar.png\" alt=\"datepicker\" />";
        }
    
        public override string RenderPreviewWithPrevalues(List<object> prevalues)
        {
          return this.RenderPreview();
        }
    
        public override List<object> ProcessValue(HttpContextBase httpContext)
        {
          List<object> list = new List<object>();
          DateTime result;
          if (httpContext.Request[this.AssociatedField.Id.ToString()] != null && DateTime.TryParse(httpContext.Request[this.AssociatedField.Id.ToString()], out result))
            list.Add((object) result);
          return list;
        }
    }

    2. Create the Razor script to render the field type. This needs to go in:  \umbraco\plugins\umbracoContour\Views\ along with the ones for other field types. The file needs to be called the same as your name in the class above without spaces etc. So my field was called FieldType.datepickerpastdate.cshtml.

    3. Copy the contents from FieldType.DatePicker.cshtml however change the class attribute. This is used later to target the text box for the JQuery UI date picker. The source should be:

    @model Umbraco.Forms.Mvc.Models.FieldViewModel        
    <input type="text" name="@Model.Name" id="@Model.Id" class="datepickerfield_past" value="@Model.Value"
    @{if (Model.Mandatory) {<text> data-val="true" data-val-required="@Model.RequiredErrorMessage"</text>}}
    /

    4. Edit the JQuery used by Contour to change the settings for the date picker. So as well as the standard date picker, we also have our new one in there setting the max date. This file is  \umbraco\plugins\umbracoContour\scripts\Frontend\contourform.js

            $(".datepickerfield").datepicker({ dateFormat: contourDateFormat });
    
            $(".datepickerfield_past").datepicker({ dateFormat: contourDateFormat, maxDate: '0' }); // our date picker

     

    Thats it, all done. Hope this helps somebody. Contour V3 is proving to be very flexbile indeed!

  • Ben McKean 272 posts 549 karma points
    Feb 13, 2013 @ 17:05
    Ben McKean
    0

    Thanks Tim. I wanted to be able to give CMS admins the ability to add a normal date picker and also one that is restricted to a date in the past. Hopefully my solution is the best way of doing it.

  • Wojciech Tengler 95 posts 198 karma points
    May 21, 2014 @ 18:58
    Wojciech Tengler
    0

    I have my own captcha - custom FieldType prepared for Umbraco Contour form rendered by usercontrol.

    Now I need to transform my custom FieldType to Umbraco Contour form rendered by Razor bacause I need conditional fields.

    I have just found this example http://www.nibble.be/?p=154 but it is very simple example which doesn't help me.

    My captcha has two controls TextBox and Image. I don't know how I can render this controls in cshtml. I need to set special url (derived from server side) for image src and perform server side validation.

    I spend a lot of time on this issue and I'm axausted.

    Please help me : )

  • Jonathan Roberts 409 posts 1063 karma points
    Jan 26, 2015 @ 13:24
    Jonathan Roberts
    1

    Hi,

    We are using Umbraco 7.2 with Contour and we want to create our own TinyMCE FieldType so we can post HTML but we are getting into some difficulties. When following the code above we are getting no suitable method found to override. We are inheriting the FieldType as described above.

    Are there any uptodate examples on how to create a TinyMCE FieldType for Contour?

    Many thanks

    Jon

Please Sign in or register to post replies

Write your reply to:

Draft