Extend form rules

This article describes how to apply form rules to custom form fields.

First you create a new fields for the form, using procedure Create new input fields for forms, then, you make the field to support rules.

Controller

The Controller must be implemented the following two interfaces:

• ISupportRules interface
  This interface holds the information for:
  • The operators of type Dictionary<ConditionOperator, string>, where:
  • Key is the ConditionOperator that is the enumeration of supported operands for the conditional statement.
  • Value is the string displayed in the dropdown in the backend UI.
  • Title is used to determine the field in the rules. If this is empty, the field is market as untitled.
• An interface for the type of the field that is one of the following:
  • ITextField 
    This interface holds the additional property for the text input of type TextType
  • ISubmitFormField
  • ISectionHeaderFormField
  • IParagraphFormField
  • IFileFormField
  • ICaptchaFormField
  • IDropDownFormField 
    This interface is for the dropdown box that holds the additional property for the values of the field’s choices of type IEnumerable<string>
  • IMultipleChoiceFormField 
    This interface is for the multiple choice that holds the additional property for the values of the field’s choices of type IEnumerable<string>
  • ICheckboxFormField 
    This interface is for the checkbox that holds the additional property for the values of the field’s choices of type IEnumerable<string>

Model

In the Model, you must implement IHideable to allow show and hide actions of that field.

View

For the field that participates in conditions, you must implement the following:

• In the template, add attribute data-sf-role="<wrapper_container>" to the container of the field and add attribute data-sf-role="<element_selector>" to the input of the field.
• In the client script, register field to FormRulesSettings.
  For example: FormRulesSettings.addFieldSelector("<field_wrapper_container>", "[data-sf-role='<field_element_selector>']", "<additional_filter>"), where:
  • <field_wrapper_container> is the container of the field
  • [data-sf-role='<field_element_selector>'] is the attribute for the element selector
  • <additional_filter> is the selector to filter elements from field.
• Attach to your selected event to element where you want to trigger form rules.

Sample: Create a custom form field that can participate in form rules

1. Open your project in Visual Studio.
2. In folder MVC » Controllers, add a class and name it YesNoFieldController.cs
   In it, paste the following content:
   C#

   using SitefinityWebApp.Mvc.Models;
   using System.Collections.Generic;
   using System.ComponentModel;
   using Telerik.Sitefinity.Data.Metadata;
   using Telerik.Sitefinity.Forms.Model;
   using Telerik.Sitefinity.Frontend.Forms;
   using Telerik.Sitefinity.Frontend.Forms.Mvc.Controllers.Base;
   using Telerik.Sitefinity.Model;
   using Telerik.Sitefinity.Modules.Forms.Web.UI.Fields;
   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>, ISupportRules, IMultipleChoiceFormField
       {
           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;
               }
           }
   
           IDictionary<ConditionOperator, string> ISupportRules.Operators
           {
               get
               {
                   // ConditionOperator are supported operators for the condition statement, the value is the string displayed in the dropdown.
                   return new Dictionary<ConditionOperator, string>()
                   {
                       [ConditionOperator.Equal] = "equal",
                       [ConditionOperator.NotEqual] = "not equal"
                   };
               }
           }
   
           string ISupportRules.Title
           {
               get
               {
                   // The title is used to determine the field in the Rules. If this is empty the field will be market as untitled. 
                   return "Yes/No title";
               }
           }
   
           IEnumerable<string> IMultipleChoiceFormField.Choices
           {
               get
               {
                   // "Choices" must be the values of the fields
                   // <input type="radio" name="{name}" value="{value1}") data-sf-role="yes-no-field-input">{Title}</input>
                   // <input type="radio" name="{name}" value="{value2}") data-sf-role="yes-no-field-input">{Title}</input>
                   // in the example above we take value1 and value2 for choices.
                   IEnumerable<string> vals = new List<string>() { this.Model.YesTitle, this.Model.NoTitle };
                   return vals;
               }
           }
   
           private YesNoFieldModel model;
       }
   }

3. In folder MVC » Model, add a class and name it YesNoFieldModel.cs
   In it, paste the following content:
   C#

   using Telerik.Sitefinity.Frontend.Forms.Mvc.Models.Fields;
   using Telerik.Sitefinity.Modules.Forms.Web.UI;
   
   namespace SitefinityWebApp.Mvc.Models
   {
       public class YesNoFieldModel : FormFieldModel, IHideable
       {
           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;
               }
           }
   
           /// <summary>
           ///  Gets or sets a value indicating if the field is hidden or not.
           /// </summary>
           bool IHideable.Hidden
           {
               get;
               set;
           }
   
           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. In folder MVC » Views, add a folder and name it YesNoField
5. In folder MVC » Views » YesNoField, add a folder and name it scripts
6. In folder MVC » Views » YesNoField » scripts, add a JavaScript file and name it yesno-field.js
   JavaScript

   jQuery(document).ready(function($){
       if(typeof FormRulesSettings !== "undefined")
       {
           FormRulesSettings.addFieldSelector("yes-no-field-container", "[data-sf-role='yes-no-field-input']", ":checked");
           var container = $('[data-sf-role="yes-no-field-container"]');
           var attachHandlers = function (input) {
               input.on('change', function (e) {
                   if (typeof $.fn.processFormRules == 'function')
                       $(e.target).processFormRules();
               });
           };
   
           var inputs = container.find('[data-sf-role="yes-no-field-input"]');
           attachHandlers(inputs);
       }   
   });

   In it, paste the following content:
7. In folder MVC » Views » YesNoField, add a file and name it Read.Default.cshtml
   In it, paste the following content:
   HTML+Razor

   @model SitefinityWebApp.Mvc.Models.YesNoFieldModel
   
   <div>
       <label>@Model.MetaField.Title</label>
       <p>@Model.Value</p>
   </div>

8. In folder MVC » Views » YesNoField, add a file and name it Write.Default.cshtml
   In it, paste the following content:
   HTML+Razor

   @model SitefinityWebApp.Mvc.Models.YesNoFieldModel
   
   @using Telerik.Sitefinity.Frontend.Mvc.Helpers;
   @using Telerik.Sitefinity.Modules.Pages;
   <div>
       <div data-sf-role="yes-no-field-container">
           <label>@Model.MetaField.Title</label>
           <input type="radio" name="@Model.MetaField.FieldName" value="@Model.YesTitle" @((Model.Value == Model.YesTitle) ? "checked" : "") data-sf-role="yes-no-field-input">@Model.YesTitle</input>
           <input type="radio" name="@Model.MetaField.FieldName" value="@Model.NoTitle" @((Model.Value == Model.NoTitle) ? "checked" : "") data-sf-role="yes-no-field-input">@Model.NoTitle</input>
       </div>
       <p>@Model.MetaField.Description</p>
   </div>
   
   @Html.Script(ScriptRef.JQuery, "top", false)
   @Html.Script(Url.WidgetContent("Mvc/Views/YesNoField/scripts/yesno-field.js"), "bottom", false)

9. Build your solution.