Create custom fields based on existing ones

Sitefinity CMS MVC widgets use fields to build their views both for list and detail mode. Depending on your requirements, you can customize these fields by changing the view of a specific field either in a single dynamic content MVC widget or in all dynamic content MVC widgets. In addition to changing the view of a field, you may want to add additional logic to the field. In this case, we recommend to to create custom fields. The following article explains how to create custom field that inherits the LongTextAreaField and register it using dependency injection.

Perform the following:

1. Open the your project in Visual Studio.

2. In the context menu of SitefinityWebApp, click Add» Classand name it CustomLongTextField.

3. Inherit the LongTextAreaField base field class.

4. Under SitefinityWebAppadd a new folder and name it Templates.

5. In the context menu of folder Templates, click Code» Code File and name it CustomLongTextAreaField.cshtml

6. In the content of the file, add the following code:

   HTML+Razor

   @model Telerik.Sitefinity.DynamicModules.Builder.Model.DynamicModuleField
   
   @@*Start @Model.Name field*@@
   
   <div>
     <strong>Custom html goes here</strong>
   </div>
   
   @@*End @Model.Name field*@@

7. Open the CustomLongTextField.cs and add the following code:

   C#

   using Telerik.Sitefinity.DynamicModules.Builder.Model;
   using Telerik.Sitefinity.Frontend.DynamicContent.WidgetTemplates.Fields.Impl;
   
   namespace SitefinityWebApp
   {
       public class CustomLongTextField : LongTextAreaField
       {
           protected override string GetTemplatePath(DynamicModuleField field)
           {
               return CustomLongTextField.TemplatePath;
           }
   
           private const string TemplatePath = "~/Templates/CustomLongTextAreaField.cshtml";
       }
   }

   The code above registers new template for the custom field by overriding the GetTemplatePath method.

8. Register the custom field using dependency injection. Perform the following:

   1. Open the global application class.
      If you do not have a Global.asax class in your project, in the context menu of SitefinityWebApp, click Add » New Item » Global Application Class.

   2. Inside the Global.asax, register to the Bootstrapper.Bootstrapped event and use ObjectFactory class to register the new custom field in the following way:

      C#

      using System;
      using Telerik.Microsoft.Practices.Unity;
      using Telerik.Sitefinity.Abstractions;
      using Telerik.Sitefinity.Frontend.DynamicContent.WidgetTemplates.Fields;
      using Telerik.Sitefinity.Frontend.DynamicContent.WidgetTemplates.Fields.Impl;
      
      namespace SitefinityWebApp
      {
          public class Global : System.Web.HttpApplication
          {
              protected void Application_Start(object sender, EventArgs e)
              {
                  Bootstrapper.Bootstrapped += Bootstrapper_Bootstrapped;
              }
      
              private void Bootstrapper_Bootstrapped(object sender, EventArgs e)
              {
                  ObjectFactory.Container.RegisterType(typeof(Field), typeof(CustomLongTextField), typeof(LongTextAreaField).Name);
              }
          }
      }

      The ObjectFactory is a special class in Sitefinity CMS that wraps the IUnityContainer, part of the Microsoft Practices Unity Application Block. You use the Unity Application Block for inversion of control pattern.

9. Build the application.
   You can use the new field in the dynamic content MVC widgets.