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:
  3. In folder MVC » Model, add a class and name it YesNoFieldModel.cs
    In it, paste the following content:
  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
    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:
  8. In folder MVC » Views » YesNoField, add a file and name it Write.Default.cshtml
    In it, paste the following content:
  9. Build your solution.
     

Was this article helpful?