Forms - Dynamic table custom form element.

Håvard Olsen

Vote:

Hi!

So I've been asked to create a custom form element which basically should act like a dynamic table.

In Episerver our client can define what fields to include & anyone using the form should be able to fill in those fields, but also add additional rows of fields.

An example would be a signup form where you can add additional people. So for each person they can fill in multiple fields like name, email etc..

My approach was going to something like this for the ElementBlock, which for now only includes a contentarea for all the fields.

[ContentType(GUID = "{094C62AA-DBC0-4EF5-A57A-714EE97CE133}", DisplayName = "Grid", GroupName = ConstantsFormsUI.FormElementGroup)]
    public class GridElementBlock : ElementBlockBase
    {
        [Display(GroupName = "Information", Order = -1000)]
        [AllowedTypes(new Type[] {typeof (ElementBlockBase)})]
        [UIHint("FormsContentAreaEditor")]
        [CultureSpecific]
        public virtual ContentArea ElementsArea { get; set; }
    }

For my view I was going to do something like the snippit below, using the PropertyFor method:


    @Html.PropertyFor(x => x.ElementsArea, new {hascontainer = false})

+ some javascript for adding additional rows.

This renders fine, but i'm not getting the inputdata in the form submission. I guess this is because the name/id of the fields rendered in the "PropertyFor" method is wrong compared to what the form is expecting.

My question is then, what alternatives do I have? I would like to keep the ContentArea since this allows the client to add all the available fields with proper validation etc.

Thanks in advance,

Håvard.

#197414

Oct 02, 2018 13:54

Dac Thach Nguyen

Vote:

You are creating a custom element and you need provide method for geting or binding its value. Forms will call getCustomElementValue to retrive the value. You should override this method to calculate value (which contains multiple optional fields) and return to the form processing submit. Please see the example of creating custom element in sample here: https://github.com/episerver/EPiServer.Forms.Samples (see AddressElement). And how to override getCustomElementValue: https://github.com/episerver/EPiServer.Forms.Samples/blob/master/ClientResources/ViewMode/EPiServerFormsSamples.js

Hope this help.

#197444

Oct 03, 2018 9:52

Håvard Olsen

Vote:

What version of Forms do I need to ovveride the getCustomElementValue method?

#197452

Oct 03, 2018 10:43

Dac Thach Nguyen

Vote:

I guest Forms 4.x are fine.

#197453

Oct 03, 2018 10:47

Håvard Olsen

Vote:

Okei, we are running 4.10 but it doesn't seem like this method is ever called. I just tried something minimalistic just to see.

(function ($) {
    // extend the EpiForm JavaScript API in ViewMode
    $.extend(true, epi.EPiServer.Forms, {
        
        Extension: {
            // OVERRIDE, process to get value from datetime picker element
            getCustomElementValue: function ($element) {

                console.log($element);
                // if current element is not our job, let others process
                return originalGetCustomElementValue.apply(this, [$element]);
            }
        }
    });

})($$epiforms || $);

#197455

Oct 03, 2018 10:52

Dac Thach Nguyen

Vote:

You need mark your element as a custom one like:

<div class="Form__Element Form__CustomElement FormAddressElement

#197456

Oct 03, 2018 10:55

Håvard Olsen

Vote:

I see, thank you for your help.

I got a lot more to go on now :)

#197458

Oct 03, 2018 10:58

Try our conversational search powered by Generative AI!

Forms - Dynamic table custom form element.