Create new input fields for forms

Overview

You use MVC form fields to collect user input and persist the input in form responses. MVC form fields follow the model-view-controller convention, so you create form fields in a similar workflow as creating widgets in MVC. In addition, similar to standard form fields, you can create the new fields in separate assemblies, following MVC principles of "separation of concerns".

The following tutorial demonstrates how to create a Yes/No field to use in MVC forms. You first create the folder structure, then the custom model, controller, and view. Finally, you register the field in Sitefinity CMS forms toolbox.

Create the custom model

The model represents the data your application works with.

NOTE: This example uses plain C# classes for the model.

To create the custom model:

1. Open your Sitefinity CMS project in Visual Studio

2. Navigate to the Mvc folder

3. In the Models folder, create a new class and name it YesNoFieldModel.

4. Open the YesNoFieldModel.cs file and paste the following code:

   C#

   using Telerik.Sitefinity.Frontend.Forms.Mvc.Models.Fields;
   
   namespace SitefinityWebApp.Mvc.Models
   {
       public class YesNoFieldModel : FormFieldModel
       {
           public string YesTitle
           {
               get
               {
                   if (string.IsNullOrEmpty(this.yesTitle))
                       this.yesTitle = "Yes";
   
                   return this.yesTitle;
               }
               set
               {
                   this.yesTitle = value;
               }
           }
   
           public string NoTitle
           {
               get
               {
                   if (string.IsNullOrEmpty(this.noTitle))
                       this.noTitle = "No";
   
                   return this.noTitle;
               }
               set
               {
                   this.noTitle = value;
               }
           }
   
           public override object GetViewModel(object value, Telerik.Sitefinity.Metadata.Model.IMetaField metaField)
           {
               this.Value = value as string ?? this.MetaField.DefaultValue ?? string.Empty;
               return this;
           }
   
           private string yesTitle;
           private string noTitle;
       }
   }

Create the controller

1. In the Controllers folder, create a new class and name it YesNoFieldController.

2. Open the YesNoFieldController.cs file and paste the following code:

   C#

   using SitefinityWebApp.Mvc.Models;
   using System.ComponentModel;
   using Telerik.Sitefinity.Data.Metadata;
   using Telerik.Sitefinity.Frontend.Forms;
   using Telerik.Sitefinity.Frontend.Forms.Mvc.Controllers.Base;
   using Telerik.Sitefinity.Model;
   using Telerik.Sitefinity.Mvc;
   using Telerik.Sitefinity.Web.UI.Fields.Enums;
   
   namespace SitefinityWebApp.Mvc.Controllers
   {
       [ControllerToolboxItem(Name = "MvcYesNo", Title = "Yes/No", Toolbox = FormsConstants.FormControlsToolboxName, SectionName = "Custom Fields")]
       [DatabaseMapping(UserFriendlyDataType.YesNo)]
       public class YesNoFieldController : FormFieldControllerBase<YesNoFieldModel>
       {
           public YesNoFieldController()
           {
               this.DisplayMode = FieldDisplayMode.Write;
           }
   
       /// <inheritDocs />
       [TypeConverter(typeof(ExpandableObjectConverter))]
           public override YesNoFieldModel Model
           {
               get
               {
                   if (this.model == null)
                       this.model = new YesNoFieldModel();
   
               return this.model;
               }
           }
   
       private YesNoFieldModel model;
       }
   }

   NOTE: When creating new form fields, your controller can inherit FormFieldControllerBase. Thus, your field is compatible with the forms functionality in Sitefinity CMS. The FormFieldControllerBase provides two actions - Write and Read, which are invoked depending on the Form widget settings. If you want to implement some custom logic in these actions, you can just override them.

NOTE: If you create your controller in a separate assembly, you need to apply the [Telerik.Sitefinity.Frontend.Mvc.Infrastructure.Controllers.Attributes.EnhanceViewEngines] attribute to your controller class.

Create the view

You implement the view that shows the data from the model, populated in the controller:

1. In the Views folder create a new folder and name it YesNoField.
2. Create the view for the field Writemode:

   1. Under the class library, in the Mvc/Views/YesNoField folder, create a new code file and name it Write.Default.cshtml.

   2. Using the Properties window for the file, set its Build Action to Embedded Resource.

   3. Open the file and paste the following code:

           ```HTML+Razor

      @model SitefinityWebApp.Mvc.Models.YesNoFieldModel

      @Model.MetaField.Title @Model.YesTitle @Model.NoTitle

      @Model.MetaField.Description

      ```
3. Create the view for the field Readmode:

   1. Under the class library, in the Mvc/Views/YesNoField folder, create a new code file and name it Read.Default.cshtml.

   2. Using the Properties window for the file, set its Build Action to Embedded Resource.

   3. Open the file and paste the following code:

           ```HTML+Razor

      @model SitefinityWebApp.Mvc.Models.YesNoFieldModel

      @Model.MetaField.Title

      @Model.Value

      ```

Register the field in Sitefinity

This tutorial assumes that you are directly changing your Sitefinity CMS project. However, you may also use a separate assembly to contain your custom code. If you do so, add reference to your custom assembly in your Sitefinity CMS project.

After you complete adding the code for your custom form fields, and, if needed, add references to your assembly, as a final step you need to build your solution.

RESULT: The field is automatically registered in Sitefinity CMS forms toolbox and you can now use the new field on your MVC forms.

Extend form rules

After you have created and registered the custom form field, you can apply rules to it by following procedure Extend form rules procedure.