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.

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>
    

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

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. 
  

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.