Try our conversational search powered by Generative AI!

EPiServer Forms Drag And Drop

Vote:
 

Hi,

I can create custom form elements and I am able to add them to Forms but not by dragging and dropping the element onto the edit view of a form block.  When I do this for the custom element I get the below exception and the drag and drop doesn't work.  But adding the block by clicking on the link in the content area works though.

System.ComponentModel.DataAnnotations.ValidationException: The page name must contain at least one visible character.
at EPiServer.Core.ContentProvider.ThrowValidationException(ICollection`1 errors)
at EPiServer.Core.ContentProvider.Validate(IContent content, SaveAction action)
at EPiServer.Core.DefaultContentRepository.Save(IContent content, SaveAction action, AccessLevel access)
at EPiServer.Forms.Controllers.FormsElementStore.GetElementByType(Int32 typeId, String parentLink)
at lambda_method(Closure , ControllerBase , Object[] )
at System.Web.Mvc.ActionMethodDispatcher.Execute(ControllerBase controller, Object[] parameters)
at System.Web.Mvc.ReflectedActionDescriptor.Execute(ControllerContext controllerContext, IDictionary`2 parameters)
at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethod(ControllerContext controllerContext, ActionDescriptor actionDescriptor, IDictionary`2 parameters)
at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass42.b__41()
at System.Web.Mvc.Async.AsyncResultWrapper.<>c__DisplayClass8`1.b__7(IAsyncResult _)
at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult`1.End()
at System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeActionMethod(IAsyncResult asyncResult)
at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass37.<>c__DisplayClass39.b__33()
at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass4f.b__49()
at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass4f.b__49()
at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass4f.b__49()
at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass37.b__36(IAsyncResult asyncResult)
at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult`1.End()
at System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeActionMethodWithFilters(IAsyncResult asyncResult)
at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass25.<>c__DisplayClass2a.b__20()
at System.Web.Mvc.Async.AsyncControllerActionInvoker.<>c__DisplayClass25.b__22(IAsyncResult asyncResult)
at System.Web.Mvc.Async.AsyncResultWrapper.WrappedAsyncResult`1.End()
at System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeAction(IAsyncResult asyncResult)
at EPiServer.Shell.Services.Rest.RestControllerBase.EndExecute(IAsyncResult asyncResult)
at EPiServer.Shell.Services.Rest.RestHttpHandler.EndProcessRequest(IAsyncResult result)
at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

All the blog posts I have read don't seem to mention anything about this error.  Is there something I can do to prevent this error?

Thanks,

#144509
Feb 15, 2016 0:38
Vote:
 

Hi,

Could you please share your custom element code?

Best Regards,

Tuan Do

#144619
Edited, Feb 16, 2016 11:35
Vote:
 

Nothing special.

[ContentType(DisplayName = "Custom Text Field", GUID = "35ab53fc-e0b9-4866-8614-ecc6f62f698b", Description = "", GroupName = "Forms")]
public class CustomTextField : TextboxElementBlock
{

}


But currently have three custom elements and none of them work.  Another one extends SelectionElementBlock and the last is a container that extends ElementBlockBase to allow use to have multiple columns in the form.  None of them work.  

#144649
Edited, Feb 16, 2016 23:20
Vote:
 

Maybe set default page name on them?

#144654
Feb 17, 2016 7:34
Vote:
 

When you are dragging and dropping it creates a block in the background with the default name but EPiSErver has validation that checks if the block has the default name and doesn't save it if it still has the default name.  The default form elements somehow skip this validation but the custom elements that I have done hit this validaiton for some reason.

#144656
Feb 17, 2016 7:50
Vote:
 

Hi,

Please try following way:

  • In the embedded language file (.xml file), create a new customtextfield element under languages/language/contenttypes
  • In this case, it should be:
<languages>
    <language name="English" id="en">
        <contenttypes>
            <customtextfield>
                <name>Custom Text Field</name>
                <description></description>
                <newitemdefaultname>New custom text field</newitemdefaultname>
            </customtextfield>
        </contenttypes>
    </language>
</languages>



Best Regards,

Tuan Do

#144659
Edited, Feb 17, 2016 8:05
Vote:
 

Yeah that works thanks.

#144797
Feb 19, 2016 6:24
Vote:
 

I file a bug to improve this later. Thank you.

#144808
Feb 19, 2016 10:37
Vote:
 

Hi,

We experience this same issue when using the standard Forms element delivered in the nuget Forms package i.e. can't drag and drop forms elements. It works fine when using "browse". No javascript errors. 

When first drag+drop a couple of elements, then adding by "browse" the previous drag+drop elements suddenly appears.

#147437
Apr 14, 2016 13:10
Vote:
 

I think it's a lag in CMS EditView UI. FormElements are ordinary Block. Nothing special with drag n drop them to the ContentArea.

#147463
Apr 15, 2016 3:11
Vote:
 

I too have the same issue. I can´t always drag and drop custom form elements. Sometimes it works, I haven´t found any reason behind it. Browse link in content area works. Adding a custom field in the XML like above solution haven´t made any difference, maybe that solution was for an earlier version of Forms? I run 2.0.0.2.

On another "simpler", yet still annoying, note: I can´t set custom images for the custom form element that shows when clicking the browse link like you can with ordinary blocks and pages through adding the attribute ImageUrl on the block/page type:

[ContentType(DisplayName = "Country selection", GUID = "5b7bd272-2b00-46ca-a4f8-26865c2fc2ca", GroupName = "Custom Elements", Description = "A custom element for country selection")]
[ImageUrl(Constants.FormElementsTypeImageBasePath + "SelectionElementBlock.png")]
public class CountrySelectionElementBlock : ElementBlockBase
{
}

The image is a copy of the one used for the built-in selection form element and is found here:

\modules\_protected\EPiServer.Forms\2.0.0.2\ClientResources\epi-forms\themes\sleek\images\contenttypes

I copied the image I wanted to a folder in my solution which is the path in the ImageUrl attribute, but the image for my custom form element is still the ugly white default one.

EDIT: From nothing at all happening when dragging and dropping is not working I started getting this error:

ContentReference: Input string was not in a correct format.

I suspect that it might have something to do with the stuff explained earlier in this thread by Paul:
"When you are dragging and dropping it creates a block in the background with the default name but EPiServer has validation that checks if the block has the default name and doesn't save it if it still has the default name.  The default form elements somehow skip this validation but the custom elements that I have done hit this validaiton for some reason.". However adding the custom element to the XML file haven´t worked. I added:

<countryselectionelementblock>
    <name>Country selection element block</name>
    <description>A custom element for country selection</description>
    <newitemdefaultname>New country selection</newitemdefaultname>
</countryselectionelementblock>

My custom form element is called CountrySelectionElementBlock, here is the block code:

[ContentType(DisplayName = "Country selection", GUID = "5b7bd272-2b00-46ca-a4f8-26865c2fc2ca", GroupName = "Custom Elements", Description = "A custom element for country selection")]
[ImageUrl(Constants.FormElementsTypeImageBasePath + "SelectionElementBlock.png")]
public class CountrySelectionElementBlock : ElementBlockBase
{
	
}

Shouldn´t my custom element in the XML file be <countryselectionelementblock> then?

Any thoughts?

BR, Petra

#147853
Edited, Apr 26, 2016 16:42
Vote:
 

@Petra Do you take a look at our open sourced elements here https://github.com/episerver/EPiServer.Forms.Samples? The Samples project acts exactly as an extended project for Forms, like it was developed by a 3rd party developer.

Your custom element in the XML file be <countryselectionelementblock> is fine. But I think you put your XML in wrong folder.
Don't modify our XML file and expected it affect Forms.
You should put your new XML file to your localization location (with AlloyMVC, it is in ~/Resources/LanguageFiles folder)

<localization fallbackBehavior="Echo, MissingMessage, FallbackCulture" fallbackCulture="fr">
<providers>
<add virtualPath="~/Resources/LanguageFiles" name="languageFiles" type="EPiServer.Framework.Localization.XmlResources.FileXmlLocalizationProvider, EPiServer.Framework" />
</providers>
</localization>



Thach Lockevn.

#148278
May 09, 2016 10:33
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.