ASP.NET

Creating a custom field type in sitecore

This blog post explains how you can implement a custom field type for the Sitecore CMS. We create custom field types if it is required to access some external data as source to our field. This is about creating a field type in the Content Editor, the Page Editor may require another approach, and you can use any ASP.NET techniques on the managed web site.

We will be creating a custom droplist field type in sitecore so that we can use an external datasource.

Step 1: Add a new custom field to core database

  • Switch to core database
  • navigate to “/sitecore/system/Field types/List Types/
  •  Create new fieldtype  based on on “/sitecore/templates/System/Templates/Template field type”.

Add new field type in core database

Step 2: Add new custom field to template

Switch to master database, and create a new template with a field whose field type is the custom field type created in step 1.

Step 3: Create new item

Create a new item using the template created in step 2 in the content editor.

Step 4: Create a class in the project to render the external data to be displayed in the custom droplist

Create a class ExampleCustomDroplist to render the data from an external resource. The class is as follows: 

namespace CustomDroplist
{
public class ExampleCustomDroplist: Sitecore.Web.UI.HtmlControls.Control
{
protected override void DoRender(HtmlTextWriter output)
{
string error = null;
ExampleData data = new ExampleData();
//passing example department names to the list in GetCustomData class
var departments = data.GetCustomData();
output.Write("<select" + GetControlAttributes() + ">");
if (departments == null)
{
error = "No source list specified for field";
}
else
{
bool valueFound = String.IsNullOrEmpty(Value);
foreach (var dept in departments)
{
//render the department names
valueFound = valueFound || dept.DepartmentName == Value;
output.Write(String.Format(@"<option value\"" +s.DepartmentName+ "\">""</option>"));
}
if (!valueFound)
{
error = "Value not in the selection list.";
}
}
if (error != null)
{
output.Write("<optgroup label=\"" + error + "\">");
output.Write("<option value=\"" + Value + "\" selected=\"selected\">" + Value + "</option>");
output.Write("</optgroup>");
}

output.Write("</select>");

if (error != null)
{
output.Write("<div style=\"color:#999999;padding:2px 0px 0px 0px\">{0}</div>", error);
}
}
}

 

Step 5: Add the assembly name and controls in the core database

  • Switch to core db
  •  navigate to the field type created in step 1.
  •  Populate the fields of this field type as in the screenshot below.

 

This is to tell Sitecore that go to first definition of “customControl” in config and then using this definition, instantiate the control named “ExampleCustomDroplist” which we have implemented through class.This custom field is now available for use.

Step 6: Add control to the config.

Add the control sources to sitecore.config file.

<controlSources>
<source mode=”on” namespace=”CustomDroplist” assembly=”CustomDroplist” prefix=”customControl”/></controlSources>

 

Now navigate to the item in sitecore content tree and open it, you will be able to see the external data you rendered from code in the customized field.

About The Author

Leave a Reply

*