Forms - Dynamic table custom form element.

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
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
Vote:
 

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

#197452
Oct 03, 2018 10:43
Vote:
 

I guest Forms 4.x are fine.

#197453
Oct 03, 2018 10:47
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
Vote:
 

You need mark your element as a custom one like:

<div class="Form__Element Form__CustomElement FormAddressElement
#197456
Oct 03, 2018 10:55
Vote:
 

I see, thank you for your help.

I got a lot more to go on now :)

#197458
Oct 03, 2018 10:58
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.