Copyright Johan Kronberg 2009-2024 Latest posts RSS feed X: johankronberg LinkedIn Profile GitHub: krompaco
Site generated by: Record Collector

Adding a custom Episerver Forms consent element type

Having a site wide form policy consent text and checkbox available might be useful when editors start using Episerver Forms.

In my case the requirement was to not store any consent text as Arild describes in his post on storing consent context in submitted form data but if you want that it's just a matter of removing IExcludeInSubmission and setting a suitable new value other than the "1" in my example. Of course the editor can also take the longer route and create a default choice element manually.

This is the content type I added to set it up. Notice ValidatableElementBlockBase, IExcludeInSubmission and the hack to get the RequiredValidator activated.

namespace DemoProject.Models.FormElements
{
    using EPiServer.DataAbstraction;
    using EPiServer.DataAnnotations;
    using EPiServer.Forms.Core;
    using EPiServer.Forms.EditView;
    using EPiServer.Forms.EditView.DataAnnotations;
    using EPiServer.Forms.Implementation.Elements.BaseClasses;
    using EPiServer.Forms.Implementation.Validation;

    [ContentType(
        GUID = "6d96df96-118c-4c7f-8630-4af51e4afaed",
        DisplayName = "Site form consent checkbox",
        Description = "Label text is fetched from the site setting.",
        GroupName = ConstantsFormsUI.FormElementGroup,
        Order = 2230)]
    [AvailableValidatorTypes(Include = new[] { typeof(RequiredValidator) })]
    ////[ImageUrl("~/static/img/thumbnails/CustomTextArea.png")]
    ////If you need a custom icon...
    public class AutoConsentElementBlock : ValidatableElementBlockBase,
                                                IExcludeInSubmission
    {
        public override void SetDefaultValues(ContentType contentType)
        {
            base.SetDefaultValues(contentType);

            // Seems to be the way to get "Required" by default
            // when adding the element to a form container
            this.Validators = typeof(RequiredValidator).FullName;

            this.Content.Name = "Site form consent checkbox";
        }
    }
}

And in Views\Shared\ElementBlocks\ I put AutoConsentElementBlock.cshtml and this markup boilerplate.

@using EPiServer.Forms.Helpers.Internal
@model AutoConsentElementBlock

@using (Html.BeginElement(Model, new { id = Model.FormElement.Guid,
    @class = Model.GetValidationCssClasses(), data_f_type = "choice" }, true, "div"))
{
    <div>
        @{
            var id = $"{Model.FormElement.Guid}-1";
        }

        <input type="checkbox"
            name="@Model.FormElement.ElementName"
            value="1"
            data-f-datainput
            id="@id" />

        <label for="@id">
            @GetSiteSettingFromSomewhere().SomeTextProperty
        </label>
    </div>

    @Html.ValidationMessageFor(Model)
}

The editor can now just drop this new element to the appropriate place, likely just before the submit button, and don't need to edit anything further. A centrally managed text will be used for the label and the INPUT-element won't clutter the form data but will require being checked before submission can occur.

Published and tagged with these categories: Episerver, Development