Sitecore custom field type

Creating a custom field type in the Sitecore is simple. Let's take an example for creating a field for Email validation, using our custom field type, that will include a button to check and will show a message if it is valid or not. Follow the simple steps below:

1. Create a class EmailField and inherit the class System.Web.UI.HtmlControls.Edit and copy the following code, later we will understand all the methods' importance.

using System;
using Sitecore.Web;
using Sitecore.Web.UI.Sheer;
using System.Web.UI.HtmlControls;
using Sitecore.Web.UI.HtmlControls;
using Sitecore;
using System.Text.RegularExpressions;

namespace BasicCompany.Feature.POC.Extension.FieldType
{
    public class EmailField : Edit
    {
        public EmailField()
        {
            this.Class = "scContentControl";
        }
        public override void HandleMessage(Message message)
        {
            base.HandleMessage(message);
            switch (message.Name)
            {
                case "emailfield:validate":
                    EmailValidate();
                    break;
            }

        }
        protected void EmailValidate()
        {
            string currentvalue = WebUtil.GetFormValue(ID);
            if (Regex.IsMatch(currentvalue, @"^([\w\.\-]+)@([\w\-]+)((\.(\w){2,3})+)$"))
                SheerResponse.SetInnerHtml("validator_" + ID, "Valid email entered!");
            else
                SheerResponse.SetInnerHtml("validator_" + ID, "Invalid");
        }
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
            this.ServerProperties["Value"] = this.ServerProperties["Value"];
        }
        protected override void Render(System.Web.UI.HtmlTextWriter output)
        {
            base.Render(output);
            RenderValidatorOutput(output);
        }
        protected void RenderValidatorOutput(System.Web.UI.HtmlTextWriter output)
        {
            HtmlGenericControl validatortext = new HtmlGenericControl("div");
            validatortext.Attributes.Add("ID", "validator_" + ID);
            validatortext.Attributes.Add("style", "color:grey");
            validatortext.InnerHtml = "";
            validatortext.RenderControl(output);
        }
        protected override bool LoadPostData(string value)
        {
            value = StringUtil.GetString(new string[1]
            {
                value
            });

            if (!(this.Value != value))
                return false;
            this.Value = value;
            base.SetModified();
            return true;
        }
    }
}

2.  Add a pathc config file in the /App_Config/Include/<your custom folder>:
<configuration xmlns:x="https://www.sitecore.com/xmlconfig/">
        <sitecore>
            <controlSources>
                  <source mode="on" namespace="BasicCompany.Feature.POC.Extension.FieldType"                                         assembly="BasicCompany.Feature.POC" prefix="xcore" />
            </controlSources>
          </sitecore>
</configuration>


Notice: We have not mentioned the class name "EditField" in the namespace attribute because of prefix=” your module/library prefix” will be used later to identify code for your control.
3. Create a new field type in Sitecore's Core DB
• Switch to the Core DB and create an item "/sitecore/system/Field types/Simple Types/EmailField" using template "/sitecore/templates/System/Templates/Template field type"
• 
• Specify the Control value – this is basically your prefix: your class name from the configuration file we created before
4. Now we will create a menu button similarly that we see on the "Rich Text" editor, and that will check if the entered value in the field is correct or not.
1. For this, we will create a regular folder named Menu and under that, we will create the button named Validate using template /sitecore/templates/System/Menus/Menu item as shown below:
• 
5. Add field using this new field type:



6. Now, let’s create an item based on the template in which we added the field using the custom field type, and verify our field renders:

and,

Now let's understand the meaning of the method:

//We set the CSS class “scContentControl” on 
//the field to align it with the design of text fields in Sitecore in general.
this.Class = "scContentControl";

//This checks if the button "validate" is clicked
//because we had entered the value as "emailfield:validate"
//in "Message field" and only then it calls the validate message
public override void HandleMessage(Message message)

//Validate if the entered value in the field created using "EmailField" type
//has a correct email address or not
protected void EmailValidate()

//Fetches the current value present or item's field created using custom "EmailField" type
protected override void OnPreRender(EventArgs e)

//Calling the method for showing the error message, or success message 
protected override void Render(System.Web.UI.HtmlTextWriter output)

//set the color scheme for the error message, or success message
protected void RenderValidatorOutput(System.Web.UI.HtmlTextWriter output)

//Check if value present in the email field is modified or not
protected override bool LoadPostData(string value)

Hope it clears!

have any doubt?

Email: prashant.tomar@hotmail.com