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.
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:
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
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.
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.
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?
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
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
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.
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:
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
Thats it, all done. Hope this helps somebody. Contour V3 is proving to be very flexbile indeed!
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.
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 : )
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
is working on a reply...