London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

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.