Field dependencies not working with Vue js

Laurence Dean

Vote:

I've run into an issue with field dependencies not working, it seems to be caused via the use of a client side templating language (Vue) where it unmounts the pages DOM and then reinserts it after the epiforms javascript files have already made their references. Meaning when our Vue code remounts the form the client-side dependency selection logic stops working as those references are lost. Request blocking our own javascript and thus vue allows the form dependencies to work as expected.

I've tried appending EpiserverForms.js to the DOM myself using a timeout after the Vue component loads, however it seems to be conflicting with the original EpiserverForms.js that was loaded as part of the helper function Html.RequiredClientResources(header/footer).

My current way of thinking to solve this is to somehow remove the EpiserverForms.js from the required client resources stopping it from evaluating immediately and then load it ourselves once our components are ready. The problem is there doesn't seem to be any way to remove or change client resources only add.

Has anyone run into this kind of issue before? Is there a solution I'm missing?

Could be a similar issue this person is running into

https://world.episerver.com/forum/developer-forum/episerver-forms/thread-container/2020/10/field-dependency-does-not-work/

#229039

Oct 07, 2020 1:02

Laurence Dean

Vote:

Managed to solve this... definitely not a standard solution but here we go.

Essentially by having a htmlhelper extension that gets the client resources and directly removes the EpiServerForm script src as below. This replaces the Html.RequiredClientResources call.

		public static MvcHtmlString CustomRequiredClientResources(this HtmlHelper htmlHelper, string renderingArea)
		{
			var requiredResources =
				htmlHelper
					.RequiredClientResources(renderingArea)
					.ToString()
					.Replace(
						ModuleHelper.GetWebResourceUrl(typeof(FormContainerBlockController), ConstantsForms.StaticResource.JS.EPiServerFormsMinifyPath),
						string.Empty);

			return new MvcHtmlString(requiredResources);
		}

And then in a custom form container block you can get the script yourself and pass it through on a timer.

    <%
        var epiformsScriptPath = ModuleHelper.GetWebResourceUrl(typeof(FormContainerBlockController), ConstantsForms.StaticResource.JS.EPiServerFormsMinifyPath);
    %>
		<script type="text/javascript">

			function reloadepiFormJs(url) {
				var theScript = document.createElement('script');
				theScript.src = url;
				document.head.appendChild(theScript);
			}

			window.setTimeout(function()
			{
				reloadepiFormJs('<%: epiformsScriptPath %>');
			}, 3000);
		</script>

If anyone has any feedback on a better way to solve this I'm all ears. :)

#229041

Oct 07, 2020 5:46

Ben Nitti

Vote:

This same issue showed up for us.

#231180

Nov 20, 2020 18:23

Matthew Boniface

Vote:

@Ben did you find a better way to resolve it?

#231182

Nov 20, 2020 22:36

Ben Nitti

Vote:

We used Laurence's approach.

#231202

Nov 21, 2020 1:11

Levon Badalian

Vote:

This approach no longer works in CMS 12. GetWebResourceUrl internal method signature has changed and I cannot get webresource url from this method as it returns in CMS 11.

#275305

Edited, Mar 02, 2022 0:48

Drew Douglas

Vote:

@Levon

Is the original EPiServerForms.js resource reference being rendered in your version? I don't see the resource in the list with the call to Html.RequiredClientResource, and so the builtin reference to EPiServerForms.js is missing for me.

If that's the same for you you should be able to replace the call to

ModuleHelper.GetWebResourceUrl

with a simple reference to /util/EPiServer.Forms/EPiServerForms.js or wherever it is in your site.

#275576

Mar 03, 2022 5:18