Improve API usability when build new FormElement

Found in

EPiServer.Forms 4.24.0

Fixed in

EPiServer.Forms 4.24.3


Mar 22, 2019


May 07, 2019


ViewMode rendering


Closed, Fixed and tested


During developing a custom Form Element (consisting multiple checkboxes) I found that we have to add certain kind of classes as below otherwise entries for custom element were not saving.
<div class="Form__Element FormChoice">
<div class="form-item form-item-checkradio"></div>
As a developer I need to learn that I need a particular CSS class name if we want our data STORED on simple form submission.
Raised by EMVP Khurram Khan


The code base of Form in Viewmode use jQuery. It needs some anchors to find the element, to processing/manipulating Forms' DOM.
The DOM processing is UI interaction, show hide base on condition, validation, listen on/off events ...
It's also a way to distinguish our DOM.
It also helps us to avoid side effect, not interact not-generated-by-Forms DOM, we can stay safe in normal page, SPA page, ... where the form can be drop.

*It's not convenience and too strict for 3rd party developer.
We need to review the clientside script in ViewMode.
This current approach doesn't seems convincing from "EPiServer as SDK" point of view. *


Custom form elements should be as simple as below:
Example 1:

<% using(Html.BeginElement(Model, new {})) { %>
    <input type="text" name="<%: Model.FormElement.ElementName %>" data-f-datainput />
<% } %>

Example 2:

<% using(Html.BeginElement(Model, new {})) { %>
    <input type="checkbox" name="<%: formElement.ElementName %>" value="1" data-f-datainput /> Checkbox 1
    <input type="checkbox" name="<%: formElement.ElementName %>" value="2" data-f-datainput /> Checkbox 2
    <input type="checkbox" name="<%: formElement.ElementName %>" value="3" data-f-datainput /> Checkbox 3
<% } %>

The attribute data-f-datainput is used for Form Fields Dependency feature to work. We can remove this attribute if we don't need Form Fields Dependency.

Remember to test scenario:

  • multi-step-form
  • multi forms on the same page