November Happy Hour will be moved to Thursday December 5th.
AI OnAI Off
Field dependencies not working with Vue js
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. :)
Oct 07, 2020 5:46
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.
Edited,
Mar 02, 2022 0:48
@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.GetWebResourceUrlwith a simple reference to /util/EPiServer.Forms/EPiServerForms.js or wherever it is in your site.
Mar 03, 2022 5:18
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/