Try our conversational search powered by Generative AI!

AI OnAI Off

Improve API usability when build new FormElement

Found in

EPiServer.Forms 4.24.0

Fixed in

EPiServer.Forms 4.24.3

(Or a related package)

Created

Mar 22, 2019

Updated

May 07, 2019

Area

ViewMode rendering

State

Closed, Fixed and tested

Description

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>
</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

Background

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. *

Solution:

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
 
<% } %>

Note
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