How to create custom forms field - Sitefinity/feather GitHub Wiki

Feather MVC-based forms fields are designed to follow the standart MVC conventions for Model-View-Controller. The process for creating new forms field is similar to creation of widgets with Feather and provide clean, easy to control markup. In addition just like the standart widgets you can create new fields in separate assemblies for better separation of concerns.

The following tutorial demonstrates how to create a new Feather MVC forms field.

1. Open your project in Visual Studio. If needed, save the solution file.
2. In the context menu of the solution, click Add » New Project…
3. In the left pane, select Visual C# » Windows.
4. Select Class Library and name it MyFirstFormsField.
5. Inside the created class library, delete the class that is automatically created by Visual Studio.
6. Under the new class library, create a new folder and name it Mvc.
7. Inside folder Mvc, create three new folders - Controllers, Models, and Views.
8. Under folder Views, create a new folder and name it YesNoField.
9. In the new project, you should reference the following assemblies:

System.Web
System.Web.Helpers
System.Web.Mvc
System.Web.Razor
System.Web.WebPages
System.Web.WebPages.Razor
Telerik.Sitefinity
Telerik.Sitefinity.Model
Telerik.Sitefinity.Mvc
Telerik.Sitefinity.Frontend
Telerik.Sitefinity.Frontend.Forms

1. Under MyFirstFormsField class library, expand the Properties.

2. Open AssemblyInfo.cs and insert the following:

       using Telerik.Sitefinity.Frontend.Mvc.Infrastructure.Controllers.Attributes;
       [assembly: ControllerContainer]

3. Create the custom model

   The model represents the data your application works with.

   This example uses plain C# classes for the model.

   To create the custom model, perform the following:

   a. Inside folder Models, create a new class and name it YesNoFieldModel.

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

namespace MyFirstFormsField.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;
    }
}

4. Create the controller

   a. Inside folder Controllers, create a new class and name it YesNoFieldController.

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

namespace MyFirstFormsField.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;
    }
}

For your convenience while creating new form fields your controller can inherit FormFieldControllerBase . This way you will not have to implement any actions by yourself and your field will be compatible with the forms functionality in Sitefinity. The FormFieldControllerBase provides two actions - Write and Read which will be invoked depending of the forms widget settings. If you want to implement some custom logic in these actions you can just override them.

5. Create the view

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

   View for field Write mode:

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

   b. In the Properties section of the file, set its Build Action to Embedded Resource.

   c. Open the file and paste the following code:

@model MyFirstFormsField.Mvc.Models.YesNoFieldModel

<div>
    <div>
        <label>@Model.MetaField.Title</label>
        <input type="radio" name="@Model.MetaField.FieldName" value="true" @((Model.Value=="true")? "checked": "")>@Model.YesTitle</input>
        <input type="radio" name="@Model.MetaField.FieldName" value="false" @((Model.Value=="false")? "checked": "")>@Model.NoTitle</input>
    </div>
    <p>@Model.MetaField.Description</p>
</div>

#### View for field Read mode:

a. Under the class library, in folder Mvc/Views/YesNoField, create a new Code File and name it *Read.Default.cshtml*.

b. In the *Properties* section of the file, set its *Build Action* to *Embedded Resource*.

c. Open the file and paste the following code:

@model MyFirstFormsField.Mvc.Models.YesNoFieldModel

<div>
    <label>@Model.MetaField.Title</label>
    <p>@Model.Value</p>
</div>

1. Build the solution
2. In the SitefinityWebApp project, add a reference to assembly MyFirstFormsField.

The field is automatically registered in Sitefinity forms toolbox.

Now you can use the new field on your MVC forms.