Custom DateTime Form Element Not Working With Confirmation Message

Vote:
 

Hi guys,

Have quite a strange issue where a form is being prevented from submitting due to the following console log error

this issue appears when a confirmation message is set and the tickbox to "Show a summary confirmation message after submission" is ticked and I also have a custom datetime form element which has been exactly replicated as a normal datetime element but with a seperate configuration property.

If anyone could assist it'd be most appreciated!

Many thanks

David

#198629
Nov 01, 2018 13:54
Vote:
 

Hi David,

Thanks for your information. Which Forms version are you using ? Can you provide us the code of custom datetime element  so that we can investigate ?

#198722
Nov 05, 2018 11:57
Vote:
 

Hi Quan,

I'm using version 4.10.0

I've modified my code to work in .cshtml file rather an .ashx file, the logic should all be exactly the same however..

@using EPiServer.Forms.Helpers.Internal  
@using EPiServer.Forms.Samples.EditView
@model EpiServer.Models.Blocks.Forms.DipsDateTimeElementBlock

    @{
      var formElement = Model.FormElement;
      var labelText = Model.Label;
      var errorMessage = Model.GetErrorMessage();
    }

<div class="Form__Element Form__CustomElement FormDateTime @Model.GetValidationCssClasses()" data-epiforms-element-name="@formElement.ElementName">
<label for="@formElement.Guid" class="Form__Element__Caption">@labelText</label>
<input name="@formElement.ElementName" id="@formElement.Guid" type="text" class="Form__CustomInput FormDateTime__Input"
       placeholder="@Model.PlaceHolder" value="@Model.GetDefaultValue()" @Model.AttributesString />

<span data-epiforms-linked-name="@formElement.ElementName" class="Form__Element__ValidationError" style="@(string.IsNullOrEmpty(errorMessage) ? "display:none" : "" )">@errorMessage</span>
 
  @if (!EPiServer.Editor.PageEditing.PageIsInEditMode)
  {
  // push this Element information to a global blob. Then Samples.js will init them all at once.
    var pickerType = ((DateTimePickerType) Model.PickerType).ToString().ToLower();

    <script type="text/javascript">
       var __SamplesDateTimeElements = __SamplesDateTimeElements || [];
       __SamplesDateTimeElements.push({
         guid: "@formElement.Guid",
         pickerType: "@pickerType"
       });
     </script>
  }
</div>

Can provide the C# code of the block itself if need be, simply inherits from the DateTimeElementBlock and has an extra property as mentioned..

#198725
Nov 05, 2018 12:04
Vote:
 

Hi David, 

Yes please provide all extra properties. I'm trying to reproduce the error now and will be back here soon.

#198726
Nov 05, 2018 12:14
Vote:
 
namespace Redweb.EpiServer.Models.Blocks.Forms
{
    using System.ComponentModel.DataAnnotations;
    using Attributes;
    using EditorProperties;
    using Enumerations;
    using EPiServer.Core;
    using EPiServer.DataAbstraction;
    using EPiServer.DataAnnotations;
    using EPiServer.Forms.Samples.Implementation.Elements;
    using EPiServer.Shell.ObjectEditing;

    /// <summary>
    /// The DIPS DateTime form element block.
    /// </summary>
    /// <seealso cref="EPiServer.Forms.Samples.Implementation.Elements.DateTimeElementBlock" />
    [ContentType(
        DisplayName = "DIPS Date Time",
        GUID = "{13D43BE2-05B5-4972-ABEE-70F2A815777E}",
        Description = "Date time input form element specifically for DIPS forms",
        GroupName = "DIPS Form",
        Order = 5000)]
    [FormsSampleImage(nameof(DateTimeElementBlock))]
    public class DipsDateTimeElementBlock : DateTimeElementBlock
    {
        /// <summary>
        /// Gets or sets the dips mapping property.
        /// </summary>
        /// <value>The dips mapping property.</value>
        [Display(
            Name = "DIPS Mapping Property",
            Description = "The DIPS form property this element maps to",
            GroupName = SystemTabNames.Content,
            Order = 10
        )]
        [Required]
        [BackingType(typeof(PropertyNumber))]
        [EditorDescriptor(EditorDescriptorType = typeof(EnumEditorDescriptor<DipsFormElement>))]
        public virtual DipsFormElement DipsMappingProperty { get; set; }
    }
}

No worries - let me know if you have any questions regarding the code

#198727
Nov 05, 2018 12:24
Vote:
 

Looking your error in console, it seems that you are creating custom element and forgot to register method for binding data into your controls, something look like:

CustomBindingElements: {
            "EPiServer.Forms.Samples.Implementation.Elements.DateTimeElementBlock": function (elementInfo, val) {

            ....

Pleases see the Forms Sample for details how to do that:

https://github.com/episerver/EPiServer.Forms.Samples/blob/master/ClientResources/ViewMode/EPiServerFormsSamples.js

#198753
Nov 06, 2018 3:43
Vote:
 

Yes, Dac Thach's answer seems to be right.

#198754
Edited, Nov 06, 2018 3:48
Vote:
 

Brilliant thanks guys!

#198763
Nov 06, 2018 10:32
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.